微信小程序实现登录注册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的并行运算实现代码
Nov 19 Javascript
jQuery中的编程范式详解
Dec 15 Javascript
浅谈js 闭包引起的内存泄露问题
Jun 22 Javascript
jQuery.trim() 函数及trim()用法详解
Oct 26 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
Jun 24 Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 Javascript
Angular2学习教程之ng中变更检测问题详解
May 28 Javascript
薪资那么高的Web前端必看书单
Oct 13 Javascript
mint-ui在vue中的使用示例
Apr 05 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
Sep 03 Javascript
在vue中使用Echarts画曲线图的示例
Oct 03 Javascript
微信小程序实现天气预报功能(附源码)
Dec 10 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读取3389的脚本
2014/05/06 PHP
php实现QQ小程序发送模板消息功能
2019/09/18 PHP
解析arp病毒背后利用的Javascript技术附解密方法
2007/08/06 Javascript
Jquery validation remote 验证的缓存问题解决方法
2014/03/25 Javascript
JavaScript中获取样式的原生方法小结
2014/10/08 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
2015/11/18 Javascript
JS实现队列与堆栈的方法
2016/04/21 Javascript
浅谈JavaScript 中有关时间对象的方法
2016/08/15 Javascript
AngularJs bootstrap搭载前台框架——准备工作
2016/09/01 Javascript
获取select的value、text值的简单示例(jquery与javascript)
2016/12/07 Javascript
js实现PC端和移动端刮卡效果
2020/03/27 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
2017/05/08 Javascript
js自定义trim函数实现删除两端空格功能
2018/02/09 Javascript
微信小程序登录换取token的教程
2018/05/31 Javascript
Layui 设置select下拉框自动选中某项的方法
2018/08/14 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
2019/01/21 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
2020/04/21 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
2020/11/10 Javascript
Python实现Const详解
2015/01/27 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
详解Python pygame安装过程笔记
2017/06/05 Python
详谈python read readline readlines的区别
2017/09/22 Python
Python探索之自定义实现线程池
2017/10/27 Python
解决pip install的时候报错timed out的问题
2018/06/12 Python
Python基础之文件读取的讲解
2019/02/16 Python
django使用django-apscheduler 实现定时任务的例子
2019/07/20 Python
python实现简单学生信息管理系统
2020/04/09 Python
python3获取控制台输入的数据的具体实例
2020/08/16 Python
如何实现一个自定义类的序列化
2012/05/22 面试题
以太网Ethernet IEEE802.3
2013/08/05 面试题
汽车专业毕业生推荐信
2013/11/12 职场文书
记者岗位职责
2014/01/06 职场文书
航海技术专业毕业生求职信
2014/04/06 职场文书
《荷花》教学反思
2014/04/16 职场文书
撤诉书怎么写
2015/05/19 职场文书
小数乘法教学反思
2016/02/22 职场文书