歡迎來到懶人模板!我們專注移動互聯網,所有模板永久免費下載!
  • 首 頁
  • 當前位置:主頁 > 小程序教程 >

    微信小程序藍色兩種方法登陸頁面設計制作開發教程

    2018-07-27 10:11 來源/作者:懶人模板 分類:小程序教程  « »
    本文給大家帶來的是微信小程序藍色兩種方法登陸頁面設計制作開發教程,制作好以后效果圖如下:
    一、wxml頁面代碼如下:
    <!--pages/account/login.wxml-->
    <view class="tool-tip " wx:if="{{popMsg}}">
        <text class="{{popType}}">{{popMsg}}</text>
    </view>
    <form bindsubmit="loginSubmit">
        <view class="list card margin-top">
    
            <view class="header row row-horizontal-around row-no-padding">
                <view class="col-35 header-tab {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">
                    手機驗證登錄
                </view>
    
                <text class="border-r"></text>
                <view class="col-35 header-tab {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">
                    賬號密碼登錄
                </view>
            </view>
            <!-- 手機驗證登錄 -->
            <view wx:if="{{currentTab==0}}">
                <view class="item item-input">
                    <text class=" iconfont icon-my placeholder-icon"></text>
                    <input type="number" bindinput="bindChange" id="user" name="user" maxlength="11" placeholder="手機號碼"
                           />
                </view>
    
                <view class="item item-input">
                    <text class=" iconfont  icon-unlock placeholder-icon"></text>
                    <input type="number" bindinput="bindChange" id="verifycode" name="verifycode" placeholder="驗證碼"/>
                    <button bindtap="getVerifyCode" disabled="{{vcdisabled}}"
                            class="positive-bg light verify-code col-30 button-small" hover-class="button-hover">
                        {{paracont}}
                    </button>
                </view>
            </view>
    
            <!-- 賬號密碼登錄 -->
            <view wx:if="{{currentTab==1}}">
                <view class="item item-input">
                    <text class=" iconfont icon-my placeholder-icon"></text>
                    <input type="number" bindinput="bindChange" id="account" maxlength="11" name="account"
                           placeholder="手機號碼"
                           />
                </view>
    
                <view class="item item-input">
                    <text class=" iconfont  icon-lock placeholder-icon"></text>
                    <input type="text" bindinput="bindChange" password="true" id="password" maxlength="18" name="password"
                           placeholder="密碼"/>
                </view>
            </view>
    
    
        </view>
    
        <view class="padding-horizontal">
            <button formType="submit" hover-class="button-hover" class="positive-bg light ">登錄</button>
        </view>
        <view class="row row-horizontal-center  margin-top">
            <navigator url="register" open-type="navigate" hover-class="none"
                       class="col-30 positive text-right padding-right  border-r">注冊收收
            </navigator>
            <navigator url="findpassword" open-type="navigate" hover-class="none" class="col-30 padding-left">忘記密碼
            </navigator>
        </view>
    </form>
    
    

    點擊掃描效果預覽免費下載免登陸網盤下載
    標簽:
    * 懶人模板承諾:本站所有資源免費下載,無病毒,無彈窗,無干擾鏈接! 提點建議
    老品牌赛马会