微信小程序实现登录注册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 相关文章推荐
jquery 表单下所有元素的隐藏
Jul 25 Javascript
Javascript学习笔记2 函数
Jan 11 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
Dec 19 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
Jan 26 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
Jun 02 Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 Javascript
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
javascript 中iframe高度自适应(同域)实例详解
May 16 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
Dec 27 Javascript
JavaScript中this关键字用法实例分析
Aug 24 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
May 07 Javascript
Vue+Flask实现图片传输功能
Apr 01 Vue.js
原生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 adodb连接带密码access数据库实例,测试成功
2008/05/14 PHP
php session处理的定制
2009/03/16 PHP
PHP Socket 编程
2010/04/09 PHP
phpmailer中文乱码问题的解决方法
2014/04/22 PHP
PHP生成可点击刷新的验证码简单示例
2016/05/13 PHP
利用PHP如何统计Nginx日志的User Agent数据
2019/03/06 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
使用Java实现简单的server/client回显功能的方法介绍
2013/05/03 Javascript
Javascript脚本实现静态网页加密实例代码
2013/11/05 Javascript
基于javascript滚动图片具体实现
2013/11/18 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
javasript实现密码的隐藏与显示
2015/05/08 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
2015/11/17 Javascript
js实现可控制左右方向的无缝滚动效果
2016/05/29 Javascript
AngularJS基础 ng-keydown 指令简单示例
2016/08/02 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
简述JS控制台的使用
2018/07/15 Javascript
jquery.pagination.js分页使用教程
2018/10/23 jQuery
vue.js实现三级菜单效果
2019/10/19 Javascript
浅谈es6中的元编程
2020/12/01 Javascript
[52:02]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第二场 2月26日
2021/03/11 DOTA
python检测服务器是否正常
2014/02/16 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
python selenium循环登陆网站的实现
2019/11/04 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
CSS3 实现时间轴动画
2020/11/25 HTML / CSS
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
2017/05/18 HTML / CSS
个人自我评价分享
2013/12/20 职场文书