如何在微信小程序中修改button样式？

  今天给大家讲的是如何在微信小程序中修改button样式?对微信很感兴趣的同学们就一起学习下吧!

  项目需求，登陆界面的button需要使用橙色的bg，而在输入手机号码的时候，确认button 是disabled的。而默认的样式是绿色的，而直接类选择器设置样式，是没有效果的，在群友的帮助下，在button 里直接设置style就可以了。具体效果，直接看图吧。

  效果是这样：

  代码：

  wxss：

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

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

  <view>

  <form bindsubmit="sumit">

  <input bindinput="phone"maxlength="11" type="number" class="marginview" name="phone" placeholder="手机号"/>

  <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">注册</button>

  <navigator open-type="redirect" hover-class="none" class="marginview textview" url="forgetpw/forgetpw">忘记密码</navigator>

  </view>

  js：

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

  //判断是否是手机号码的方法

  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, //设置透明度

  },

  //跳转注册页面

  gotoRegist:function(){

  wx.redirectTo({url: \'../../pages/login/regist/regist\'})

  },

  //手机的输入框

  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

  })

  }

  },

  //提交按钮确认

  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: {}, // 设置请求的 header

  success: function(res){

  // success

  if(res.data==1){ //请求成功返回码

  wx.showToast({

  title: \'登陆成功\',

  icon: \'success\',

  duration: 2000

  })

  }

  },

  fail: function() {

  // fail

  },

  complete: function() {

  // complete

  }

  })

  }

  },

  })

  以上就是如何在微信小程序中修改button样式的全部内容了，大家都学会了吗?