前言：

初期开发小程序的时候 我们可能遇到一个问题 一个scroll-view组件内的滑动与页面的滑动冲突 造成 scroll-view动画到边界后 页面才跟着滑动另外

有时可能遇到这样的需求 一个页面中有多处局部滑动 且 他们之间不能互相干扰 互相影响 而且大多数情况下 页面整体不能滑动

这时候我们通过文档 获取到的第一印象是使用scroll-view组件 或 使用swiper组件满足需求 而在实际的工程搭建上又会因为经验不足遇到许多坑

下面我们使用不同方法分别创建一个竖向的局部滑动区域

横向的参考竖向即可

多个滑动区域的使用三种方法创建对应组件

三种方法区别较大 需要根据实际场景选择

第一种方式 使用scroll-view方式创建一个滑动区域

我们创建一个长度为10的数组 在scroll-view内部

wxml：

wxss：

js：

注意

1.Page元素是该页面整体 类似于H5中的body 给其设置height:100%；变相屏蔽了页面的滑动事件

2.这里scroll-view组件除了设置scroll-y属性外 需要给list一个固定高度 才能生效

第二种方式 使用css属性 overflow-y:scroll

这里wxml和wxss稍作修改 其他的和上面相同

其实使用css属性只是模拟了scroll-view组件的效果 但毕竟scroll-view组件提供了许多其他的属性和方法可供开发者操作 例如监控组件的滑动等 如果使用css的话 只有局部区域的滑动效果而已

第三种方式 使用swiper组件实现竖向滑动

wxml

js

wxss：

这里还是比较复杂的，其中swiper组件需要设置vertical属性为true 另外margin-next指 swiper-item与后面子元素的距离 介于我们要设置swiper内尽可能显示全部的子元素 margin-next应设置为swiper高度 减 swiper-item的高度 计算方法如下 使用 wx.createSelectorQuery() 方法获取swiper和swiper-item元素的属性

预览图：

注意：

1.swiper的margin-next属性不支持 calc（）动态计算高 因此只能使用在页面渲染完成后 获取滑动区域总体的高 - 元素内容的高 setdata 来渲染

2.swiper无论如何滑动 都会最终停在某个元素的顶端/左端 而上面两种方式可以scrollTop值可以停留在任何地方

3.swiper滑动到最后几个元素的时候 下方/右方还会留下空白位置 而上面两种方式scrollTop滑动到最后几个元素 滑动条不再滑动 下面/右方没有空白位置

4.swiper组件有 bindanimationfinish 这个方法监控 滑动动画的结束事件 而scroll-view只能通过 bindtouchend 拿到滑动手势的结束事件

swiper的这种特性可以满足特殊场景下的需求 比如无论如何滑动区域后 自动对焦

5.经过测试 swiper组件 在渲染子元素变多的情况下 性能会远小于 scroll-view 以5000个子元素为例 swiper 在安卓/IOS手机上的渲染速度已经严重影响用户体验 而scroll-view组件渲染可以在2秒内完成 并且实现滑动 因此在渲染数量在极限状态下 推荐使用scroll-view

6.如果想使用 scroll-view 模拟swiper的效果 可以使用 遮罩浮层盖住scroll-view主体 + 监听scroll-into-view事件 的方法达到效果 不过如果快速滑动 会造成高频使用 setdata 触发 scroll-into-view 事件造成页面撕裂

不同高度设备的适配:

但进一步想 现在设备五花八门 不同设备的宽高是不一样的 比如新出的安卓手机和iphone x/10/12屏幕都比较长,需要我们对滑动区域父元素进行高的计算 需要 height:calc()/width:calc() 和 createSelectorQuery 动态计算,一个页面顶部有一处固定广告 下面的区域是滑动区域 那么滑动区域的高为 height:calc(100% - 300rpx)

相关代码如下 另附一个可以多处区域滑动的页面

https://developers.weixin.qq.com/s/jgK6DNmR77hJ

作者：陶路

其他相关阅读：

1.swiper组件

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

2..scroll-view组件

https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

3.动态获取页面元素方法 wx.createSelectorQuery

https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createSelectorQuery.html