前言：
我们在早期打开好友程序的时候可能会遇到一个问题。 Scroll-View组件中的滑动与页面的滑动发生冲突，导致Scroll-View动画到达边界后页面跟随滑动。
有时你可能会遇到这样的需求，一个页面中有多个局部幻灯片，并且它们之间不能互相干扰，大多数情况下页面整体无法滑动
这时候我们通过文档得到的第一印象是使用scroll-view组件或者swiper组件就可以满足需求，但是在实际的项目建设中，我们会因为缺乏经验而遇到很多坑。
下面我们使用不同的方法来创建垂直局部滑动区域
垂直参考是垂直的
使用多个滑动区域通过三种方式创建相应的组件
三种方式差别较大，需要根据实际场景进行选择
第一种方法使用scroll-view方法创建滑动区域
我们在滚动视图中创建一个宽度为 10 的链表
wxml：
wxss:
js:
注意
1、Page元素是页面整体类似于H5中的body，设置height:100%； 它变相保护页面免受滑动风暴的影响
2、这里scroll-view组件不仅需要设置scroll-y属性，还需要给列表一个固定的高度才能生效
第二种方法使用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 height 减去 swiper-item 的高度估计如下使用 wx.createSelectorQuery() 方法获取 swiper 和 swiper-item 元素的属性
预览：
注意：
1、swiper的margin-next属性不支持calc()动态估算高度，所以只能在页面渲染完成后使用setdata获取滑动区域的整体高度来渲染--滑动区域的高度元素含量
2.无论swiper如何滑动局部css，最终都会停在某个元素的top/top处，而前面两种方法可以scrollTop值可以停留在任何地方
3.当swiper滑动到最后几个元素时，底部/右侧会有空白，而前两种形式中的scrollTop滑动到最后几个元素，滑块就不再滑动到底部/正确的。
4、swiper组件有bindanimationfinish方法来监听滑动动画结束，而scroll-view只能通过bindtouchend获取滑动手势结束
swiper的这些特性可以满足特殊场景的需求，比如无论怎样滑动区域后手动缩放
5、经过测试，当渲染的子元素较多时，swiper组件的性能会比scroll-view大很多。 以5000个子元素为例，Android/IOS手机上swiper的渲染速率已经严重影响用户体验，而scroll-view组件渲染可以在2秒内完成并实现滑动，因此推荐使用渲染数量有限时的scroll-view
6、如果想用scroll-view来模拟swiper的疗效，可以用笔画浮层覆盖scroll-view的主体+窃听scroll-into-view风暴来达到疗效。 但如果滑动速度过快，会导致高频使用setdata触发scroll-in-view骚乱导致页面撕裂
适应不同高度的设备：
但进一步思考如今的设备种类繁多，不同设备的宽度和高度是不同的局部css，比如新的Android手机和iphonex/10/12屏幕都比较长，我们需要估算出父元素的列宽滑动区域需要 height:calc() /width:calc() 和 createSelectorQuery 动态估计，页面底部有固定广告，固定广告下方的区域就是滑动区域，所以滑动的高度面积为高度：calc(100%-300rpx)
相关代码如下，附上可以多区域滑动的页面
发表评论