欢迎您的光临,本博所发布之文章皆为作者亲测通过,如有错误,欢迎通过各种方式指正。

文摘  小程序点击事件改变样式和只能单次点击的方法

小程序应用 本站 481 0评论

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

赞 (2) or 分享 ()
游客 发表我的评论   换个身份
取消评论

表情
(0)个小伙伴在吐槽