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

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

scroll-view

可滚动视图区域。

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

示例代码：

  vertical scroll
  
  

  click me to scroll into view click me to scroll
  
  horizontal scroll
  
  

var order = [&＃39;red&＃39;, &＃39;yellow&＃39;, &＃39;blue&＃39;, &＃39;green&＃39;, &＃39;red&＃39;]
Page({
  data: {
    toView: &＃39;red&＃39;,
    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怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程笔记行业资讯频道！