微信小程序实现登录注册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 相关文章推荐
setTimeout和setInterval的浏览器兼容性分析
Feb 27 Javascript
lib.utf.js
Aug 21 Javascript
基于MooTools的很有创意的滚动条时钟动画
Nov 14 Javascript
jQuery cdn使用介绍
May 08 Javascript
使图片旋转的3种解决方案
Nov 21 Javascript
在myeclipse中如何加入jquery代码提示功能
Jun 03 Javascript
js实现百度登录框鼠标拖拽效果
Mar 07 Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 Javascript
react 国际化的实现代码示例
Sep 14 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
May 07 Javascript
Vue axios获取token临时令牌封装案例
Sep 11 Javascript
全面解析Vue中的$nextTick
Dec 24 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
2006/11/25 PHP
php中几种常见安全设置详解
2010/04/06 PHP
新手学习PHP的一些基础知识分享
2011/07/27 PHP
php防止网站被刷新的方法汇总
2014/12/01 PHP
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
php+Ajax无刷新验证用户名操作实例详解
2019/03/04 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
jquery ui resizable bug解决方法
2010/10/26 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
2013/07/08 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
2015/08/12 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
2015/12/03 Javascript
Javascript基础知识盲点总结之函数
2016/05/15 Javascript
javascript判断firebug是否开启的方法
2016/11/23 Javascript
javascript正则表达式模糊匹配IP地址功能示例
2017/01/06 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
React.js中常用的ES6写法总结(推荐)
2017/05/09 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
2017/08/21 Javascript
实例讲解Vue.js中router传参
2018/04/22 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
2019/07/21 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
js实现简单图片拖拽效果
2021/02/22 Javascript
pycharm 使用心得(二)设置字体大小
2014/06/05 Python
Python中的pack和unpack的使用
2018/03/12 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
浅谈Python中的全局锁(GIL)问题
2019/01/11 Python
Python aiohttp百万并发极限测试实例分析
2019/10/26 Python
Python调用Windows API函数编写录音机和音乐播放器功能
2020/01/05 Python
Django重设Admin密码过程解析
2020/02/10 Python
给交警的表扬信
2014/01/12 职场文书
应届毕业生应聘自荐信范文
2014/02/26 职场文书
热门专业求职信
2014/05/24 职场文书
运动会开幕式新闻稿
2015/07/17 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫