小程序筛选列表可单选可同时选效果

最新推荐文章于 2024-04-10 17:45:45 发布

FuturePeriod

最新推荐文章于 2024-04-10 17:45:45 发布

阅读量783

点赞数

分类专栏：项目中遇到的问题

本文链接：https://blog.youkuaiyun.com/weixin_45244453/article/details/102614081

版权

项目中遇到的问题专栏收录该内容

10 篇文章

订阅专栏

 <view class="sxBox" wx:if="{{sxBox}}">
       <view class="shuaixuan">
        <text class="changFs">商家特色</text>
        <view class='sxList' >
          <text bindtap="filter" data-index="0" data-value="1" class="{{currDj[0]==1?'sxListColor':'sxListdefault'}}">减免运费</text>
          <text bindtap="filter" data-index="1" data-value="2" class="{{currDj[1]==2?'sxListColor':'sxListdefault'}}">优惠券</text>
        </view>
      </view>
       <view class="shuaixuan">
        <text class="changFs">商家活动</text>
        <view class='sxList'>
          <text bindtap="filter"  data-index="2" data-value="3" class="{{currDj[2]==3?'sxListColor':'sxListdefault'}}">首单优惠</text>
          <text bindtap="filter"  data-index="3" data-value="4" class="{{currDj[3]==4?'sxListColor':'sxListdefault'}}">满减优惠</text>
        </view>
      </view>``
      </view>
      <view class="btn">
        <text>重置</text>
        <text>确定</text>
      </view>
    </view>

/* 筛选 */
.sxBox{
  width: 100%;
  height: 666rpx;
  position: absolute;
  top: 560rpx;
  left: 0;
  z-index: 200;
  background: #fff;
}
.shuaixuan {
  display: flex;
  flex-direction: column;
}

.shuaixuan .changFs {
  display: flex;
  font-size: 24rpx;
  color: #989898;
  margin: 34rpx 0 24rpx 32rpx;
}

.sxList {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  margin: 0 0 0 30rpx;
}
.sxList .sxListdefault,.sxList .sxListColor{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220rpx;
  height: 56rpx;
  font-family: PingFangSC-Regular;
  font-size: 28rpx;
  color: #2B2B2B;
  background: #F7F7F7;
  border-radius: 2px;
  margin-right: 12rpx;
}
.sxList .sxListColor{
  color: #FF5C4D !important;
  background: #FFF0F0 !important;
  border-radius: 2px !important;
}
.sxListTwo text{
  margin-bottom: 20rpx;
}
.btn{
  width: 100%;
  display: flex;
  margin-top: 48rpx;
  border-top: 1px solid #F5F5F5; 
}
.btn text{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 376rpx;
  height: 98rpx;
  font-family: PingFangSC-Regular;
  font-size: 32rpx;
  color: #989898;
}
.btn text:nth-child(2){
  color: #FFFFFF;
  background-image: linear-gradient(49deg, #FF4F4F 0%, #FF8644 100%);
}


data{
	 currDj: ['', ''],
}

 // 筛选事件
  filter:function(e){
    var that=this
    var index=e.currentTarget.dataset.index
    var currDj = that.data.currDj
    console.log(currDj)
    currDj[index] = currDj[index] == e.currentTarget.dataset.value ? '' : e.currentTarget.dataset.value
    this.setData({
      currDj: currDj
    })
    console.log(this.data.currDj)
    console.log(e.currentTarget.dataset.value)
  },