• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

小程序 表单按钮高亮

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

先看效果

 

其实就是监听每个input获取的值,然后在做判断,看是否有获取到,最后在判断按钮的颜色(看不懂的,可以留言)

   <form bindsubmit='formSubmit'>
      <view class='fill_in'>
          <view>
              <text>收货人</text>  
              <input bindinput='highlightName' name='userName' value='' placeholder='请输入您的姓名' placeholder-style='color:#A0A0A0' /> 
          </view>
          <view>
              <text>手机号码</text>
              <input bindinput='highlightTell' type="number"  maxlength='11' name='tellPhone' value='' placeholder='121232435' placeholder-style='color:#A0A0A0'/>  
          </view>
          <view class='picker'>
            <text>省市区</text>
            <picker mode="region"  bindchange="bindRegionChange"  value="{{region}}"
            custom-item="{{customItem}}" >
                <input placeholder='广东省 广州市 海珠区' 
                       placeholder-style='color:#A0A0A0'
                       disabled
                       name='address'
                       value='{{region[0]}} {{region[1]}} {{region[2]}}'/>
            </picker>
            <image class='icon' src='http://192.168.3.20/images/imageTu/right.png'></image>
          </view>
          <view class='detailAddress'>
            <text>详细地址</text>
            <input bindinput='highlightDeatail' name='addressInfo' value='' placeholder='请输入您的详细地址' placeholder-style='color:#A0A0A0' />
            <view class='location'>
                <image src='http://192.168.3.20/images/imageTu/location.png'></image>
                <text>定位</text>
            </view>
          </view>
      </view>

      <button class="blueBg" hidden='{{lighter}}' form-type='submit'>保存收货地址</button>

      <button class="preservation" hidden='{{!lighter}}'>保存收货地址</button>
      
   </form>

 

 highlightName(e){
    let that = this;
    let userName = e.detail.value;

    if (userName == undefined || userName == '' || that.data.addressInfo == undefined || that.data.addressInfo == "" || that.data.region == undefined || that.data.tellPhone == undefined || that.data.tellPhone == "" ) {
          that.setData({
            lighter: true
          })
    }else{
      that.setData({
        lighter: false
      })
    }

    that.setData({
      userName: userName
    })
    },

  highlightTell(e) {
    let that = this;
    let tellPhone = e.detail.value;

    if (tellPhone == undefined || tellPhone == "" || that.data.addressInfo == undefined || that.data.addressInfo == "" || that.data.region == undefined || that.data.userName == undefined || that.data.userName == "") {
      that.setData({
        lighter: true
      })
    } else {
      that.setData({
        lighter: false
      })
    }

    that.setData({
      tellPhone: tellPhone
    })
  },

  highlightDeatail(e) {
    let that = this;
    let addressInfo = e.detail.value;

    if (addressInfo == undefined || addressInfo == "" || that.data.addressInfo == undefined || that.data.addressInfo == "" || that.data.region == undefined || that.data.userName == undefined || that.data.userName == "") {
      that.setData({
        lighter: true
      })
    } else {
      that.setData({
        lighter: false
      })
    }

    that.setData({
      addressInfo: addressInfo
    })
  },
// _____________按钮高亮_______________//

 

虽然这种方法比较啰嗦啦,但最终效果还是出来了的,如果你有好的方法,欢迎分享留言!!!!

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
科大校园信息小程序升级通知2018-7-10发布时间:2022-07-18
下一篇:
微信近期暂时下架的几类小程序!发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap