微信小程序开发（十四）小程序滑动组件scroll-view

之前我们学习了小程序的基础组件swiper，今天我们就来学习另外一个基础组件scroll-view，小程序给scroll-view的定义是可滚动的视图区域，言下之意就是给定一个固定区域，当显示的内容超出该区域的时候，滑动可以显示超出部分的内容。

属性

这里提几个比较重要的属性：

1. scroll-x boolean类型，设置scroll-view是否可以允许横向滑动，默认值false
2. scroll-y boolean类型，设置scroll-view是否可以允许纵向滑动，默认值false
3. upper-threshold 设置距顶部/左边多远时，触发 scrolltoupper 事件，默认值50
4. lower-threshold 设置距底部/右边多远时，触发 scrolltolower 事件，默认值50
5. bindscrolltolower 滑动触发事件，滚动到底部/右边时触发
6. bindscrolltoupper 滑动触发事件，滚动到顶部/左边时触发
7. scroll-into-view string类型，指定滑动到某一个子元素，这里要注意，id不能以数字开头。

再来看看官网的属性介绍：

更多的属性就需要到小程序组件scroll-view官网进行了解了。

代码演示

老样子介绍过相关属性之后，通过代码来进行演示。

1.首先我们要在.js文件的data中添加我们的数据源：

data: {
  imgs:['../../images/code-cloud-callback-config.png',
  '../../images/code-db-inc-dec.png',
  '../../images/code-db-onAdd.png']
},

2.在.wxml文件中注册我们的scroll-view组件，并设置滑动方向为横向滑动：

<!--miniprogram/pages/index/index.wxml-->
<text>小程序滑动组件</text>

<!--
  scroll-x  设置横向滚动
-->
<scroll-view scroll-x="true" > 
  <block wx:for="{{imgs}}">
    <image src="{{item}}"></image>
  </block>
</scroll-view>

3.来看效果，这里可以发现我们设置了scroll-x为true之后，我们的布局依然是纵向的：

4.添加样式，让布局变成横向布局：

<!--miniprogram/pages/index/index.wxml-->
<text>小程序滑动组件</text>

<!--
  scroll-x  设置横向滚动
  style 添加样式，让布局变成横向布局
-->
<scroll-view scroll-x="true" style="display:flex;white-space:nowrap;"> 
  <block wx:for="{{imgs}}">
    <image src="{{item}}"></image>
  </block>
</scroll-view>

5.再来看效果，可以看到布局就变成了横向布局，并且可以进行滑动

到这里简单的横向滑动就实现了。

6.纵向滑动，我们知道横向滑动是设置scroll-x为true，那么纵向的时候就设置scroll-y为true，同时注意官网给出的提示：设置竖向滚动时，需要给scroll-view一个固定高度才能生效

<scroll-view scroll-y="true" style="height:200px;"> 
  <block wx:for="{{imgs}}">
    <image src="{{item}}"></image>
  </block>
</scroll-view>

7.效果图

代码很简单，大家可以自行尝试一下。

8.添加滑动监听：

<scroll-view scroll-y="true" style="height:200px;" bindscrolltoupper="upperFunction" bindscrolltolower="lowerFunction"> 
  <block wx:for="{{imgs}}">
    <image src="{{item}}"></image>
  </block>
</scroll-view>

9.实现监听方法并输出控制台

upperFunction:function(e){
    console.log('已到达顶部');
},
lowerFunction:function(e){
    console.log('已到达底部');
},

10.效果图：

可以看到控制台，当我们滑动到顶部和底部的时候都会调用相关方法，输出对应日志到控制台。

这就是scroll-view的简单实用了，更多使用方法可以查阅小程序官方文档。