|
感謝鎏嫣宮守護(hù)同學(xué)的分享，正好我在做button的跳坑：跳坑地址：
跳坑《一百四十六》button按鈕組件使用說明
項(xiàng)目需求，登陸界面的button需要使用橙色的bg，而在輸入手機(jī)號(hào)碼的時(shí)候，確認(rèn)button 是disabled的。而默認(rèn)的樣式是綠色的，而直接類選擇器設(shè)置樣式，是沒有效果的，在群友的幫助下，在button 里直接設(shè)置style就可以了。具體效果，直接看圖吧。
效果是這樣：
代碼：
wxss：
登錄btn的效果需要在手機(jī)號(hào)碼沒有輸入正確的情況下設(shè)置不可用狀態(tài)。而默認(rèn)的是綠色。解決方法主要就是在style里直接設(shè)置bg-color，而能實(shí)現(xiàn)透明度就是設(shè)置opacity=0.4，在驗(yàn)證手機(jī)號(hào)碼正確以后在將opacity設(shè)置為1，即不透明。
注冊(cè)的btn 設(shè)置了plain 效果，不過border 默認(rèn)的是黑色，所以要想取得效果的話，就要在style中設(shè)置border-color就可以了。（這都是選擇器不熟悉的后果?。?/p>
-
<view>
-
<form bindsubmit="sumit">
-
<input bindinput="phone"maxlength="11" type="number" class="marginview" name="phone" placeholder="手機(jī)號(hào)"/>
-
<input bindinput="password" maxlength="8" password class="marginview"name="passworld" placeholder="密碼"/>
-
<button style="opacity: {{opacity}};color: white; background-color: #ff8719;" disabled="{{disabled}}" loading="{{loginLoading}}" class="marginview"form-type="submit">登錄</button>
-
</form>
-
<button bindtap="gotoRegist" plain style="color: #ff8719; border-color: #ff8719;" class="marginview">注冊(cè)</button>
-
<navigator open-type="redirect" hover-class="none" class="marginview textview" url="forgetpw/forgetpw">忘記密碼</navigator>
-
</view>
js： 在sumit里請(qǐng)求服務(wù)器，返回成功，則提示登錄成功。
-
//判斷是否是手機(jī)號(hào)碼的方法
-
function IsTel(s){
-
if(s!=null) {
-
var length = s.length;
-
if(length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1})|(14[0-9]{1})|)+\d{8})$/.test(s) )
-
{
-
return true;
-
}else{
-
return false;
-
}
-
}
-
}
-
-
Page({
-
data:{
-
disabled:true, //是否可用
-
opacity:0.4, //設(shè)置透明度
-
},
-
//跳轉(zhuǎn)注冊(cè)頁面
-
gotoRegist:function(){
-
wx.redirectTo({url: '../../pages/login/regist/regist'})
-
},
-
//手機(jī)的輸入框
-
phone:function(e){
-
var that = this
-
//console.log(e.detail.value)
-
var isTel = IsTel(e.detail.value)
-
//console.log(isTel)
-
if(isTel){
-
that.setData({
-
disabled:false,
-
opacity:1
-
})
-
}else{
-
that.setData({
-
disabled:true,
-
opacity:0.4
-
})
-
}
-
},
-
//提交按鈕確認(rèn)
-
sumit:function(e){
-
console.log(e.detail.value)
-
if(e.detail.value.passworld.length==0){
-
wx.showModal({
-
title: '密碼不得為空',
-
showCancel:false
-
})
-
}else{
-
//提交
-
wx.request({
-
url: 'https://URL',
-
data: e.detail.value,
-
method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
-
// header: {}, // 設(shè)置請(qǐng)求的 header
-
success: function(res){
-
// success
-
if(res.data==1){ //請(qǐng)求成功返回碼
-
wx.showToast({
-
title: '登陸成功',
-
icon: 'success',
-
duration: 2000
-
})
-
}
-
},
-
fail: function() {
-
// fail
-
},
-
complete: function() {
-
// complete
-
}
-
})
-
}
-
},
-
})
當(dāng)然，以上效果有很多方式能實(shí)現(xiàn)。
|
