[JavaScript知识库]小程序 vant tab icon

index.js

  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: '#FA550F',
    },
  },

  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: 0,
        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: nextOverall,
        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 === 1 ? 'filter-active-item' : ''}}"
      bindtap="onOverallAction"
    >
      综合
    </view>
    <view class="filter-item" bind:tap="handlePriseSort">
      <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">
      <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%;
  height: 88rpx;
  display: flex;
  justify-content: space-between;
  position: relative;
  background: #fff;
}

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

.filter-left-content {
  height: 100%;
  display: flex;
  flex-grow: 2;
  flex-flow: row nowrap;
  justify-content: space-between;
}

.filter-left-content .filter-item {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  line-height: 36rpx;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
}

.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: #fa550f;
}

引用

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

js

  handleFilterChange(e) {
    const { overall, sorts, goodtype } = e.detail;
    console.log(overall, sorts, goodtype);
    this.pageNum = 1;
    this.setData({
      sorts,
      overall,
      goodtype,
    });
    this.init(true);
  },

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖