小程序商品列表，点击排序按钮小效果

最新推荐文章于 2021-07-29 10:31:16 发布

lrz136

最新推荐文章于 2021-07-29 10:31:16 发布

阅读量2w

点赞数 7

分类专栏：小程序文章标签：小程序

本文链接：https://blog.csdn.net/l13620804253/article/details/80182582

版权

小程序专栏收录该内容

5 篇文章 1 订阅

订阅专栏

小程序商城里，通常会有商品列表，里边还会有排序点击（点击切换图片）；

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
      })
    }

  }
  
})

x效果图：