微信小程序-微信小程序点击按钮签到-小程序开发-即速应用

微信小程序-微信小程序点击按钮签到-小程序开发

浏览量：1547 时间：2020-03-20 来源：nikigyq

微信小程序点击按钮签到
1.1.wxml
!--点击签到--viewclass='signIn'viewclass='sign-com'viewclass='thead'viewclass='tt'已连续签到/viewviewclass='mm'labelclass='n'{{signNum}}/label天/view/viewviewclass='the-btn'buttontype='button'class='btn'bindtap='bindSignIn'data-num="{{signNum}}"disabled='{{signState}}'签到/button/view/view/view
2.2.css
/*点击签到*/.signIn{width:100%;height:auto;}.sign-com{width:100%;height:auto;padding:030rpx;box-sizing:border-box;overflow:hidden;}.sign-com.thead{width:100%;text-align:center;padding:50rpx035rpx;}.sign-com.thead.tt{font-size:24rpx;}.sign-com.thead.mm{margin-top:10rpx;font-size:24rpx;}.sign-com.thead.mm.n{font-size:66rpx;margin-right:25rpx;}.the-btn{margin:50rpx0;}.the-btn.btn{background-color:#ff614a;color:#fff;}.the-btn.signed.btn{background-color:rgba(153,153,153,0.61);}
3.3.js
/***页面的初始数据*/data:{//签到模块signNum:0,//签到数signState:false,//签到状态},//签到bindSignIn(e){varthat=this,num=e.currentTarget.dataset.num;num++wx.showToast({icon:'success',title:'签到成功',})that.setData({signNum:num,//signState:true})},