微信小程序实现登录注册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将NodeList作为Array数组处理的方法
Jul 09 Javascript
jQuery.buildFragment使用方法及思路分析
Jan 07 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 Javascript
Javascript 浮点运算的问题分析与解决方法
Aug 27 Javascript
js事件监听机制(事件捕获)总结
Aug 08 Javascript
Javascript中arguments和arguments.callee的区别浅析
Apr 24 Javascript
jQuery获取同级元素的简单代码
Jul 09 Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
May 07 Javascript
JS将时间秒转换成天小时分钟秒的字符串
Jul 10 Javascript
vue实现单一筛选、删除筛选条件
Oct 26 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命名空间(Namespace)简明教程
2014/06/11 PHP
利用php生成验证码
2017/02/23 PHP
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
2014/09/06 Javascript
jQuery的css()方法用法实例
2014/12/24 Javascript
js实现Select下拉框具有输入功能的方法
2015/02/06 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
JS实现左右无缝轮播图代码
2016/05/01 Javascript
基于JavaScript实现多级菜单效果
2017/07/25 Javascript
Angular在模板驱动表单中自定义校验器的方法
2017/08/09 Javascript
使用 vue-i18n 切换中英文效果
2018/05/23 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
vue代码分割的实现(codesplit)
2018/11/13 Javascript
如何使用 vue + d3 画一棵树
2018/12/03 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
2019/09/17 Javascript
vue-iview动态新增和删除的方法
2020/06/17 Javascript
Ant-design-vue Table组件customRow属性的使用说明
2020/10/28 Javascript
[56:56]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
pycharm安装和首次使用教程
2018/08/27 Python
Python中fnmatch模块的使用详情
2018/11/30 Python
python实现QQ邮箱发送邮件
2020/03/06 Python
python实现3D地图可视化
2020/03/25 Python
Python xml、字典、json、类四种数据类型如何实现互相转换
2020/05/27 Python
使用scrapy ImagesPipeline爬取图片资源的示例代码
2020/09/28 Python
详解Python中Pyyaml模块的使用
2020/10/08 Python
HTML5上传文件显示进度的实现代码
2012/08/30 HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
最好的意大利皮夹克:D’Arienzo
2018/12/04 全球购物
在什么时候需要使用"常引用"
2015/12/31 面试题
技术比武方案
2014/05/19 职场文书
关于青春的演讲稿三分钟
2014/08/22 职场文书
三八节活动简报
2015/07/20 职场文书
客户答谢会致辞
2015/07/30 职场文书
JVM之方法返回地址详解
2022/02/28 Java/Android