欢迎来到懒人模板!我们专注移动互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 小程序教程 >

    微信小程序开发仿律师帮帮会员登录页面设计与制作教程

    2018-05-16 09:29 来源/作者:懒人模板 分类:小程序教程  « »
    今天给大家带来仿律师帮帮会员登录页面设计与制作教程,制作好以后效果如下:


    一、wxml页面代码如下:
    <!--头部 logo部分  -->
    <view class="login-center">
       <view class="login-logo">
          <view class="login-box">
            <image src="/images/logo-login.png"></image>
            <view class="login-text">现有<text>1233</text>个问题被专业律师解答</view>
          </view>
       </view>
       <!--表单验证部分  -->
    <form bindsubmit="formSubmit"  class="form-cen">
        <view class="from-list">
          <view class="section">
            <input type="number"  name='tel'  placeholder="请输入您的手机号码"  disabled = "{{btndisabled}}" placeholder-class='placeholders' 
             value="{{phone}}"   />
          </view>
          <view class="section">
            <input password type="text" name='pasd'   placeholder="请输入您的密码"  disabled = "{{btndisabled}}" value = "{{pasd}}" placeholder-class='placeholders' />
          </view>
          <view class="section section-flex">
                <view class="checkbox  text ">
                  <checkbox-group   bindchange="checkboxChange"  name ='checkboxval'    >
                            <label class="checkbox" >
                                <checkbox color='red'  value="{{checkboxVal}}"  checked="{{bool}}"/>记住密码
                            </label>
                </checkbox-group>
              </view>
              <view class="forgot-pasd text">
                    <navigator url="/pages/forgot_password/forgot_password" >忘记密码</navigator >
              </view>
          </view>
          <view class="section">
            <button size ="default"   class="submit-btn"  formType = 'submit' style="background-color:{{loginBtnBgBgColor}}"  loading ="{{btnLoading}}" disabled =  "{{ btndisabled}}">
              {{loginBtnTxt}}
            </button>
          </view>
        </view>
      </form>
    <!-- 点击微信手机号码授权 -->
    <view class="authorization">
        <button disabled="{{ztBool}}" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">
            一键微信登陆
         </button>
    </view>
    <!--底部的跳转  -->
    <view class="footer-nav">
        <view class="footer-btn">
            <navigator url="/pages/forgot_password/forgot_password">用户注册</navigator>
        </view>
    </view>
    </view>
    
    
    
    
    

    点击扫描效果预览免费下载免登陆网盘下载
    标签:
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议