微信小程序实现登录注册tab切换效果
更新时间:2020年12月29日 14:31:45 作者:进阶的码农
这篇文章主要为大家详细介绍了微信小程序实现登录注册切换效果,简易版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 () { } })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
最新评论