微信小程序实现登录注册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 中几个类选择器的简单使用介绍
Mar 14 Javascript
Javascript中replace()小结
Sep 30 Javascript
Javascript之BOM(window对象)详解
May 25 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 Javascript
BootStrap 表单控件之单选按钮水平排列
May 23 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
Aug 16 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
Oct 27 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
angular学习之动态创建表单的方法
Dec 07 Javascript
vue自定义正在加载动画的例子
Nov 14 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
Apr 09 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
Nov 02 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.ini中添加extension=php_mysqli.dll指令的说明
2007/06/14 PHP
用php获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
3个PHP多维数组转为一维数组的方法实例
2014/03/13 PHP
jquery控制listbox中项的移动并排序的实现代码
2010/09/28 Javascript
js实现日期级联效果
2014/01/23 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
JavaScript中创建字典对象(dictionary)实例
2015/03/31 Javascript
通过实例理解javascript中没有函数重载的概念
2015/06/03 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
2015/06/10 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
2016/06/20 Javascript
获取input标签的所有属性的方法
2016/06/28 Javascript
js中使用使用原型(prototype)定义方法的好处详解
2016/07/04 Javascript
微信小程序之绑定点击事件实例详解
2017/07/07 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
jQuery实现获取及设置CSS样式操作详解
2018/09/05 jQuery
vue实现图片按比例缩放问题操作
2020/08/11 Javascript
用python写一个windows下的定时关机脚本(推荐)
2017/03/21 Python
Python3编码问题 Unicode utf-8 bytes互转方法
2018/10/26 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
Python3.7安装pyaudio教程解析
2020/07/24 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
CSS图片翻转动画技术详解(IE也实现了)
2014/04/03 HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
我们是伦敦女孩:WalG
2018/01/08 全球购物
编辑硕士自荐信范文
2013/11/27 职场文书
精彩的广告词
2014/03/19 职场文书
毕业寄语大全
2014/04/09 职场文书
单位租房协议范本
2014/12/03 职场文书
新员工入职欢迎词
2015/01/23 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
辩论赛开场白大全(主持人+辩手)
2015/05/29 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
2015年公路路政个人工作总结
2015/07/24 职场文书
使用Pytorch训练two-head网络的操作
2021/05/28 Python