image.png

    Tabs组件：

    1. <slot/>
    2. <scroll-view class="scroll-view-x" scroll-x >
    3.   <view class="scroll-view-item" wx:for="{{tabList}}" wx:key="name">
    4.     <view class="{{currentTab === index ? 'on' : ''}}" bind:tap="_switchTab" data-current="{{item.page}}">{{item.name}}</view>
    5.   </view>
    6. </scroll-view>
    1. // components/tabs/tabs.js
    2. Component({
    3.   /**
    4.    * 组件的属性列表
    5.    */
    6.   properties: {
    7.     tabList: {
    8.       type: Array,
    9.       value: []
    10.     },
    11.     currentTab: {
    12.       type: Number,
    13.       value: 0,
    14.       observer: function(newVal, oldValue, data){
    15.         // 该方法当此数据被setData的时候被调用
    16.         console.log(newVal, oldValue, data);
    17.       }
    18.     }
    19.   },
    21.   /**
    22.    * 组件的初始数据
    23.    */
    24.   data: {
    26.   },
    28.   /**
    29.    * 组件的方法列表
    30.    */
    31.   methods: {
    32.     _switchTab: function(e){
    33.       console.log("_switchTab",e);
    34.       this.triggerEvent("changeTab", {
    35.         currentNum: e.currentTarget.dataset.current
    36.       });
    37.     }
    38.   }
    39. })
    1. .scroll-view-x {
    2.   background-color: #fff;
    3.   white-space: nowrap;
    4.   /* position: fixed; */
    5.   z-index: 10;
    6.   top: 0px;
    7. }
    9. .scroll-view-x .scroll-view-item {
    10.   display: inline-block;
    11.   margin: 0 35rpx;
    12.   line-height: 33px;
    13.   cursor: pointer;
    14. }
    16. .on{
    17.   border-bottom: 2px solid red;
    18.   color: red;
    19. }
    1. {
    2.   "component": true,
    3.   "usingComponents": {}
    4. }

    在页面中使用：

    1. <tabs currentTab="{{currentTab}}" tabList="{{statusType}}" bind:changeTab="switchTab">
    2.   <swiper current="{{currentTab}}" duration="300" bindchange="bindChange" style="height:{{windowHeight-35}}px;">
    3.     <swiper-item wx:for="{{list}}" wx:key="*this">
    4.       <view>{{item}}</view>
    5.     </swiper-item>
    6.   </swiper>
    7. </tabs>
    1. // pages/componentPage/componentPage.js
    2. Page({
    4.   /**
    5.    * 页面的初始数据
    6.    */
    7.   data: {
    8.     statusType: [
    9.       {
    10.         name: "待付款",
    11.         page: 0
    12.       },
    13.       {
    14.         name: "待发货",
    15.         page: 1
    16.       },
    17.       {
    18.         name: "待收货",
    19.         page: 2
    20.       },
    21.       {
    22.         name: "待评价",
    23.         page: 3
    24.       },
    25.       {
    26.         name: "已完成",
    27.         page: 4
    28.       }
    29.     ],
    30.     currentTab: 0,
    31.     list: ["page1", "Page2", "Page3", "Page4", "Page5"],
    32.     windowHeight: ''
    33.   },
    35.   /**
    36.    * 生命周期函数--监听页面加载
    37.    */
    38.   onLoad: function (options) {
    39.     this.setData({
    40.       windowHeight: wx.getSystemInfoSync().windowHeight
    41.     });
    42.   },
    44.   switchTab: function(event){
    45.     console.log("page",event.detail.currentNum);
    46.     if (this.data.currentTab === event.detail.currentNum) {
    47.       return;
    48.     }
    50.     this.setData({
    51.       currentTab: event.detail.currentNum
    52.     });
    53.   },
    55.   bindChange: function(event){
    56.     this.setData({
    57.       currentTab: event.detail.current
    58.     });
    59.   },
    61.   /**
    62.    * 生命周期函数--监听页面初次渲染完成
    63.    */
    64.   onReady: function () {
    66.   },
    68.   /**
    69.    * 生命周期函数--监听页面显示
    70.    */
    71.   onShow: function () {
    73.   },
    75.   /**
    76.    * 生命周期函数--监听页面隐藏
    77.    */
    78.   onHide: function () {
    80.   },
    82.   /**
    83.    * 生命周期函数--监听页面卸载
    84.    */
    85.   onUnload: function () {
    87.   },
    89.   /**
    90.    * 页面相关事件处理函数--监听用户下拉动作
    91.    */
    92.   onPullDownRefresh: function () {
    94.   },
    96.   /**
    97.    * 页面上拉触底事件的处理函数
    98.    */
    99.   onReachBottom: function () {
    101.   },
    103.   /**
    104.    * 用户点击右上角分享
    105.    */
    106.   onShareAppMessage: function () {
    108.   }
    109. })
    1. {
    2.   "usingComponents": { "tabs": "/components/tabs/tabs"}
    3. }