【ウィジェット】ログイン、登録、パスワードインタフェースの復元の3つの統合、シームレスな切り替え
48788 ワード
概要
ログイン、登録、パスワードの復元などの機能を1つのインタフェースに統合すると、重複入力やインタフェースの重複切替を減らすことができ、切り替えたアニメーション効果はcssのtransition属性で実現される
ウィジェットコードクリップを直接インポートできます.https://developers.weixin.qq.com/s/LMsBNWm47ofR
効果
インプリメンテーション
jsコード
wxmlコード
wxssコード
tipサンプルコードで使用される微信ウィジェットは、新しいコンポーネントスタイルstyle:v 2であり、古いバージョンのインタフェースは少し異なります. コピーがおっくうな場合は、開発ツール、リンクをウィジェットコードクリップで直接インポートできます.https://developers.weixin.qq.com/s/LMsBNWm47ofR
ログイン、登録、パスワードの復元などの機能を1つのインタフェースに統合すると、重複入力やインタフェースの重複切替を減らすことができ、切り替えたアニメーション効果はcssのtransition属性で実現される
ウィジェットコードクリップを直接インポートできます.https://developers.weixin.qq.com/s/LMsBNWm47ofR
効果
インプリメンテーション
jsコード
// account.js
Page({
data: {
action: "login", // , ：login: , register: ,reset： ，
code_button_text: " ", //
pos: { login: 1, register: 2, reset: 3 }, //
action_text: { login: " ", register: " ", reset: " " },
},
login(value) {
let {login, password} = value;
/**
，
login: , password:
*/
},
register(value) {
let {login, password, code} = value;
/**
，
login: , password: , code:
*/
},
reset(value) {
let {login, password, password_confirmation, code} = value;
/**
，
login: , password: , password_confirmation: ,code:
*/
},
getCode(value) {
let {login} = value;
let { action } = this.data
this.setData({code_status:1}) // ;
this.countDown();
/**
!! this.countDown()
login: , action: ， login, register, reset( )
*/
},
countDown() {
//
var count = 60; // ，
this.setData({ code_status: 2, code_button_text: count-- + " " });
var id = setInterval(() => {
if (count <= 0)
return this.clearCount(id);
this.setData({ code_button_text: count-- + " " })
}, 1000);
return id;
},
clearCount(id) {
//
clearInterval(id);
this.setData({ code_status: 0, code_button_text: " " });
},
onSubmit({ detail: { value, target } }) {
//
if (!this.checkInput({ value, action: target.id })) //
return;
if (target.id == "code")
return this.getCode(value);
if (target.id != this.data.action)
return this.setAction(target.id);
this[target.id](value);
console.log(" " + target.id, " value login,password, password_confirmation, save_password, no_login_after_reset ， ",value);
},
checkInput({ value, action }) {
/** ， ，
* value: Object
* value.login:
* value.passwork:
* ...
**/
if (action != this.data.action && action != "code")
return true;
if (!value.login)
return wx.showToast({ title: ' ', icon: "none" }) && false;
if (action == "code")
return true;
if (!value.password)
return wx.showToast({ title: ' ', icon: "none" }) && false;
if (action == "login")
return true;
if (!value.code)
return wx.showToast({ title: ' ', icon: "none" }) && false;
if (action == "register")
return true;
if (!value.password_confirmation)
return wx.showToast({ title: ' ', icon: "none" }) && false;
return true;
},
setAction(action) {
// action
let { pos } = this.data;
if (!(action in pos))
return;
let tmp = pos[action];
pos[action] = pos[this.data.action];
pos[this.data.action] = tmp;
this.setData({ pos, action });
},
onLoad: function (options) {
// action ( 、 、 )
let {action="login"} = options;
this.setAction(action);
}
})
wxmlコード
<page-meta>
<navigation-bar title="{{action_text[action]}}" />
page-meta>
<view>
<form class="account-form" bindsubmit="onSubmit">
<view class="inputs">
<view class="input-wrap">
<input name="login" placeholder=" "/>
view>
<view class="input-wrap {{action!='login'?'':'hidden'}}">
<input name="code" placeholder=" "/>
<button id="code" type="primary" size="mini" form-type="submit" loading="{{code_status==1}}" disabled="{{code_status}}" class="obtain-code">
{{code_button_text}}
button>
view>
<view class="input-wrap">
<input password name="password" value="{{password}}" placeholder=" "/>
view>
<view class="input-wrap {{action=='reset'?'':'hidden'}}">
<input password name="password_confirmation" placeholder=" "/>
view>
<view class="checkbox-wrap">
<switch type="checkbox" name="save_password" color="#00b0f0" checked="{{save_password}}"> switch>
<switch type="checkbox" class="no-login {{action=='reset'?'':'hidden'}}" name="no_login_after_reset" color="#00b0f0"> switch>
view>
view>
<view class="actions">
<view class="pos{{pos.login}}">
<button id="login" form-type="submit"> button>
view>
<view class="pos{{pos.register}}">
<button id="register" form-type="submit"> button>
view>
<view class="pos{{pos.reset}}">
<button id="reset" form-type="submit">{{pos.reset==1?' ':' ?'}}button>
view>
view>
form>
view>
wxssコード
/**account.wxss*/
.checkbox-wrap,.input-wrap{
transition: 1s all ease;
max-height: 50px;
display: flex;
margin: 5px 26px;
overflow: hidden;
}
.checkbox-wrap{
font-size: 14px;
margin: 0px 20px;
display: flex;
justify-content: space-between;
}
.checkbox-wrap switch{
transform: scale(0.82);
}
.input-wrap>input{
padding: 8px 10px;
border-radius: 4px;
border: 1px #00b0f0 solid;
flex:auto;
}
.obtain-code{
margin-left: 12px!important;
white-space: nowrap;
display: flex!important;
justify-content: center;
align-items: center;
flex: none;
background: #00b0f0!important;
}
.obtain-code[disabled]{
color: white!important; /* */
}
.input-wrap.hidden{
max-height: 0px;
}
switch.no-login.hidden{
opacity: 0;
}
switch.no-login{
float: left;
transition: 1s all ease;
}
.actions{
position: relative;
margin: 0 26px
}
.actions button{
transition: 1s all ease;
}
.actions>view{
width: 100%;
position: absolute;
transition: 1s all ease;
}
.actions>.pos1{
top: 18px;
}
.pos1>button{
background: #00b0f0;
color:white;
}
.actions>.pos2{
top:66px;
}
.pos2>button{
color: #00b0f0;
border:#00b0f0 1px solid;
}
.actions>.pos3{
top: 0px;
}
.pos3>button{
font-size: 14px;
color: #00b0f0;
background: transparent;
transform: translateX(240rpx);
padding: 0px!important;
border-style: none!important;
line-height: 1;
}
.pos3>button::after{
content: none!important;
}
tip