专栏首页性能与架构微信小程序示例 - 视图容器

微信小程序示例 - 视图容器

滑块视图容器 swiper

代码结构

<swiper>
    <swiper-item>
      <image src="{{item}}"/>
    </swiper-item>
    ...
</swiper>

只可放置 组件,其他节点会被自动删除

属性

名称

作用

indicator-dots

是否显示面板指示点

autoplay

是否自动切换

current

当前所在页面的 index

interval

自动切换时间间隔

duration

滑动动画时长

bindchange

滑动后的触发事件

可滚动视图区域 scroll-view

代码结构

<scroll-view>
    <view>...</view>
    ...
</scroll-view>

属性

名称

作用

scroll-x、scroll-y

允许横向、纵向滚动

upper-threshold、lower-threshold

距顶部/左边(底部/右边)多少px时,触发 scrolltoupper 事件

scroll-top、scroll-left

设置竖向/横向滚动条位置

scroll-into-view

滚动到指定ID的元素

bindscrolltoupper

事件处理:滚动到顶部/左边

bindscrolltolower

事件处理:滚动到底部/右边

bindscroll

事件处理:滚动

视图容器 view

代码结构

没有固定结构,比较随意,可以包裹其他组件,也可以放到一些组件的内部,类似HTML中的 DIV

<view>...</view>

组件 view 的重要作用是用来布局,其排列方式很灵活,例如:

横向排列
flex-direction:row;

纵向排列
flex-direction:column;

更多排列方式可以参考源码

源码下载

本文分享自微信公众号 - 性能与架构(yogoup),作者:杜亦舒

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-10-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ZooKeeper是如何保证数据一致性的?

    ZooKeeper是个集群,内部有多个server,每个server都可以连接多个client,每个client都可以修改server中的数据 ZooKeep...

    dys
  • mysql优化案例

    今天发现网站页面打开非常慢,对处理过程简单记录了一下 找问题 首先登录服务器使用 top 查看当前进程信息,发现排名第一的是 mysql,占用 cpu 达到了 ...

    dys
  • kafka 中 zookeeper 具体是做什么的?

    zookeeper 是 kafka 不可分割的一部分,可见其重要程度,所以我们有必要了解一下 zookeeper 在 kafka 中的具体工作内容。

    dys
  • 微信小程序实践:2.3 可滚动的容器组件之 scroll-view

    说什么真理无穷,进一寸有一寸的欢喜。大家好,我是石桥码农,今天继续为大家分享微信小程序实践相关的技术内容。

    石桥码农
  • 微信小程序开发实战(1):容器组件

    本文主要介绍了滚动视图组件(scroll-view)的各种常用功能,例如,垂直和水平滚动、滚动事件等,并通过例子代码来演示这些功能的使用方法。

    蒙娜丽宁
  • uni-app中使用scroll-view滚到底部时多次触发scrolltolower

      前段时间使用scroll-view可滚动视图区域容器来做多个不同内容的展示(在我这个页面中同时使用了三个scroll-view做数据展示),因为这几个展示的...

    追逐时光
  • 「大众点评点餐」小程序开发经验 03:事件联动

    李超,美团点评前端开发工程师,2 年 web 开发经验,现在是美团点评点餐团队的一员。

    知晓君
  • 使用 sroll-snap-type 优化滚动

    根据 CSS Scroll Snap Module Level 1 规范,CSS 新增了一批能够控制滚动的属性,让滚动能够在仅仅通过 CSS 的控制下,得到许多...

    Sb_Coco
  • 忍法,scroll 翻滚之术!

    但其实随着时间的推移, web api 以及 css 规范的不断改进,那些我们曾经认为实现起来很麻烦的功能也变得简单了起来。下面我们可以一起来探讨一下这些改进的...

    陈大鱼头
  • 小程序开发基础-scroll-view 可滚动视图区域

    查看官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/

    达达前端

扫码关注云+社区

领取腾讯云代金券