项目需求,登陆界面的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
- }
- })
- }
- },
- })
当然,以上效果有很多方式能实现。