微信小程序实现登录注册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 相关文章推荐
Javascript下的keyCode键码值表
Apr 10 Javascript
$.format,jquery.format 使用说明
Jul 13 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
Dec 02 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
Nov 03 Javascript
JavaScript中的Math.LOG2E属性使用详解
Jun 14 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
Sep 24 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
Oct 23 Javascript
jQuery实现的自定义滚动条实例详解
Sep 20 Javascript
详解jQuery的表单验证插件--Validation
Dec 21 Javascript
vue教程之toast弹框全局调用示例详解
Aug 24 Javascript
基于vue配置axios的方法步骤
Nov 09 Javascript
javaScript实现游戏倒计时功能
Nov 17 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接口和抽象类使用示例详解
2014/03/02 PHP
PHP PDOStatement::bindParam讲解
2019/01/30 PHP
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
2011/05/02 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
jQuery+ajax实现动态执行脚本的方法
2015/01/27 Javascript
JavaScript插件化开发教程 (四)
2015/01/27 Javascript
JS动画效果打开、关闭层的实现方法
2015/05/09 Javascript
JavaScript对象学习小结
2015/09/02 Javascript
第三篇Bootstrap网格基础
2016/06/21 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
简单谈谈ES6的六个小特性
2016/11/18 Javascript
AngularJS学习笔记之表单验证功能实例详解
2017/07/06 Javascript
vue移动端UI框架实现QQ侧边菜单组件
2018/03/09 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
jquery向后台提交数组的代码分析
2020/02/20 jQuery
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
Python实现windows下模拟按键和鼠标点击的方法
2015/03/13 Python
Windows下Python使用Pandas模块操作Excel文件的教程
2016/05/31 Python
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
Python模拟百度自动输入搜索功能的实例
2019/02/14 Python
解决Django一个表单对应多个按钮的问题
2019/07/18 Python
在Pytorch中使用样本权重(sample_weight)的正确方法
2019/08/17 Python
Python多进程编程常用方法解析
2020/03/26 Python
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
.NET面试题:什么是值类型和引用类型
2016/01/12 面试题
互联网创业计划书写作技巧攻略
2014/03/23 职场文书
团委竞选演讲稿
2014/04/24 职场文书
要账委托书范本
2014/09/15 职场文书
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
隐形的翅膀观后感
2015/06/10 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书
Python自动化测试PO模型封装过程详解
2021/06/22 Python
一文彻底理解js原生语法prototype,__proto__和constructor
2021/10/24 Javascript
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript