微信小程序：将swiper用于页面切换

swiper一般用于轮播，当为了页面更动感而用于页面切换时（可参考腾讯视频首页），就会遇到不少问题

image.png

菜单问题

既然是页面切换，就需要有页面联动效果，左右滑动屏幕时，菜单上也有相应的字体颜色变化。
这时，菜单部分是无法使用for循环遍历来生成的（因为一个页面是一个swiper-item，无法循环生成），只能生硬的按需求添加多个view生成菜单，每个菜单给上data-id，class根据id切换变更，并bindtap一个切换代码，大致如下

  <view class="container-menu">
    <view class="container-menu-box{{currentTab=='0' ? '-selected' : ''}}" bindtap="switchNav" data-id="0">A</view>
    <view class="container-menu-box{{currentTab=='1' ? '-selected' : ''}}" bindtap="switchNav" data-id="1">B</view>
    <view class="container-menu-box{{currentTab=='2' ? '-selected' : ''}}" bindtap="switchNav" data-id="2">C</view>
    <view class="container-menu-box{{currentTab=='3' ? '-selected' : ''}}" bindtap="switchNav" data-id="3">D</view>
  </view>

  switchNav: function (e) {
    var that = this, currentTab = e.currentTarget.dataset.id;
    if (this.data.currentTab == currentTab) {
      return false;
    } else {
      that.setData({
        currentTab: currentTab,
      })
    }
  },

  swiperChange: function (e) {
    this.setData({
      currentTab: e.detail.current,
    })
  },

swiper-item页面滚动问题

由于swiper本身必须添加固定高度（可以使用position:fixed + height:100%，或者是固定的高度值），会导致swiper-item中无法正常使用scroll-view进行上下滚动操作。

<swiper class="page-bd" current="{{currentTab}}" duration="200" bindchange="swiperChange">

.page-bd{
  position: fixed;
  width: 100%;
  height: 100%;
  font-size: 24rpx;
}

这时需要对swiper-item中的scroll-view进行以下配置：

scroll-view必须设置高度

.container{
  position: relative;
  top: 90rpx;      //自定义：空开菜单部分
  height: 92%;   //自定义：空开底部tarbar
  display: flex;
  flex-direction: column;
}

scroll-view必须设置scroll-y="true"（不能默认，必须设置scroll-y）

解决方法其实挺简单，但却困扰了我至少2天，还使用了各种绕圈的方法，比如识别屏幕高度，动态计算之类的，太坑了
特此记录此问题

最后编辑于：2020.05.09 14:16:34