小程序
小游戏
企业微信
微信支付
扫描小程序码分享
比如这样的,点击一下变成红圈黑字,再次点击恢复原状
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
具体描述一下?
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
<image src="{{onTap ? '../images/1.png' : '../images/2.png'}}" bindtap="handleTap" />
data: {
onTap: false
},
handleTap() {
this.setData({
onTap: !this.data.onTap
})
}
<view class="{{onTap ? 'class1' : 'class2'}}" />
https://developers.weixin.qq.com/s/CR6Vaxmo7ryq
.circle { width: 48rpx; height: 48rpx; border-radius: 50%; margin: 0 10rpx; background-color: #ccc; color: #fff; line-height: 48rpx; text-align: center; } .red { background-color: red; color: #000000; } .blue { background-color: blue; color: #ffffff; }
<view class="container"> <view class="circle {{circle[0] ? 'red' : 'blue'}}" data-index="0" bindtap="onClick">A</view> <view class="circle {{circle[1] ? 'red' : 'blue'}}" data-index="1" bindtap="onClick">B</view> </view>
Page({ data: { circle: [true, true] }, onClick(e) { let index = e.currentTarget.dataset.index this.setData({ ['circle[' + index + ']']: !this.data.circle[index] }) } })
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
具体描述一下?
<image src="{{onTap ? '../images/1.png' : '../images/2.png'}}" bindtap="handleTap" />
data: {
onTap: false
},
handleTap() {
this.setData({
onTap: !this.data.onTap
})
}
<view class="{{onTap ? 'class1' : 'class2'}}" />
https://developers.weixin.qq.com/s/CR6Vaxmo7ryq
.circle { width: 48rpx; height: 48rpx; border-radius: 50%; margin: 0 10rpx; background-color: #ccc; color: #fff; line-height: 48rpx; text-align: center; } .red { background-color: red; color: #000000; } .blue { background-color: blue; color: #ffffff; }
<view class="container"> <view class="circle {{circle[0] ? 'red' : 'blue'}}" data-index="0" bindtap="onClick">A</view> <view class="circle {{circle[1] ? 'red' : 'blue'}}" data-index="1" bindtap="onClick">B</view> </view>
Page({ data: { circle: [true, true] }, onClick(e) { let index = e.currentTarget.dataset.index this.setData({ ['circle[' + index + ']']: !this.data.circle[index] }) } })