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

来源：互联网发布：网络打印机ip地址查询编辑：程序博客网时间：2024/06/05 13:50

微信小程序点击添加移除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) {  }  })

0 0