这篇“小程序怎么制作商品列表排序”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“小程序怎么制作商品列表排序”文章吧。

wxml：

<view class='sort-wrap'>

<view class='sort-btn'>

综合

</view>

<view class='sort-btn' data-index="{{daindex1}}" bindtap="choosesort1">

销量

<image src="{{imageurl1}}"></image>

</view>

<view class='sort-btn' data-index="{{daindex2}}" bindtap="choosesort2">

价格

<image src="{{imageurl2}}"></image>

</view>

</view>

wxss：

.sort-wrap{
  height:90rpx;
  background-color:#fff;
}
.sort-btn{
  width:33.333%;
  float:left;
  text-align: center;
  height:90rpx;
  line-height:90rpx;
  font-size: 28rpx;
  color:#333;
}
.sort-btn image{
  width: 9rpx;
  height: 18rpx;
  margin-left:6rpx;
}

js:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    imageurl1: "../../img/sort-tip_05.png",
    daindex1: 0,
    imageurl2: "../../img/sort-tip_05.png",
    daindex2: 0
  },
  /*  tab   */
  choosesort1: function (e) {
    if (this.data.daindex1 == 0) {
      this.setData({
        imageurl1: "../../img/sort-tip_03.png",
        daindex1: 1
      })
    } else {
      this.setData({
        imageurl1: "../../img/sort-tip_05.png",
        daindex1: 0
      })
    }

  },
  choosesort2: function (e) {
    if (this.data.daindex2 == 0) {
      this.setData({
        imageurl2: "../../img/sort-tip_03.png",
        daindex2: 1
      })
    } else {
      this.setData({
        imageurl2: "../../img/sort-tip_05.png",
        daindex2: 0
      })
    }

  }
  
})

以上就是关于“小程序怎么制作商品列表排序”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注天达云行业资讯频道。