微信小程序---tab选项卡组件

微信小程序—tab选项卡组件

在components组件中新建tab文件夹。（组件可自定义样式）

components/Tab/tab.wxml

<scroll-view scroll-x="true" class="scroll-view-x" wx:if="{{!ttype || ttype==2}}">
  <view class="scroll-view-item" wx:for="{{tList}}" wx:key="*this">
    
    <view style="{{currentTab==(index) ?styleActive:styleOld}}" bindtap="_swichNav" data-current="{{index}}">{{ !tname ? item.name : item[tname].name }}view>
  view>
scroll-view>

<slot>
slot>

** components/Tab/tab.js**

// components/Tab/tab.js
//组件的对外属性，是属性名到属性设置的映射表，属性设置中可包含三个字段， type 表示属性类型、 value 表示属性初始值、 observer 表示属性值被更改时的响应函数
Component({
  properties: {
    //标题列表
    tList: {
      type: Array,
      value: []
    },
    //当前tab index
    currentTab: {
      type: Number,
      value: 0,
      observer: function (newVal, oldVal) {
        this.setData({
          currentTab: newVal
        })
      }
    },
    styleActive: {//选中激活的样式
      type: String,
      value: 'color:#603F25;border-bottom: 5rpx solid #603F25;',
    },
    styleOld: {//默认的样式
      type: String,
      value: 'color:#BCA796;',
    },
  },
  //组件的方法，包括事件响应函数和任意的自定义方法，关于事件响应函数的使用
  methods: {
    // 内部方法建议以下划线开头
    _swichNav: function (e) {
      //自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项
      this.triggerEvent('changeCurrent', {
        currentNum: e.currentTarget.dataset.current
      })
    }
  }
})

tab.css

.scroll-view-x{
  white-space: nowrap;
  z-index:10;
  font-size: 32rpx;
 }
 .scroll-view-x .scroll-view-item{
  display:inline-block;
  margin:0 35rpx;
  line-height: 33px;
  cursor: pointer;
 }
 .on{
 
 }

在pages文件中引用
html中

<view class="boxBig bgz bgt" style="height: {{screenHeight}}px;">
  <view class="wid100 paddL20 paddR20 boxSing">
    <slideTab tList="{{statusType}}" bind:changeCurrent="swichNav" currentTab="{{currentType}}">
      <swiper current="{{currentType}}" duration="300" bindchange="bindChange" style="height: {{screenHeight-35}}px;margin-top:35px;">
        <block>
        
          <swiper-item  wx:for="{{listInfo}}" wx:key="index" >
           
            <view class="hetd bgSet marB30 flexz paddB40 paddT40 paddL30 paddR30 boxSing" style="background-image: url('{{imgz1}}');"  wx:for="{{item}}" wx:key="childIndex" wx:for-item="childItem">
              <image class="img200 boRadius20 marL30" src="{{childItem.img}}" mode="aspectFill">image>
              <view class="wid60 marL20 lineHei40 mar">
                <view class="fontz28 fontWeightB">{{childItem.title}}view>
                <view class="fontz24 color7D644D  ellipsis2">{{childItem.desc}}view>
                <view class="flexz">
                  <view class="fontz32 color6A3906 fontWeightB wid60 marT10">￥99view>
                  <view class="anniusm" bindtap="goDet" data-id="{{item.id}}" bindtap="goDet">详情view>
                view>
              view>
            view>
          swiper-item>
        block>
      swiper>
    slideTab>
  view>
view>

js文件

data: { 
    statusType: [
      { name: "全部", page: 0 },
      { name: "待发货", page: 0 },
      { name: "待收货", page: 0 },
      { name: "已完成", page: 0 }
    ],
    currentType: 0,
    listInfo: [[{ id: 1, img: '/images/img.png', title: '蓝鳍：Blue Fin 美式海鲜纽约海港西餐厅', desc: '内容简介内容简介内容简介内容简介内容简介内容简介' }, { id: 1, img: '/images/img.png', title: '蓝鳍：Blue Fin 美式海鲜纽约海港西餐厅', desc: '内容简介内容简介内容简介内容简介内容简介内容简介' }],
    [{ id: 1, img: '/images/img.png', title: '蓝鳍：Blue Fin 美式海鲜纽约海港西餐厅', desc: '内容简介内容简介内容简介内容简介内容简介内容简介' }, { id: 1, img: '/images/img.png', title: '蓝鳍：Blue Fin 美式海鲜纽约海港西餐厅', desc: '内容简介内容简介内容简介内容简介内容简介内容简介' }], [], [], []], 

  },
  // 点击tab切换 
  swichNav: function (res) {
    if (this.data.currentType == res.detail.currentNum) return;
    this.setData({
      currentType: res.detail.currentNum
    })
  },
  bindChange: function (e) {
    this.setData({
      currentType: e.detail.current
    })
    if (!this.data.list[e.detail.current].length)
      this.getList();
  },