微信小程序实现登录注册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 相关文章推荐
Mozilla 表达式 __noSuchMethod__
Apr 05 Javascript
javascript Onunload与Onbeforeunload使用小结
Dec 31 Javascript
jQuery实现长按按钮触发事件的方法
Feb 02 Javascript
jQuery源码解读之addClass()方法分析
Feb 20 Javascript
酷炫jQuery全屏3D焦点图动画效果
Mar 22 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
Aug 14 Javascript
基于BootStrap的文本编辑器组件Summernote
Oct 27 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
Mar 06 Javascript
vue.js数据绑定操作详解
Apr 23 Javascript
详解vue-cli中模拟数据的两种方法
Jul 03 Javascript
封装微信小程序http拦截器过程解析
Aug 13 Javascript
微信小程序实现上传照片代码实例解析
Aug 04 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
我的论坛源代码(五)
2006/10/09 PHP
PHP中Date()时间日期函数的使用方法小结
2011/04/20 PHP
ThinkPHP中ajax使用实例教程
2014/08/22 PHP
PHP自动重命名文件实现方法
2014/11/04 PHP
用tip解决Ext列宽度不够的问题
2008/12/13 Javascript
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
js 判断脚本加载完毕的代码
2011/07/13 Javascript
使用VS开发 Node.js指南
2015/01/06 Javascript
Javascript毫秒数用法实例
2015/02/05 Javascript
使用Node.js处理前端代码文件的编码问题
2016/02/16 Javascript
基于jquery实现智能提示控件intellSeach.js
2016/03/17 Javascript
走进AngularJs之过滤器(filter)详解
2017/02/17 Javascript
JS实现匀加速与匀减速运动的方法示例
2017/09/04 Javascript
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
vue-cli 引入、配置axios的方法
2018/05/08 Javascript
Vue 组件参数校验与非props特性的方法
2019/02/12 Javascript
详解vue中在父组件点击按钮触发子组件的事件
2020/11/13 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
[01:46]辉夜杯—打造中国DOTA新格局
2015/12/25 DOTA
详解python如何调用C/C++底层库与互相传值
2016/08/10 Python
TensorFLow用Saver保存和恢复变量
2018/03/10 Python
python set内置函数的具体使用
2019/07/02 Python
python爬虫 urllib模块反爬虫机制UA详解
2019/08/20 Python
英国香水店:The Perfume Shop
2017/03/27 全球购物
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
BASIC HOUSE官方旗舰店:韩国著名的服装品牌
2018/09/27 全球购物
毕业生的自我鉴定该怎么写
2013/12/02 职场文书
政协调研汇报材料
2014/08/15 职场文书
债务授权委托书范本
2014/10/17 职场文书
党员活动总结
2015/02/04 职场文书
综合实践活动报告
2015/02/05 职场文书
研究生给导师的自荐信
2015/03/06 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
2015年环卫处个人工作总结
2015/07/27 职场文书
Pygame Event事件模块的详细示例
2021/11/17 Python