微信小程序_(视图)简单的scroll-view容器

微信小程序_(视图)简单的scroll-view容器

滑动滚动条，下方文本会显示滚动条的状态(到达最上方/滚动中/到达最下方)，控制台输出滚动条状态

程序结构

实现过程

添加滚动容器属性

scroll-view 容器style="height:200px;" 设置容器高度scroll-y="true" 设置容器为纵向bindscrolltoupper="upper" 滚动到顶部/左边，会触发 scrolltoupper 事件bindscrolltolower="lower" 滚动到底部/右边，会触发 scrolltolower 事件bindscroll="sroll" 滚动时触发，会触发sroll事件

添加视图进入可滚动区域

添加绑定滚动条滚动时的事件

upper: function(event) { this.setData({ texts: "滚动条到 最上方 了"}); }, lower: function(event) { this.setData({ texts: "滚动条到 最下方 了" }); }, sroll: function(event) { this.setData({ texts: "滚动条 滚动 了" }); console.log("我在滚动"); console.log(event); },

左右方向滚动条改变为上下方向方向滚动条只需要改变scroll-x/scroll-y属性

.bc_green{ background-color: green;}.bc_red{ background-color: red;}.bc_yellow{ background-color: yellow;}.bc_blue{ background-color: blue;}

实现过程

设置滚动条要滚动到的View视图

tap: function(e) { for (var i = 0; i < order.length; ++i) { if (order[i] === this.data.toView) { this.setData({ toView: order[i + 1] }) break } } },

改变滚动条位置，显示出不同View视图

tapMove: function (e) { this.setData({ scrollTop: this.data.scrollTop + 10 }) }

scroll-top Number 设置竖向滚动条位置scroll-left Number 设置横向滚动条位置

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。