1.点击改变样式
1.wxml中
<view class="column">
<view class="body-view {{num==1?'active':''}}" bindtap="bindChoice" data-num='1'>推荐</view>
<view class="body-view {{num==2?'active':''}}" bindtap="bindChoice" data-num='2'>热门</view>
<view class="body-view {{num==3?'active':''}}" bindtap="bindChoice" data-num='3'>分类</view>
</view>2.js中
data{
num:1
}
bindChoice:function(e){
console.log(e);
this.setData({
num:e.target.dataset.num
})
}说明：点击推荐、热门、分类后分别添加点击后的样式“active”,默认为推荐，此方法可用在选项卡上面。
2.点击改变属性样式
<view >
<view class="cont" style="background:{{background}};">属性改变</view>
<button bindtap="tryDriver">改变背景</button>
</view>.cont{
height: 150rpx;
line-height: 150rpx;
text-align: center;
border: 1px solid #89dcf8;
margin-bottom:112rpx;
margin:13rpx;
}Page({
data: {},
tryDriver: function() {
this.setData({
background: "#89dcf8"
})
}
})3.单次点击的方法
<view bindtap="addlike" class="action" data-num='{{num}}'>点赞</view>
data: {
num: 0,
}，
//点赞
addlike:function(e){
var num = e.currentTarget.dataset.num;
var page = this;
page.setData({
num:num
})
if (num == 1) {
wx.showToast({
title: '已经赞过了！',
icon: 'loading',
duration: 1000
})
}else{
wx.request({
url: '’, //处理点赞操作
header: { 'content-type': 'application/x-www-form-urlencoded' },
method: 'POST',
data: [],
success: function (res) {
wx.showToast({
title: '谢谢支持！',
icon: 'success',
duration: 1000
})
page.setData({
num:1
})
page.loadLikelist(aid); //更新点赞数
},
})
}
},
转载请注明： ITTXX.CN--分享互联网 » 小程序点击事件改变样式和只能单次点击的方法
最后更新：2020-05-28 13:37:46