微信小程序示例 - 视图容器
滑块视图容器 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;更多排列方式可以参考源码
源码下载
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2016-10-06，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读