微信小程序实现登录注册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初学者需要了解10个小技巧
Aug 25 Javascript
Extjs Gird 支持中文拼音排序实现代码
Apr 15 Javascript
原生javascript实现自动更新的时间日期
Feb 12 Javascript
JavaScript Array对象详解
Mar 01 Javascript
jQuery简单创建节点的方法
Sep 09 Javascript
js实现3D图片展示效果
Mar 09 Javascript
javascript 中事件冒泡和事件捕获机制的详解
Sep 01 Javascript
javascript+html5+css3自定义弹出窗口效果
Oct 26 Javascript
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
element ui table(表格)实现点击一行展开功能
Dec 04 Javascript
微信小程序实现同一页面取值的方法分析
Apr 30 Javascript
前端性能优化建议
Sep 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
利用phpexcel把excel导入数据库和数据库导出excel实现
2014/01/09 PHP
php快递单号查询接口使用示例
2014/05/05 PHP
Chrome Web App开发小结
2014/09/04 PHP
php获取网站百度快照日期的方法
2015/07/29 PHP
laravel 判断查询数据库返回值的例子
2019/10/11 PHP
JS处理VBArray的函数使用说明
2008/05/11 Javascript
javascript页面动态显示时间变化示例代码
2013/12/18 Javascript
浅谈JS中json数据的处理
2016/06/30 Javascript
JavaScript prototype属性详解
2016/10/25 Javascript
canvas的神奇用法
2017/02/03 Javascript
vue高德地图之玩转周边
2017/06/16 Javascript
学习Vue组件实例
2018/04/28 Javascript
加快Vue项目的开发速度的方法
2018/12/12 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
2020/03/03 Javascript
原生js实现自定义消息提示框
2020/11/19 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
python学习手册中的python多态示例代码
2014/01/21 Python
Python连接MySQL并使用fetchall()方法过滤特殊字符
2016/03/13 Python
Python3.4 tkinter,PIL图片转换
2018/06/21 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
解决Python pandas plot输出图形中显示中文乱码问题
2018/12/12 Python
Python实现TCP探测目标服务路由轨迹的原理与方法详解
2019/09/04 Python
python 两个数据库postgresql对比
2019/10/21 Python
python打印文件的前几行或最后几行教程
2020/02/13 Python
python matplotlib包图像配色方案分享
2020/03/14 Python
python数据处理——对pandas进行数据变频或插值实例
2020/04/22 Python
python爬虫搭配起Bilibili唧唧的流程分析
2020/12/01 Python
凯特方迪化妆品官网:Kat Von D Beauty
2016/11/15 全球购物
生物科学系大学生的自我评价
2013/12/20 职场文书
大学四年个人的自我评价
2014/02/26 职场文书
个人投资计划书
2014/05/01 职场文书
复兴之路纪录片观后感
2015/06/02 职场文书
公司仓库管理制度
2015/08/04 职场文书
你为什么是穷人?可能是这5个缺点造成
2019/07/11 职场文书
一篇文章学会Vue中间件管道
2021/06/20 Vue.js
MySQL系列之三 基础篇
2021/07/02 MySQL