uni小程序 tab栏商品排序

tab栏商品排序

自己技术小菜，之前跟着老大狠狠的学习一波，下午写了一个tab栏商品排序功能，写的稍微有点复杂，不过自己改改样式也是可以的。

功能展示

代码展示

template 代码展示

主要就是页面布局和一些事件的绑定，tab的切换通过点击事件操作，每个分类绑定了一个事件，在这一块可能会有点麻烦，但是在methods写一个公共函数，来操作商品的升序/降序。总体来说还是很流畅的。

 <view class="total">
      <view class="search">
        <u-search :show-action="true" actionText="搜索" :animation="true" v-model="keyword"
          @custom="ProductSearch" @search="ProductSearch"></u-search>
      </view>
      <!-- 顶部筛选条件 -->
      <view class="tabslect">
        <view class="zonghe" :style="{ 'font-weight': current == 0 ? '600' : '400' }" @click="clickTotal">默认
        </view>
        <view class="jiage" @click="clickprice" :style="{ 'font-weight': current == 1 ? '600' : '400' }">
          <view style="margin-right:10rpx">价格</view>
          <span v-show="order=='price'">
            <span v-show="isShow">
              <u-icon name="arrow-up-fill" top="13" color="#15642d"></u-icon>
            </span>
            <span v-show="!isShow">
              <u-icon name="arrow-down-fill" top="13" color="#15642d"></u-icon>
            </span>
          </span>
        </view>

        <view class="xiaoliang" :style="{ 'font-weight': current == 2 ? '600' : '400' }" @click="clickSold">
          <view style="margin-right:10rpx">销量</view>
          <span v-show="order=='sales'">
            <span v-show="isShow">
              <u-icon name="arrow-up-fill" top="13" color="#15642d"></u-icon>
            </span>
            <span v-show="!isShow">
              <u-icon name="arrow-down-fill" top="13" color="#15642d"></u-icon>
            </span>
          </span>
        </view>
        <view class="pinpai" :style="{'font-weight':current==3 ? '600':'400'}" @click="clickPrid">
          <view style="margin-right:10rpx">新品</view>
          <span v-show="order=='id'">
            <span v-show="isShow">
              <u-icon name="arrow-up-fill" top="13" color="#15642d"></u-icon>
            </span>
            <span v-show="!isShow">
              <u-icon name="arrow-down-fill" top="13" color="#15642d"></u-icon>
            </span>
          </span>

        </view>
      </view>

      <scroll-view class="content" enable-flex scroll-y="true" @refresherpulling="onPulling">
        <view class="division"></view>
        <!-- 商品列表 -->
        <view>
          <view class="Product" v-for="item in indexList" :key="item.id" @click="product(item.id)">
            <view class="picture">
              <img :src="item.image" alt="">
            </view>
            <view class="introduce">
              <view class="title">{{item.store_name}}</view>
              <view class="detailed">{{item.store_name}}</view>
              <view class="base">
                <span style="font-size: 32rpx;color: red;">￥{{item.price}}</span>
                <span class="price">{{'已售'+item.sales}}</span>
                <img style="width: 50rpx; height: 50rpx;float: right;"
                  src="http://stor.yuke520.com/group1/M00/0C/A3/rBMBRGBddfWAOWrLAAAKNHGV5rs266.png" alt="">
              </view>

            </view>

          </view>
        </view>
        <u-loading v-show="show" :show="show" class="bottom" size="36" mode="circle"></u-loading>
        <view :v-show="show" class="bottom">{{ bottomText }}</view>
        <view v-if="nosearch" class="bgcword">没有搜索到商品</view>
      </scroll-view>
    </view>

Js部分代码

async sortData(field, desc) {
      this.order = field;
      this.desc = desc;
      const res = await proDucts({ uid: this.userInfo.uid, level: this.levelID, sid: this.id, order: this.order, desc: this.desc }).catch()
      console.log(res, '搜索数据');
      this.indexList = res.data
    },

clickTotal() {

      if (this.isShow) {
        this.sortData('id', 'desc');
      }
      else {
        this.sortData('id', '');
      }
      this.order = ''
      // this.isShow = !this.isShow;
    },
    //价格
    clickprice() {

      if (this.isShow) {
        this.sortData('price', 'desc');
      }
      else {
        this.sortData('price', '');
      }
      this.isShow = !this.isShow;

    },
    // 销量
    clickSold() {

      if (this.isShow) {
        this.sortData('sales', 'desc');
      }
      else {
        this.sortData('sales', '');
      }
      this.isShow = !this.isShow;

    },
    //新品
    clickPrid() {

      if (this.isShow) {
        this.sortData('id', 'desc');
      }
      else {
        this.sortData('id', '');
      }
      this.isShow = !this.isShow;

    },

Css部分代码

.tabslect {
  background-color: #fff;
  width: 750rpx;
  height: 80rpx;
  position: sticky;
  // top: 122rpx;
  display: flex;
  justify-content: space-around;
  font-size: 32rpx;
  color: #171717;
  line-height: 80rpx;
  z-index: 99;
  text-align: center;
  .zonghe {
    display: flex;
    justify-content: center;
    width: 150rpx;
  }
  .zonghe:hover {
    color: #15642d;
  }

  .jiage {
    display: flex;
    width: 150rpx;
    justify-content: center;
  }
  .jiage:hover {
    color: #15642d;
  }
  .xiaoliang {
    display: flex;
    width: 150rpx;
    justify-content: center;
  }
  .xiaoliang:hover {
    color: #15642d;
  }
  .pinpai {
    display: flex;
    width: 150rpx;
    justify-content: center;
  }
  .pinpai:hover {
    color: #15642d;
  }
}

最后的话

这个功能看起来也很简单，但是还远远不够。