兩種方式實現(xiàn)tab切換效果,但凡以后遇到類似的需求,都可以實現(xiàn)(本文重點)

實例效果

具體實現(xiàn)代碼

微信 wxml 代碼

<view>
  <view class="tab-container">
    <view
      class="default {{type=='expend'? 'expend-active':''}}"
      bindtap="handleType"
      data-type="expend"
      >支出view
    >
    <view
      class="default {{type=='earning'? 'earning-active': ''}}"
      bindtap="handleType"
      data-type="earning"
      >收入view
    >
    <view
      class="default {{type=='transaccount'?'transaccount-active': ''}}"
      bindtap="handleType"
      data-type="transaccount"
      >轉(zhuǎn)賬view
    >
  view>
view>

微信wxss代碼

/* pages/tablistchange/tablistchange.wxss */
.tab-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10rpx 0;
}

.tab-container .default {
  margin-right: 25rpx;
  padding: 5rpx 15rpx;
}

.expend-active {
  color: #0ca168;
  border-bottom: 2px solid #0ca168;
}

.earning-active {
  color: #ff6b6a;
  border-bottom: 2px solid #ff6b6a;
}

.transaccount-active {
  color: #abcdef;
  border-bottom: 2px solid #abcdef;
}

切換邏輯js代碼

Page({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    type: 'expend',
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function(options) {},

  handleType(event) {
    const type = event.currentTarget.dataset.type;
    this.setData({
      type: type,
    });
  },
});

實例效果如下所示:

分析

實現(xiàn)tab切換,主要是給切換元素綁定事件(bindtap)函數(shù),然后在切換元素上設(shè)置data-xxx=''屬性,綁定的事件對象會攜帶額外的信息,例如:dataset等,可以在事件對象中拿到在切換元素上設(shè)置不同的data屬性值,在切換過程中,重新設(shè)置setData的值

在實現(xiàn)切換時,主要是切換class,在wxml中,根據(jù)type動態(tài)值,插值表達(dá)式,最終決定加載哪個激活狀態(tài)的樣式

這種固定的tab切換效果顯然是可以實現(xiàn)的,但問題來了,如果是多個呢,不固定的呢?

實現(xiàn)不固定動態(tài)的 tab 切換

如下示例效果

如下是wxml

class="encourage-content">
  <view class="encorage-title">{{accountlist.encourtitle}}view>
  <view class="encourage-list">
    <block wx:for="{{listData}}" wx:key="*this">
      <view
        data-item="{{item}}"
        class="list-item {{item.account == accountlist.account ? 'list-active': ''}}"
        bindtap="handleList"
        >￥<text>{{item.account}}text>view
      >
    block>
  view>
view>

如下是示例 wxss 代碼

.encourage-content {
  text-align: center;
  padding: 30rpx 80rpx 0 80rpx;
}
.encourage-content .encorage-title {
  padding-bottom: 30rpx;
  color: #ff6b6a;
}
.encourage-content .encourage-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.encourage-content .encourage-list .list-item {
  width: 31%;
  height: 80rpx;
  border: 1px solid #dddd;
  margin-bottom: 15rpx;
  line-height: 80rpx;
}
.encourage-content .encourage-list .list-active {
  color: #ff6b6a;
  border: 1px solid #ff6b6a;
}

如下是邏輯 js 代碼

// pages/tablistchange/tablistchange.js
Page({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    accountlist: {
      // 通過初始化一個目標(biāo)對象
      account: 2,
      encourtitle: '兩只黃鸝鳴翠柳',
    },
    listData: [
      // 循環(huán)遍歷的list數(shù)據(jù)
      {
        account: 2,
        encourtitle: '兩只黃鸝鳴翠柳',
      },
      {
        account: 3,
        encourtitle: '三人行,必有我?guī)?,
      },
      {
        account: 5,
        encourtitle: '吾生有涯,吾知無涯',
      },
      {
        account: 13,
        encourtitle: '一行白鷺上青天',
      },
      {
        account: 14,
        encourtitle: '白駒過隙,歲月如梭,愿君只爭朝夕',
      },
      {
        account: 52,
        encourtitle: '何以解憂,唯有暴富',
      },
    ],
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function(options) {},

  // 列表切換
  handleList(event) {
    // console.log(event);
    this.setData({
      // 給accountList對象重新賦值
      accountlist: event.currentTarget.dataset.item,
    });
  },
});

分析

實現(xiàn)多個tab切換,在這里借助了一個中間變量對象accountList,首先循環(huán)遍歷當(dāng)前的數(shù)據(jù)listData,然后在切換元素上綁定事件,同時設(shè)置data屬性值,通過事件對象攜帶的參數(shù)信息,重新賦值給accountlist對象

在wxml中通過源對象數(shù)據(jù)(listData)與新賦值對象數(shù)據(jù)(accountlist)中的某個屬性值做比較,判斷是否相等,來加載指定的樣式

這種實現(xiàn)方式有別于上面固定的切換,如果有使用過一些vue,react框架的話,實現(xiàn)類似的切換效果也是有異曲同工之妙

至于實現(xiàn)案例當(dāng)中的支付,涉及到云支付,實現(xiàn)起來也來也不復(fù)雜,加一個表單輸入框,綁定數(shù)據(jù),結(jié)合云支付就可以實現(xiàn)下單功能

具體實現(xiàn)云支付功能可參考小程序-云開發(fā)-實現(xiàn)微信云支付功能

最后

實現(xiàn)類似這種tab切換,有時候,可能兩三個tab切換知道怎么實現(xiàn),但是一旦遇到多個,而且時動態(tài)時,會發(fā)現(xiàn)之前的方式卻不耐用了的

這個時候往往需要借助一個第三方的中間變量,然后與源對象中的某個屬性值進(jìn)行比較的,這個源對象的屬性值可以用原有的,也可以新增的(比如id)之類的,總之有一個與之比較,就可以的