如何在微信小程序中修改button样式？
今天给大家讲的是如何在微信小程序中修改button样式?对微信很感兴趣的同学们就一起学习下吧!
项目需求，登陆界面的button需要使用橙色的bg，而在输入手机号码的时候，确认button 是disabled的。而默认的样式是绿色的，而直接类选择器设置样式，是没有效果的，在群友的帮助下，在button 里直接设置style就可以了。具体效果，直接看图吧。
效果是这样：
代码：
wxss：
登录btn的效果需要在手机号码没有输入正确的情况下设置不可用状态。而默认的是绿色。解决方法主要就是在style里直接设置bg-color，而能实现透明度就是设置opacity=0.4，在验证手机号码正确以后在将opacity设置为1，即不透明。
注册的btn 设置了plain 效果，不过border 默认的是黑色，所以要想取得效果的话，就要在style中设置border-color就可以了。（这都是选择器不熟悉的后果啊）
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样式的全部内容了，大家都学会了吗?
- 怎么在AutoCAD中查看全部的内容？
- 别弃我2026-08-03 00:31:12
- 如何在AutoCAD中选框选图形？在AutoCAD中选框选图形的方法
- 栗子2026-08-03 00:31:10
- 如何在AutoCAD中画箭头符号？
- 对味2026-08-03 00:30:52
- 怎么在AutoCAD中绘制三维立体室内图？
- 别认怂2026-08-03 00:30:48
- 怎么给AutoCAD中的3d图形填充颜色？
- 花心症2026-08-03 00:30:42
- 如何解决AutoCAD启动很慢的问题？
- 凉人心2026-08-03 00:30:38
- QQMac版如何修改备注？QQMac版修改备注的方法
- 留井2026-08-03 00:30:35
- QQ手机版怎么取消个性签名与空间同步？
- 何必等2026-08-03 00:30:31
- 如何在AutoCAD中设置底图？AutoCAD设置底图的方法
- 阑珊2026-08-03 00:30:31
- QQ手机版如何设置井柏然字体？设置井柏然字体的方法
- 棼谷2026-08-03 00:30:28
