微信小程序实现登录注册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 相关文章推荐
js实现同一页面可多次调用的图片幻灯切换效果
Feb 28 Javascript
JavaScript获取页面中表单(form)数量的方法
Apr 03 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
Sep 04 Javascript
jQuery如何使用自动触发事件trigger
Nov 29 Javascript
用file标签实现多图文件上传预览
Feb 14 Javascript
js装饰设计模式学习心得
Feb 17 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
Aug 28 Javascript
this.$toast() 了解一下?
Apr 18 Javascript
Vue实现按钮级权限方案
Nov 21 Javascript
js实现超级玛丽小游戏
Mar 18 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
Oct 02 Javascript
Vue+Flask实现图片传输功能
Apr 01 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和redis实现秒杀活动的流程
2019/07/17 PHP
Laravel实现批量更新多条数据
2020/04/06 PHP
nginx 设置多个站跨域
2021/03/09 Servers
动态表格Table类的实现
2009/08/26 Javascript
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
JavaScript全排列的六种算法 具体实现
2013/06/29 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
2013/12/09 Javascript
在JS数组特定索引处指定位置插入元素
2014/07/27 Javascript
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
jQuery实现移动端滑块拖动选择数字效果
2015/12/24 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
详解NodeJS Https HSM双向认证实现
2019/03/12 NodeJs
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
2019/09/16 Javascript
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
在Django中编写模版节点及注册标签的方法
2015/07/20 Python
在Python的Flask框架中构建Web表单的教程
2016/06/04 Python
Python中死锁的形成示例及死锁情况的防止
2016/06/14 Python
Python自动化测试ConfigParser模块读写配置文件
2016/08/15 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
Python建立Map写Excel表实例解析
2018/01/17 Python
Python元组知识点总结
2019/02/18 Python
利用PyCharm Profile分析异步爬虫效率详解
2019/05/08 Python
python基于json文件实现的gearman任务自动重启代码实例
2019/08/13 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
Python实现一个简单的毕业生信息管理系统的示例代码
2020/06/08 Python
Flask中sqlalchemy模块的实例用法
2020/08/02 Python
python利用opencv保存、播放视频
2020/11/02 Python
基于Python的接口自动化读写excel文件的方法
2021/01/15 Python
个性大学生自我评价
2013/12/04 职场文书
诉讼授权委托书范本
2014/10/05 职场文书
党员个人批评与自我批评
2014/10/14 职场文书
先进班组事迹材料
2014/12/25 职场文书
高中生综合素质自我评价
2015/03/06 职场文书
nginx日志格式分析和修改
2022/04/28 Servers
Redis 报错 error:NOAUTH Authentication required
2022/05/15 Redis