小程序模板网

鎏嫣宫守护:微信小程序button 修改样式

感谢鎏嫣宫守护同学的分享,正好我在做button的跳坑:跳坑地址: 
跳坑《一百四十六》button按钮组件使用说明 
项目需求,登陆界面的button需要使用橙色的bg,而在输入手机号码的时候,确认button 是disabled的。而默认的样式是绿色的,而直接类选择器设置样式,是没有效果的,在群友的帮助下,在button 里直接设置style就可以了。具体效果,直接看图吧。

效果是这样: 

代码:

wxss:

登录btn的效果需要在手机号码没有输入正确的情况下设置不可用状态。而默认的是绿色。解决方法主要就是在style里直接设置bg-color,而能实现透明度就是设置opacity=0.4,在验证手机号码正确以后在将opacity设置为1,即不透明。

注册的btn 设置了plain 效果,不过border 默认的是黑色,所以要想取得效果的话,就要在style中设置border-color就可以了。(这都是选择器不熟悉的后果啊)

 

				
  1. <view>
  2. <form bindsubmit="sumit">
  3. <input bindinput="phone"maxlength="11" type="number" class="marginview" name="phone" placeholder="手机号"/>
  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">注册</button>
  8. <navigator open-type="redirect" hover-class="none" class="marginview textview" url="forgetpw/forgetpw">忘记密码</navigator>
  9. </view>

js: 在sumit里请求服务器,返回成功,则提示登录成功。

 

				
  1. //判断是否是手机号码的方法
  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, //设置透明度
  18. },
  19. //跳转注册页面
  20. gotoRegist:function(){
  21. wx.redirectTo({url: '../../pages/login/regist/regist'})
  22. },
  23. //手机的输入框
  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. //提交按钮确认
  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: {}, // 设置请求的 header
  56. success: function(res){
  57. // success
  58. if(res.data==1){ //请求成功返回码
  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. })

当然,以上效果有很多方式能实现。



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23423.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询