商城系統(tǒng) 注冊

小程序如何制作商品列表排序

2020-09-27|HiShop
導(dǎo)讀:小程序商城里,通常會有商品列表,里邊還會有排序點擊,那么這種排序點擊的樣式是如何開發(fā)的?...
 

小程序商城里,通常會有商品列表,里邊還會有排序點擊,那么這種排序點擊的樣式是如何開發(fā)的?

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({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  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
      })
    }

  }
  
})

HiShop小程序工具提供多類型商城/門店小程序制作,可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面,所看即所得,只需要美工就能做出精美商城。更多小程序商店請查看:小程序商店

小程序如何制作商品列表排序

電話咨詢 預(yù)約演示 0元開店