微信小程序 wxml组件开发（一） scroll-view

 

      微信小程序是一款基于微信平台生态具有特色的APP，集中wxml(html),wxss(css),js(javascript),json(json)于一体的前端开发工具，主要开发空间是前端组件和功能，后端数据库一般采用对外对接的方式进行传参。前端通过调用和传递参数进行动态交互数据，再通过JS进行一定的处理和分析后传递给前端进行展示。

      这次，我们来主要介绍微信小程序的可滚动视图区域功能组件——scroll-view

      首先，我们来看看scroll-view的基本参数：

属性名	类型	默认值	说明
scroll-x	Boolean	false	允许横向滚动
scroll-y	Boolean	false	允许纵向滚动
upper-threshold	Number	50	距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-threshold	Number	50	距底部/右边多远时（单位px），触发 scrolltolower 事件
scroll-top	Number		设置竖向滚动条位置
scroll-left	Number		设置横向滚动条位置
scroll-into-view	String		值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-with-animation	Boolean	false	在设置滚动条位置时使用动画过渡
enable-back-to-top	Boolean	false	iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向
bindscrolltoupper	EventHandle		滚动到顶部/左边，会触发 scrolltoupper 事件
bindscrolltolower	EventHandle		滚动到底部/右边，会触发 scrolltolower 事件
bindscroll	EventHandle		滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

 

注：以上摘抄自https://www.w3cschool.cn/weixinapp/weixinapp-scroll-view.html的基本参数

scroll-view有很多种参数和功能，我们接下来主要介绍scroll-x和scroll-y两种功能，即是x轴和y轴转动的方式

纵向转动

<!--垂直滚动，这里必须设置高度-->
<scroll-view scroll-y="true"  style="height: 800px">
   <view style="background: #000000; width: 200px; height: 200px" ></view>
   <view style="background: #ffffff; width: 200px; height: 200px"></view>
   <view style="background: green; width: 200px; height: 200px"></view>
</scroll-view>

横向转动

<scroll-view scroll-x="true" style="padding: 0 20rpx;white-space: nowrap;box-sizing: border-box;">
  <block wx:for="{{4}}" wx:key="{{index}}">
    <view style=" display: inline-block;margin-right: 20rpx;width: calc(100% / 3);height: 100rpx;background: #ff00ff;"></view>
  </block>
</scroll-view>