微信小程序实现登录注册tab切换效果
作者：进阶的码农 发布时间：2024-04-29 13:11:29
标签：微信小程序,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 () {
}
})
来源：https://blog.csdn.net/wangguang1995/article/details/79790828
0
投稿猜你喜欢
- 中间件是一个钩子框架，它们可以介入 Django 的请求和响应处理过程。 它是一个轻量级、底层的 插件 系统，用于在 全局修改 Django
- 本文旨在讲述 RPC 框架设计中的几个核心问题及其解决方法，并基于 Golang 反射技术，构建了一个简易的 RPC 框架。项目地址：Tin
- 使用T_SQL创建数据库 TestSchool 创建一个学生表 TblStudent 创建学生成绩表 TblScore q tScoreId
昨天还和裕波沟通我没有准备ppt，想以另一种互动的方式来交流。后来想想，每个人都准备了，我不准备也不太好意思，呵呵。今天在webrebuil- 一、insert语句insert用于向表中输入数据，其具体的语法结构如下。INSERT INTO 表名称 VALUES (值1, 值2,..
- 有很多原因需要控制用户访问站点的某部分。一个简单原始的限制方法是检查 request.user.is_authenticated() ,然后
- 本文实例讲述了Python简明入门教程。分享给大家供大家参考。具体如下：一、基本概念1、数在Python中有4种类型的数——整数、长整数、浮
- 这几天在QQ群里知道了几个比较好的优化方面的站，感觉看高手的文章简直就是一种享受。和很多现在正在阅读这篇文章的站长一样，我即将毕业，但是还没
- 名片管理系统有两个模块组成：cards_main.py 和 cards_tools.py一个是主程序，另一个是封装增删改查函数的被调用程序代
- 状态模式状态模式，当对象的内部状态发生了改变的时候，允许对象执行不同的流程。优点：封装了状态转换规则。枚举了可能的状态，在枚举状态之前需要确
- 怎么增大MySQL数据库连接数，MYSQL数据库安装完成后，默认连接数是100，流量稍微大一点的论坛或网站这个连接数是不够哟用
- 方法一、使用os模块的system方法os.system（cmd），其返回值是shell指令运行后返回的状态码，int类型，0--表示she
- 将el-switch值true、false改为number类型的1和0需求描述后端传回的status值为1（number类型）对应el-sw
- 目录Java的数据库连接(JDBC)1、什么是JDBC2、JDBC的原理3、演示JDBC的使用4、数据库连接方式5、JDBC的查询6、SQL
- root账户为MySQL的超级管理员用户，拥有MySQL提供的所有权限。我们登录了root账户可以重置其它创建的所有用户的密码，那么root
- 首先，单表的UPDATE语句：UPDATE [LOW_PRIORITY] [IGNORE] tbl_nameSET col_name1=ex
- 自开始做项目以来，一直在用。这段存储过程的的原创者（SORRY，忘记名字了），写得这段SQL代码很不错，我在这个基础上，按照我的习惯以及思维
- GUID（Global unique identifier）全局唯一标识符，它是由网卡上的标识数字(每个网卡都有唯一的标
- 基于python3基础课程，编写名片管理系统训练，有利于熟悉python基础代码的使用。cards_main.py#! /usr/bin/p
- Python安装selenium包打开命令行窗口，进入python交互环境python尝试导入selenium包，报错，说明尚未安装sele
