微信小程序中scroll-view怎么用

这篇文章主要为大家展示了“微信小程序中scroll-view怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“微信小程序中scroll-view怎么用”这篇文章吧。

scroll-view

可滚动视图区域。

使用竖向滚动时，需要给<scroll-view/>一个固定高度，通过 WXSS 设置 height。

示例代码：

<view class="section">  <view class="section__title">vertical scroll</view>  <scroll-view scroll-y 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"><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">  <view class="section__title">horizontal scroll</view>  <scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%"><view id="green" class="scroll-view-item_H bc_green"></view><view id="red"  class="scroll-view-item_H bc_red"></view><view id="yellow" class="scroll-view-item_H bc_yellow"></view><view id="blue" class="scroll-view-item_H bc_blue"></view>  </scroll-view></view>

var order = ['red', 'yellow', 'blue', 'green', 'red']Page({  data: {    toView: 'red',    scrollTop: 100  },  upper: function(e) {console.log(e)  },  lower: function(e) {console.log(e)  },  scroll: function(e) {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})  }})

Bug & Tip

1. tip: 请勿在scroll-view中使用textarea、map、canvas、video组件

2. tip: scroll-into-view的优先级高于scroll-top

3. tip: 在滚动scroll-view时会阻止页面回弹，所以在scroll-view中滚动，是无法触发onPullDownRefresh

4. tip: 若要使用下拉刷新，请使用页面的滚动，而不是scroll-view，这样也能通过点击顶部状态栏回到页面顶部

以上是“微信小程序中scroll-view怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网精选频道！