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

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

github地址

https://github.com/Tencent/weui-wxss

全局方法获取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_第1张图片
navi-tab-init.gif

改造成可左右滑动的效果

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


    
        选项{{index}}的内容
    

当下的效果如下:

又偷师了,一个可以滑动的顶部Navi Tab_第2张图片
navi-tab-swiper.gif

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

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

得益于双向数据绑定的特性,通过一个current属性就可以搞定,

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

通过的bindchange事件监听实现

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

最终实现的效果

又偷师了,一个可以滑动的顶部Navi Tab_第3张图片
navi-tab-done.gif

源码下载

http://git.oschina.net/dotton/demo-wx

又偷师了,一个可以滑动的顶部Navi Tab_第4张图片
pay
又偷师了,一个可以滑动的顶部Navi Tab_第5张图片
mp

你可能感兴趣的:(又偷师了,一个可以滑动的顶部Navi Tab)