小程序04 scroll-view组件

原生环境中使用

scroll-view组件用来提供可滚动视图区域

属性：

• scroll-x：Bollean，允许横向滚动
• scroll-y：Bollean， 允许纵向滚动
• upeer-threshlod：number，距顶部/左边多远时（单位px），触发scrolltoupper事件
• lower-threshold：Number，距底部/右边多远时（单位px），触发scrolltolower事件

其他属性见文档。

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

官方提示：

1. 请勿在scroll-view中使用textarea、map、canvas、video组件
2. scroll-into-view的优先级高于scroll-top
3. 在滚动scroll-view时会阻止页面回弹，所以在scroll-view中滚动，是无法触发onPullDownRefresh
4. 若要使用下拉刷新，请使用页面的滚动，而不是scroll-view，这样也能通过点击顶部状态栏回到页面顶部

mpVue中使用

在mpVue中使用横向滚动时，需要对<scroll-view/>额外进行样式的设定：

<scroll-view class='scroll-view' scroll-x="true">
  <div class="view-div" v-for="item in items">{{item}}</div>
</scroll-view>

style部分：

.scroll-view {
  text-align: left;
  white-space: nowrap;
  overflow-x: scroll;
}
.view-div {
  display: inline-block;
  background: green;
  padding: 20rpx 50rpx;
  border: 1rpx solid #fff;
}

参考

• https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
• https://blog.csdn.net/xiaochun365/article/details/71213912