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


Posted in Javascript onDecember 29, 2020

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

微信小程序实现登录注册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 相关文章推荐
页面只能打开一次Cooike如何实现
Dec 04 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
Nov 19 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
Feb 10 Javascript
使用javascript做的一个随机点名程序
Feb 13 Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
Apr 22 Javascript
微信小程序网络封装(简单高效)
Aug 06 Javascript
JavaScript使用类似break机制中断forEach循环的方法
Nov 13 Javascript
详解webpack 最简打包结果分析
Feb 20 Javascript
php结合js实现多条件组合查询
May 28 Javascript
关于JavaScript回调函数的深入理解
Jun 27 Javascript
JavaScript ES6的函数拓展
Jan 18 Javascript
原生js实现淘宝放大镜效果
Oct 28 #Javascript
微信小程序如何获取手机验证码
Nov 04 #Javascript
微信小程序实现弹出层效果
May 26 #Javascript
微信小程序实现预览图片功能
Oct 22 #Javascript
详解如何使用koa实现socket.io官网的例子
Nov 04 #Javascript
微信小程序实现多选功能
Nov 04 #Javascript
微信小程序实现无限滚动列表
May 29 #Javascript
You might like
php curl 获取https请求的2种方法
2015/04/27 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
php多进程模拟并发事务产生的问题小结
2018/12/07 PHP
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
JavaScript代码复用模式实例分析
2012/12/02 Javascript
jQuery 判断图片是否加载完成方法汇总
2015/08/10 Javascript
Angular的$http与$location
2016/12/26 Javascript
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
vue结合axios与后端进行ajax交互的方法
2018/07/06 Javascript
js canvas实现二维码和图片合成的海报
2020/11/19 Javascript
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
javascript实现日历效果
2019/06/17 Javascript
js实现点击图片在屏幕中间弹出放大效果
2019/09/11 Javascript
javascript网页随机点名实现过程解析
2019/10/15 Javascript
Python FTP操作类代码分享
2014/05/13 Python
python实现的jpg格式图片修复代码
2015/04/21 Python
Python实现PS滤镜中马赛克效果示例
2018/01/20 Python
Python复制Word内容并使用格式设字体与大小实例代码
2018/01/22 Python
详解如何在python中读写和存储matlab的数据文件(*.mat)
2018/02/24 Python
实用自动化运维Python脚本分享
2018/06/04 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
python应用文件读取与登录注册功能
2019/09/23 Python
python基于plotly实现画饼状图代码实例
2019/12/16 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
大学毕业生最详细的自我评价分享
2013/11/18 职场文书
企业给企业的表扬信
2014/01/13 职场文书
春节活动策划方案
2014/01/24 职场文书
离婚协议书怎么写
2014/09/12 职场文书
交通事故死亡赔偿协议书
2014/12/03 职场文书
财务人员廉洁自律心得体会
2016/01/13 职场文书
人生感悟经典句子
2019/08/20 职场文书
nginx location优先级的深入讲解
2021/03/31 Servers
详解MySQL数据库千万级数据查询和存储
2021/05/18 MySQL
JAVA SpringMVC实现自定义拦截器
2022/03/16 Python
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python