小程序左右滑动切换页面

一、左右页面滑动切换的实现

1、页面实现左右滑动切换的效果，小程序提供了swiper标签来实现，swiper标签中current属性可以指定tab表示当前的滑块，current属性值动态改变，以此实现左右滑动切换的效果，如下图所示

这是swiper标签的官方文档https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

2、swiper中有一个swiper-item标签用来设置swiper中tab相对应页面的内容，并且swiper中只可以放置swiper-item组件，如下图，详细文档见上面swiper官方文档链接

3、swiper-item的高度自动设置100%，也就是父元素的高度，但是我们风声小程序中风声列表要上拉加载，高度未知，高度其实是由子元素决定的，也就是说swiper的高度是由子元素swiper-item决定的，相互矛盾，无法获取高度，该方案不可行

swiper适合固定高度的左右滑动，比如轮播图

4、左右滑动切换的效果不用swiper，用css3中transform属性或许可以实现左右滑动的效果，但是会很麻烦

二、比较其它小程序中关于左右滑动切换与列表加载

1、观察比较找到了两个功能相似的小程序，一个是今日头条，一个是知乎热榜

2、其中知乎热榜中热榜和为你推荐有左右滑动切换的效果，也有搜索框，与风声小程序不同的是热榜与为你推荐两个tab是不滚动的，搜索框及tab中的内容滚动

3、今日头条与知乎类似，tab不滚动，tab内容区滚动

三、tab不滚动，tab内容区滚动的实现方法

1、左右滑动切换的交互依然使用swiper，其中也依然用swiper-item来实现滑动切换，但是页面不滚动，所以知道swiper的高度，就是tab以下区域的屏幕高度，然后在swiper-item中使用scroll-view标签

如上图所示，scroll-view标签中scroll-y属性可以设置纵向滚动，以此实现上拉加载效果，具体scroll-view的官方文档链接如下，这个方法比css3动画实现简单很多

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