微信小程序学习(二)之scroll-view组件
2016-11-24 22:41
627 查看
一、效果
二、代码
<!--学习scroll-view组件--> <view class="title">学习scroll-view组件</view> <view class="student">2016/11/24 vsiryxm@qq.com</view> <view> <text>\n 1、使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height。 2、scroll-into-view意思是滚动到某一个ID元素顶部,类似锚点效果。 3、bindscrolltoupper表示滚动到顶部触发回调。 4、bindscrolltolower表示滚动到顶部触发回调。 5、bindscroll表示滚动时触发回调。 6、scroll-into-view比bindscroll优先级高。 \n\n</text> </view> <view class="section"> <view class="section__title">垂直滚动</view> <!--垂直滚动,这里必须设置高度--> <scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}"> <view id="green" class="scroll-view-item bc_green"></view> <view id="red" class="scroll-view-item bc_red"></view> <view id="yellow" class="scroll-view-item bc_yellow"></view> <view id="blue" class="scroll-view-item bc_blue"></view> </scroll-view> <view class="btn-area"><text>\n</text> <button size="mini" bindtap="tap">click me to scroll into view </button> <button size="mini" bindtap="tapMove">click me to scroll</button> </view> </view> <view class="section section_gap"><text>\n\n</text> <view class="section__title">水平滚动</view> <!--scroll-view_H这里必须强制在一行white-space:nowrap否则无法滚动--> <scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%;" bindscrolltoupper="upper2" bindscrolltolower="lower2" bindscroll="scroll" scroll-into-view="{{toView2}}" scroll-top="{{scrollTop2}}"> <view id="green2" class="scroll-view-item_H bc_green"></view> <view id="red2" class="scroll-view-item_H bc_red"></view> <view id="yellow2" class="scroll-view-item_H bc_yellow"></view> <view id="blue2" class="scroll-view-item_H bc_blue"></view> </scroll-view> </view> <text> \n\n\n\n\n </text> <!-- white-space样式属性 normal: 正常无变化(默认处理方式.文本自动处理换行.假如抵达容器边界内容会转到下一行) pre: 保持HTML源代码的空格与换行,等同与pre标签 nowrap: 强制文本在一行,除非遇到br换行标签 pre-wrap: 同pre属性,但是遇到超出容器范围的时候会自动换行 pre-line: 同pre属性,但是遇到连续空格会被看作一个空格 inherit: 继承 --> <!--参考:/u014360817/article/details/52658760-->
var order = ['red', 'yellow', 'blue', 'green', 'red'] Page({ data: { toView: 'red', scrollTop: 0 //移动步长 }, //滚动到顶部触发 upper: function(e) { console.log('滚到顶部了!') console.log(e) }, //滚动到左边沿触发 upper2: function(e) { console.log('滚到左边沿了!') console.log(e) }, //滚动到底部触发 lower: function(e) { console.log('滚到底部了!') console.log(e) }, //滚动到右边沿触发 lower2: function(e) { console.log('滚到右边沿了!') console.log(e) }, //滚动过程中触发 scroll: function(e) { console.log('我在滚动中!') console.log(e) }, //实现循环滚动 tap: function(e) { for (var i = 0; i < order.length; ++i) { if (order[i] === this.data.toView) { this.setData({ toView: order[i + 1] }) break } } }, //规定步长滚动 tapMove: function(e) { this.setData({ scrollTop: this.data.scrollTop + 10 }) } })
相关文章推荐
- 微信小程序顶部用 scroll-view 组件横向滚动,类似tab选项卡的效果,
- 解决微信小程序组件scroll-view中bindscrolltolower事件触发不了的问题
- 微信小程序 scroll-view组件
- 微信小程序scroll-view组件实现滚动动画
- 微信小程序 scroll-view组件实现列表页实例代码
- 微信小程序----组件之scroll-view
- 微信小程序学习(一)之view组件
- 微信小程序(九)scroll-view组件详细介绍
- 微信小程序----scroll-view组件(MUI索引列表)滚动动画
- 微信小程序把玩(九)scroll-view组件
- 微信小程序把玩(九)scroll-view组件
- 微信小程序学习---view-scroll的使用注意事项
- 微信小程序例子——如何使用scroll-view组件实现视图垂直滚动
- 【微信小程序】解决 竖向<scroll-view>组件 “竖向滚动页面出现遮挡”问题
- 微信小程序开发(5)-新闻页之滚动制作(scroll-view)组件的使用
- 微信小程序学习(六)之progress组件
- 微信小程序-scroll-view滚动到指定位置(一)
- 微信小程序学习(三)之swiper组件
- React Native 学习笔记(八)-- ScrollView & ListView组件
- 微信小程序学习(八)之checkbox组件