温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

微信小程序 实现点击添加移除class

发布时间:2020-10-17 18:59:28 来源:脚本之家 阅读:424 作者:lqh 栏目:web开发

微信小程序点击添加移除class类实现动态变化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) { } }) 

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI