小程序模板網(wǎng)

鎏嫣宮守護(hù):微信小程序button 修改樣式

發(fā)布時(shí)間:2018-04-16 10:22 所屬欄目:小程序開發(fā)教程

感謝鎏嫣宮守護(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>

 

				
  1. <view>
  2. <form bindsubmit="sumit">
  3. <input bindinput="phone"maxlength="11" type="number" class="marginview" name="phone" placeholder="手機(jī)號(hào)"/>
  4. <input bindinput="password" maxlength="8" password class="marginview"name="passworld" placeholder="密碼"/>
  5. <button style="opacity: {{opacity}};color: white; background-color: #ff8719;" disabled="{{disabled}}" loading="{{loginLoading}}" class="marginview"form-type="submit">登錄</button>
  6. </form>
  7. <button bindtap="gotoRegist" plain style="color: #ff8719; border-color: #ff8719;" class="marginview">注冊(cè)</button>
  8. <navigator open-type="redirect" hover-class="none" class="marginview textview" url="forgetpw/forgetpw">忘記密碼</navigator>
  9. </view>

js: 在sumit里請(qǐng)求服務(wù)器,返回成功,則提示登錄成功。

 

				
  1. //判斷是否是手機(jī)號(hào)碼的方法
  2. function IsTel(s){
  3. if(s!=null) {
  4. var length = s.length;
  5. 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) )
  6. {
  7. return true;
  8. }else{
  9. return false;
  10. }
  11. }
  12. }
  13.  
  14. Page({
  15. data:{
  16. disabled:true, //是否可用
  17. opacity:0.4, //設(shè)置透明度
  18. },
  19. //跳轉(zhuǎn)注冊(cè)頁面
  20. gotoRegist:function(){
  21. wx.redirectTo({url: '../../pages/login/regist/regist'})
  22. },
  23. //手機(jī)的輸入框
  24. phone:function(e){
  25. var that = this
  26. //console.log(e.detail.value)
  27. var isTel = IsTel(e.detail.value)
  28. //console.log(isTel)
  29. if(isTel){
  30. that.setData({
  31. disabled:false,
  32. opacity:1
  33. })
  34. }else{
  35. that.setData({
  36. disabled:true,
  37. opacity:0.4
  38. })
  39. }
  40. },
  41. //提交按鈕確認(rèn)
  42. sumit:function(e){
  43. console.log(e.detail.value)
  44. if(e.detail.value.passworld.length==0){
  45. wx.showModal({
  46. title: '密碼不得為空',
  47. showCancel:false
  48. })
  49. }else{
  50. //提交
  51. wx.request({
  52. url: 'https://URL',
  53. data: e.detail.value,
  54. method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
  55. // header: {}, // 設(shè)置請(qǐng)求的 header
  56. success: function(res){
  57. // success
  58. if(res.data==1){ //請(qǐng)求成功返回碼
  59. wx.showToast({
  60. title: '登陸成功',
  61. icon: 'success',
  62. duration: 2000
  63. })
  64. }
  65. },
  66. fail: function() {
  67. // fail
  68. },
  69. complete: function() {
  70. // complete
  71. }
  72. })
  73. }
  74. },
  75. })

當(dāng)然,以上效果有很多方式能實(shí)現(xiàn)。



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/23423.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢