用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

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

纸飞机 2018-3-8 09:36

感谢鎏嫣宫守护同学的分享,正好我在做button的跳坑:跳坑地址: 项目需求,登陆界面的button需要使用橙色的bg,而在输入手机号码的时候,确认button 是disabled的。而默认的样式是绿色的,而直接类选择器设置样式 ...

感谢鎏嫣宫守护同学的分享,正好我在做button的跳坑:跳坑地址:

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

效果是这样:

代码:

wxss:

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

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

  1. bindsubmit="sumit">
  2. bindinput="phone"maxlength="11" type="number" class="marginview" name="phone" placeholder="手机号"/>
  3. bindinput="password" maxlength="8" password class="marginview"name="passworld" placeholder="密码"/>
  4. style="opacity: {{opacity}};color: white; background-color: #ff8719;" disabled="{{disabled}}" loading="{{loginLoading}}" class="marginview"form-type="submit">登录
  5. bindtap="gotoRegist" plain style="color: #ff8719; border-color: #ff8719;" class="marginview">注册
  6. open-type="redirect" hover-class="none" class="marginview textview" url="forgetpw/forgetpw">忘记密码

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. Page({
  14. data:{
  15. disabled:true, //是否可用
  16. opacity:0.4, //设置透明度
  17. },
  18. //跳转注册页面
  19. gotoRegist:function(){
  20. wx.redirectTo({url: '../../pages/login/regist/regist'})
  21. },
  22. //手机的输入框
  23. phone:function(e){
  24. var that = this
  25. //console.log(e.detail.value)
  26. var isTel = IsTel(e.detail.value)
  27. //console.log(isTel)
  28. if(isTel){
  29. that.setData({
  30. disabled:false,
  31. opacity:1
  32. })
  33. }else{
  34. that.setData({
  35. disabled:true,
  36. opacity:0.4
  37. })
  38. }
  39. },
  40. //提交按钮确认
  41. sumit:function(e){
  42. console.log(e.detail.value)
  43. if(e.detail.value.passworld.length==0){
  44. wx.showModal({
  45. title: '密码不得为空',
  46. showCancel:false
  47. })
  48. }else{
  49. //提交
  50. wx.request({
  51. url: 'https://URL',
  52. data: e.detail.value,
  53. method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
  54. // header: {}, // 设置请求的 header
  55. success: function(res){
  56. // success
  57. if(res.data==1){ //请求成功返回码
  58. wx.showToast({
  59. title: '登陆成功',
  60. icon: 'success',
  61. duration: 2000
  62. })
  63. }
  64. },
  65. fail: function() {
  66. // fail
  67. },
  68. complete: function() {
  69. // complete
  70. }
  71. })
  72. }
  73. },
  74. })

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

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏