微信小程序 实现点击添加移除class
程序员文章站
2022-07-05 20:38:27
微信小程序点击添加移除class类实现动态变化class
wxml:
微信小程序点击添加移除class类实现动态变化class
wxml:
<view class="location_bottom" hidden="" > <view class="{{_num == 1?'add_citying':'add_city'}}" data-num = "1" bindtap="clicknum">北京</view> <view class="{{_num == 2?'add_citying':'add_city'}}" data-num = "2" bindtap="clicknum">上海</view> </view>
wxss:
.location_bottom{height: 140rpx;line-height: 140rpx;color: #d91f16;font-size: 28rpx;border-top: 2rpx #ebebeb solid; border-bottom: 2rpx #ebebeb solid; padding: 0 20rpx; align-items: center;display: -webkit-flex;}
.add_city{width: 228rpx;height: 60rpx;line-height: 60rpx; text-align: center; border: 2rpx solid #ebebeb; color: #000000;margin-right: 20rpx; } .add_citying{width: 228rpx;height: 60rpx;line-height: 60rpx; text-align: center; border: 2rpx solid #09bb07; color: #09bb07;margin-right: 20rpx;}
js:
page({ data: { _num: 0, }, clicknum: function (e) { console.log(e.target.dataset.num) this.setdata({ _num: e.target.dataset.num }) }, onload: function (options) { } })
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
下一篇: JS设置手机验证码60s等待实现代码