小程序 vant tab icon

index.js

Component({
  externalClasses: ['wr-class'],

  options: {
    multipleSlots: true,
  },

  properties: {
    overall: {
      type: Number,
      value: 1,
      observer(overall) {
        this.setData({
          overall,
        });
      },
    },
    sorts: {
      type: String,
      value: '',
      observer(sorts) {
        this.setData({
          sorts,
        });
      },
    },
    goodtype: {
      type: String,
      value: '',
      observer(goodtype) {
        this.setData({
          goodtype,
        });
      },
    },
    color: {
      type: String,
      value: '#25ba74',
    },
  },

  data: {
    overall: 1,
    sorts: '',
    goodtype: '',
  },

  methods: {
    handleGoodSort() {
      const { goodtype } = this.data;
      this.triggerEvent('change', {
        ...this.properties,
        goodtype: goodtype === 'desc' ? 'asc' : 'desc',
        overall: 2,
        sorts: '',
      });
    },

    handlePriseSort() {
      const { sorts } = this.data;
      this.triggerEvent('change', {
        ...this.properties,
        overall: 1,
        sorts: sorts === 'desc' ? 'asc' : 'desc',
        goodtype: '',
      });
    },

    onOverallAction() {
      // const { overall } = this.data;
      // const nextOverall = overall === 1 ? 0 : 1;
      const nextData = {
        sorts: '',
        prices: [],
      };
      this.triggerEvent('change', {
        ...this.properties,
        ...nextData,
        overall: 0,
        sorts: '',
        goodtype: '',
      });
    },
  },
});

index.json

{
    "component": true,
    "usingComponents": {
        "t-icon": "tdesign-miniprogram/icon/icon"
    }
}

index.wxml

<!-- 过滤组件 -->
<view class="wr-class filter-wrap">
  <view class="filter-left-content">
    <view
      class="filter-item {{overall === 0 ? 'filter-active-item' : ''}}"
      bindtap="onOverallAction"
    >
      综合
    </view>
    <view
      class="filter-item"
      bind:tap="handlePriseSort"
      class="filter-item {{overall === 1 ? 'filter-active-item' : ''}}"
    >
      <text style="color: {{sorts !== '' ? color : '' }}">价格</text>
      <view class="filter-price">
        <t-icon
          prefix="wr"
          name="arrow_drop_up"
          size="18rpx"
          style="color:{{sorts === 'asc' ? color : '#bbb'}}"
        />
        <t-icon
          prefix="wr"
          name="arrow_drop_down"
          size="18rpx"
          style="color:{{sorts === 'desc' ? color : '#bbb'}}"
        />
      </view>
    </view>
    <view
      class="filter-item"
      bind:tap="handleGoodSort"
      class="filter-item {{overall === 2 ? 'filter-active-item' : ''}}"
    >
      <text style="color: {{goodtype !== ''? color : '' }}">好评</text>
      <view class="filter-price">
        <t-icon
          prefix="wr"
          name="arrow_drop_up"
          size="18rpx"
          style="color:{{goodtype === 'asc' ? color : '#bbb'}}"
        />
        <t-icon
          prefix="wr"
          name="arrow_drop_down"
          size="18rpx"
          style="color:{{goodtype === 'desc' ? color : '#bbb'}}"
        />
      </view>
    </view>
  </view>
</view>

index.wxss

.filter-wrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
  position: relative;
  border-top: 1px solid #dedede;
  position: fixed;
  background-color: #fff;
  z-index: 9;
}

.filter-right-content {
  height: 100%;
  flex-basis: 100rpx;
  text-align: center;
  line-height: 88rpx;
}

.filter-left-content {
  height: 100%;
  display: flex;

  font-size: 36rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 50rpx;
}

.filter-left-content .filter-item {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  padding: 33rpx 10rpx 22rpx;
  margin: 0 20rpx 5rpx;
}

.filter-left-content .filter-item .filter-price {
  display: flex;
  flex-direction: column;
  margin-left: 6rpx;
  justify-content: space-between;
}

.filter-left-content .filter-item .wr-filter {
  margin-left: 8rpx;
}

.filter-left-content .filter-active-item {
  color: #33a780;
  border-bottom: 5rpx solid #33a780;
}

引用

 <to-fliter
    wr-class="filter-container"
    bind:change="handleFilterChange"
    layout="{{layout}}"
    sorts="{{sorts}}"
    goodtype="{{goodtype}}"
    overall="{{overall}}"
  />

js

data:{
   sorts: '',
   goodtype: '',
   overall: 0,
}
  handleFilterChange(e) {
    const { overall, sorts, goodtype } = e.detail;
    this.page.currentPage = 1;
    wx.pageScrollTo({
      scrollTop: 0,
      duration: 0, //设置滚动延时
    });

    this.setData({
      overall,
      sorts,
      goodtype,
    });
    this.getGuidePage(overall, sorts, goodtype);
  },
  getGuidePage(overall = '', sorts = '', goodtype = '') {
    if (overall == 0) {
      this.page.sortName = '';
    } else if (overall == 1) {
      this.page.sortName = 'price';
      this.page.sort = sorts;
    } else if (overall == 2) {
      this.page.sortName = 'commentsNum';
      this.page.sort = goodtype;
    }
}