微信小程序开发

微信小程序开发

页面效果

mobile.wxml

<!--pages/mobile/mobile.wxml-->
<view class="content"><view class="hr"></view><view class="numbg"><view>+86</view><view><input placeholder="请输入手机号" maxlenge="11" bindblur="mobileblur"/></view></view><view><view class="xieyi"><icon type="success" color="green" size="18"></icon><text class="agree">同意</text><text class="opinion">中国用户注册协议</text></view></view><button class="btn" disabled="{{disabled}}" type="{{btnstate}}" bindtap="login">下一步</button></view>

mobile.wxss

/* pages/mobile/mobile.wxss */
.content{width: 100%;height: 600px;background-color: #f2f2f2;}.hr{padding-top: 20px;}.numbg{border: 1px solid #cccccc;width: 90%;margin: 0 auto;background-color: #ffffff;border-radius: 5px;display: flex;flex-direction: row;height: 50px;}.numbg view{margin-left: 20px;margin-top: 14px;}.xieyi{margin-top: 15px;margin-left: 15px;}.agree{font-size: 13px;margin-left: 5px;color: #666666;}.opinion{font-size: 13px;color: #000000;font-weight: bold;}.btn{width: 90%;margin-top: 30px;}

mobile.js

// pages/mobile/mobile.js
Page({data: {disabled: true,btnstate: "default",mobile:""},mobileblur: function (e) {var content= e.detail.value;if(content!=""){this.setData({ disabled: false, btnstate: "primary", account: content });}else{this.setData({disabled:true,btnstate:"default",mobile:""});}}})

mobile.json

{"usingComponents": {},"navigationBarTitleText": "手机快速注册"
}