微信小程序实现登录注册tab切换效果

2020-12-29 41 进阶的码农

利用三元运算符实现登录注册效果切换,供大家参考,具体内容如下

微信小程序实现登录注册tab切换效果

直接上代码

wxml:

<view class='top'>
 <text class="{{login?'active':''}}" catchtap='login'>登录</text>
 <text class="{{login?'':'active'}}" catchtap='register'>注册</text>
</view>
 
<view class='log' wx:if="{{login}}">
 <form>
 <input placeholder='账号'/>
 <button>登录</button>
 </form>
 
</view>
<view class='reg'wx:else>
 <form>
 <input placeholder='密码'/>
 <button>注册</button>
 </form>
</view>

wxss:

.top{
 display: flex;
 flex-direction: row;
 height: 100rpx;
 border-bottom: 1px solid #ccc;
}
.top text{
 width: 50%;
 line-height: 100rpx;
 text-align: center;
}
.top .active{
 border-bottom: 2px solid red;
}
input{
 border-bottom: 1px solid #ccc;
 line-height: 100rpx;
 height: 100rpx;
 padding-left: 40rpx;
 margin-bottom: 40rpx;
}

js:

Page({
 data: {
 login:true
 },
 
 /**
 * 生命周期函数--监听页面加载
 */
 login:function(){
  this.setData({
  login:true
  });
 },
 register:function(){
 this.setData({
  login: false
 });
 },
 onLoad: function (options) {
 
 },
 
 /**
 * 生命周期函数--监听页面初次渲染完成
 */
 onReady: function () {
 
 },
 
 /**
 * 生命周期函数--监听页面显示
 */
 onShow: function () {
 
 },
 
 /**
 * 生命周期函数--监听页面隐藏
 */
 onHide: function () {
 
 },
 
 /**
 * 生命周期函数--监听页面卸载
 */
 onUnload: function () {
 
 },
 
 /**
 * 页面相关事件处理函数--监听用户下拉动作
 */
 onPullDownRefresh: function () {
 
 },
 
 /**
 * 页面上拉触底事件的处理函数
 */
 onReachBottom: function () {
 
 },
 
 /**
 * 用户点击右上角分享
 */
 onShareAppMessage: function () {
 
 }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

展开阅读全文

更多Javascript文章

JavaScript 格式字符串的应用
Mar 29 51
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
Aug 07 39
js实现文字在按钮上滚动的方法
Aug 20 37
Vue中添加手机验证码组件功能操作方法
Dec 07 50
在vue中使用SockJS实现webSocket通信的过程
Aug 29 43
vue做移动端适配最佳解决方案(亲测有效)
Sep 04 41
React 路由懒加载的几种实现方案
Oct 23 63
手机访问当前页面