相思资源网 Design By www.200059.com

微信小程序点击添加移除class类实现动态变化class

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

wxml:

<view class="location_bottom" hidden="" > 
   <view class="{{_num == 1" data-num = "1" bindtap="clickNum">北京</view> 
   <view class="{{_num == 2" 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) { 
 
 } 
 
  
}) 

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

标签:
小程序点击添加移除class,小程序,移除功能

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“微信小程序 实现点击添加移除class”

暂无微信小程序 实现点击添加移除class的评论...