又偷师了，一个可以滑动的顶部Navi Tab

2017-09-27 本文已影响68人黄秀杰

源自weui-wxss这个官方开源项目，实现类型Android下的ViewPager左右滑动页面

github地址

全局方法获取windowWidth

获取设备屏幕尺寸getSystemInfo方法，我放到了app.js中，方便复用

App({
  onLaunch: function () {
    // 设备信息
    wx.getSystemInfo({
      success: (res) => {
        this.screenWidth = res.windowWidth;
        this.screenHeight = res.windowHeight;
        this.pixelRatio = res.pixelRatio;
      }
    });
})

改进了2个样式

1、注释了.weui-tab__panel样式的一个属性

    /*导致不到响应onReachBottom，因此注释之*/
    /*overflow: auto;*/
}

2、增加.weui-navbar的一个背景色属性

.weui-navbar {
  /*因为页面向上滚动超过navi时会穿透*/
  background: white;
}

navi-tab-init.gif

改造成可左右滑动的效果

通过swiper来改造它，控制它的currrent属性即可，关于scroll-view的用法可以参见https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html

<swiper>
    <swiper-item wx:for="[0, 1, 2, 3]">
        <view class="weui-tab__content">选项{{index}}的内容</view>
    </swiper-item>
</swiper>

当下的效果如下：

navi-tab-swiper.gif

实现导航与内容区双向联动

第一部分，点击顶部Tab，内容区切换页面，

得益于双向数据绑定的特性，通过一个current属性就可以搞定，<swiper current="{{activeIndex}}">

第二部分，内容区切换，使得顶部高亮变化

通过<swiper>的bindchange事件监听实现

currentChanged: function (e) {
    this.setData({
      sliderOffset: getApp().screenWidth / this.data.tabs.length * e.detail.current,
      activeIndex: e.detail.current
    });
  }