小程序之列表点击变色

工作日志 随手笔记 仅供参考

image.png
image.png

通过点击时候判断点击的是哪一个，然后判断item ==shopitem 使之变色

/* index.wxml */
<view class='qujian'>
  户型
</view>
<view class='huxing'>
  <view  class="item{{item == shopitem?'active':''}}" wx:for="{{item1}}" bindtap='bindshop1' data-classify="{{item}}">{{item}}</view>
</view>

/* index.wxss*/
.huxing {
  width: 100%;
  padding: 20px 20px 20px 20px;
  /* background: red; */
  display: flex;
  box-sizing: border-box;
  justify-content: space-between;
}
.item{
  width: 22%;
  height: 60rpx;
  background: #fff;
  box-shadow:4px 4px 10px #ccc;
  text-align: center;
  border-radius: 15px;
  color: #555;
  font-size: 14px;
  line-height: 60rpx;
}
/*选中样式*/
.itemactive {
  width: 22%;
  height: 60rpx;
  background: #fff;
  box-shadow:4px 4px 10px #ccc;
  text-align: center;
  border-radius: 15px;
  color: #fff;
  background: orange;
  font-size: 14px;
  line-height: 60rpx;
}

/*index.js*/
data:{
 item1: ["一居", "二居", "三居", "四居以上"],
 shopitem: '一居',   //默认显示的
},
bindshop1: function (event) {
    var classify = event.currentTarget.dataset.classify;
    var that = this;
    console.log(classify)  //输出的结果就是你点击的
    this.setData({
    shopitem: classify  //更新
    })
  },