微信小程序开发之选项卡tab(swiper)滑动切换功能实现

该功能实现依赖于 微信小程序 模板容器 swiper，及其提供的属性方法；具体实现如下：

上代码

index.wxml

    
    
        
            
                
                    精选
                
                
                    订阅
                
            
            
                
                    
                        
                            
                                
                                    
                                        
                                            
                                                
                                            
                                        
                                    
                                
                                
                                    
                                        
                                            
                                                
                                                    来吧-{{item}}
                                                
                                            
                                        
                                    
                                
                            
                        
                    
                    
                        
                           
                                
                                    
                                        
                                            
                                                来吧-{{item}}-{{item}}
                                            
                                        
                                    
                                
                            
                        
                    
                
            
        
    

index.wxss

/* pages/index/index.wxss */
.layout-content {
    width: 100%;
    height: 100%;
}

/* tab */
.layout-tab {
    position: relative;
    height: 100%;
}

.layout-tab-title {
    display: flex;
    box-sizing: border-box;
    flex-direction: row;
    justify-content: center;
    height: 8%;
    align-items: center;
    background-color: rgb(12, 128, 163);
}

.tab-title {
    color: #FFF;
    margin:0 20rpx;
    height: 70%;
    display: flex;
    align-items: center;
    font-size: 16px;
}

.select {
    font-weight: 700;
    border-bottom: 3px solid #FFF;
    height: 65%;
    margin-top: 6rpx;
}

/* swiperTab */
.layout-tab-swiper {
    height: 92%;
    position: relative;
    box-sizing: border-box;
}

.layout-tab-swiper swiper {
    height: 100%;
}

.layout-tab-lists {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* swiperImage */
.layout-image-swiper {
    height: 30%;
}

.layout-image-swiper swiper image {
    width: 100%;
    height: 100%;
}

/* lists */
.layout-lists {
    height: 100%;
    box-sizing:border-box;
    padding:2% 4%;
}

.layout-lists .lists-content {
    height: 100rpx;
}

.carefully-selected-content {
    height: 70%;
}

index.js

// pages/index/index.js
import ImageBannerLists from '../../assets/test-data/index/ImageBannerLists';

Page({

  /**
   * 页面的初始数据
   */
  data: {
    imageBannerLists: {},
    blogLists: [],
    indicatorDotsImg: true,
    autoplayImg: true,
    intervalImg: 5000,
    durationImg: 300,
    isSelect: 0,
  },
  imageBanner: new ImageBannerLists(),
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let myArray = [], length = 20;
    for(let i = 0; i < length; i++) {
      myArray[i] = i + 1;
    }
    console.log(myArray);

    this.setData({
      imageBannerLists: this.imageBanner.imageBanner,
      blogLists: myArray
    });
  },
  /**
   * 监听
   */
  changeTab: function(e){
      let isSelect = e.currentTarget.dataset.type;
      this.setData({
        isSelect: isSelect
      })
  },
  swiperChange: function(e) {
    console.log(e);
    this.setData({
      isSelect: e.detail.current
    })
  },
  pushPersonCenter: function() {
    wx.navigateTo({
      url: '../person-center/index'
    })
  }
})

app.wxss

/**app.wxss**/
@import "assets/plugins/weui.wxss";

page {
    background-color: #FFF;
    height: 100%;  
    position: relative;
}

.page {
    height: 100%;
    flex: 1;
    background-color: #FFF;
    font-size: 32rpx;
    font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
    overflow-x: hidden;
}

.layout-header {
    background-color: #333;
    display: flex;
    box-sizing: border-box;
}

那几张轮播图随便你喜欢什么放什么（我这里是放在了一个 静态类里面）

import ImageBannerLists from '../../assets/test-data/index/ImageBannerLists';

以上，就是全部代码，轻松实现！