微信小程序-實現 tab-及多個(gè)列表選項切換

發表時間：2021-1-5

發布人：葵宇科技

浏覽次數：59

背景

在小程序中(zhōng)實現tab選項切換是一個(gè)非常常見的效果,對于固定幾個(gè)tab切換或許輕而易舉,但若出現多個(gè),對于有些新手,卻不知道怎麼控制

兩種方式實現tab切換效果,但凡以後遇到類似的需求,都可(kě)以實現(本文(wé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"
      >轉賬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({
  /**
   * 頁面的初始數據
   */
  data: {
    type: 'expend',
  },

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

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

實例效果如(rú)下(xià)所示:

分析

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

在實現切換時,主要是切換class,在wxml中(zhōng),根據type動(dòng)态值,插值表達式,最終決定加載哪個(gè)激活狀态的樣式

這種固定的tab切換效果顯然是可(kě)以實現的,但問(wèn)題來了,如(rú)果是多個(gè)呢(ne),不固定的呢(ne)?

實現不固定動(dòng)态的 tab 切換

如(rú)下(xià)示例效果

如(rú)下(xià)是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>

如(rú)下(xià)是示例 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;
}

如(rú)下(xià)是邏輯 js 代碼

// pages/tablistchange/tablistchange.js
Page({
  /**
   * 頁面的初始數據
   */
  data: {
    accountlist: {
      // 通(tōng)過初始化一個(gè)目标對象
      account: 2,
      encourtitle: '兩隻黃鹂鳴翠柳',
    },
    listData: [
      // 循環遍曆的list數據
      {
        account: 2,
        encourtitle: '兩隻黃鹂鳴翠柳',
      },
      {
        account: 3,
        encourtitle: '三人行,必有我師(shī)',
      },
      {
        account: 5,
        encourtitle: '吾生有涯,吾知無涯',
      },
      {
        account: 13,
        encourtitle: '一行白鹭上青天',
      },
      {
        account: 14,
        encourtitle: '白駒過隙,歲月(yuè)如(rú)梭,願君隻争朝夕',
      },
      {
        account: 52,
        encourtitle: '何以解憂,唯有暴富',
      },
    ],
  },

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

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

分析