小程序分类查询条件可水平滚动

分类可水平滚动
在这里插入图片描述view部分

<scroll-view class="scroll-x paramWrap1" scroll-x="true" scroll-x>
  <view>
    <text bindtap='param1Change' data-state='-1' class='{{examType==-1?"pvts":""}}'>全部</text>
  </view>
  <view wx:for="{{examTypes}}">
    <text bindtap='param1Change' data-state='{{item.id}}' class='{{examType==item.id?"pvts":""}}'>{{item.name}}</text>
  </view>
</scroll-view>

css部分

.scroll-x{
    white-space:nowrap;
    display:flex;
    border-bottom: 2rpx solid #eee;
    font-size: 28rpx;
    color: #4c4c4c;
}
.scroll-x view{
  display: inline-block;
}
.paramWrap1 {
  border-bottom: 2rpx solid #eee;
}

.paramWrap1 view {
  flex: 1;
  text-align: center;
}

.paramWrap1 view text {
  border-bottom: 2rpx solid #fff;
  box-sizing: border-box;
  display: inline-block;
  padding-top: 30rpx;
  padding-bottom: 20rpx;
  width: 100%;
  font-size: 30rpx;
  color: #6e6e6e;
  padding-left: 24rpx;
  padding-right: 24rpx;
}

text.pvts {
  border-color: #2cc17b !important;
  color: #2cc17b!important;
}
.paramWrap1 view.active{
  color: #02bd76;
}

js部分

param1Change: function (e) {
    var state = parseInt(e.currentTarget.dataset["state"]);
    this.setData({
      examType: state
    });
    this.examPaperPageReset();
  },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值