这里有新鲜出炉的微信小程序入门,程序狗速度看过来!
微信小程序(weixinxiaochengxu),简称小程序,缩写XCX,英文名mini program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。
这篇文章主要介绍了 微信小程序 实现点击添加移除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) {
- }
- })
来源: http://www.phperz.com/article/17/0901/338745.html