uniapp动态切换显示不同内容组件

简介: 通过点击注册或是登录按钮切换不同的组件.默认显示登陆界面,登录字样加粗显示,登录页面显示手机号密码登录.

需求描述


   通过点击注册或是登录按钮切换不同的组件.默认显示登陆界面,登录字样加粗显示,登录页面显示手机号密码登录.点击注册切换到注册页面,注册字样加粗显示,页面显示手机号和验证码以及注册按钮.对应页面显示如下:

a3374586f7a43165c402d402d226386b_beb701a336fb43819c91bfb7f74af0bb.png


e9cddeac627dd657dd0314bfcedb794c_759cb01623d1490780a58ef36863e71e.png

实现代码


<template>
  <view class="content">
  <view class="index">
    <view class="titleClass">
    <view class="loginClass" @click="showLoginFunction" :style="{fontWeight:loginFontWeight}">登录</view>
    <view class="registerClass" @click="showRegisterFunction" :style="{fontWeight:registerFontWeight}">注册</view>
    </view>
    <view class="login" v-if="showLogin">
    <view class="login_mobile">
      <input class="login_mobile_input" type="number" placeholder="请输入手机号" />
    </view>
    <view class="login_password">
      <input class="login_password_input" type="number" placeholder="请输入密码" />
    </view>
    <button class="login_button" type="default">登录</button>
    </view>
    <view class="register" v-if="!showLogin" >
    <view class="register_mobile">
      <input class="register_mobile_input" type="number" placeholder="请输入手机号" />
    </view>
    <view class="register_code">
      <input class="register_code_input" type="number" placeholder="请输入校验码" />
    </view>
    <button class="register_button" type="default">注册</button>
    </view>
  </view>
  </view>
</template>
<script>
  export default {
  data() {
    return {
    // 控制登录或是注册是否显示
    showLogin:true,
    // 登录或注册按钮是否加粗
    loginFontWeight: 'bold',
    registerFontWeight: ''
    }
  },
  onLoad() {
  },
  methods: {
    // 显示登陆信息
    showLoginFunction(){
    this.showLogin=true,
    this.loginFontWeight='bold'  // 设置登录字体加粗
    this.registerFontWeight=''
    },
    // 显示注册页
    showRegisterFunction(){
    this.showLogin=false
    this.loginFontWeight=''  // 设置登录字体加粗
    this.registerFontWeight='bold'
    }
  }
  }
</script>
<style>
  .titleClass{
  display: flex;  
  justify-content: space-between;  // 均匀排列登录和注册
  }
  .login_mobile,.login_password,.register_mobile,.register_code{
  display: flex;    // 水平放置
  margin-top: 10px;   // 距离上面10px
  }
  .login_button,.register_button{
  margin-top: 10px;   // 距离上面10px
  justify-content: center;  // 登录或注册字样水平居中
  }
  .login_mobile_input,.login_password_input,.register_mobile_input,.register_code_input{
  width: 220px;
  height: 40px;
  border: 2px #C8C7CC solid;   // 设置边框
  border-radius:15px;         // 设置圆角
  padding: 5px 2px 5px 10px;  // 文本框输入内容边距:上右下左
  }
  .content {
  margin-top: 200px;  // 主页面距离上面的距离
  display: flex;
  justify-content: center;  // 内容水平居中
  }
</style>

总结一下实现过程中需要处理的样式:

   1.点击登录或是注册进行切换显示不同的文本框.

   使用v-if进行控制不同的view进行显示.

   2.登录以及注册按钮显示在一行中并分别进行左右对齐

   实现效果借助justify-content: space-between;来实现,其余效果可以参考:

https://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=space-between

   3.点击登录或是注册将对应的字体变更为加粗

   data中设置样式加粗字段,动态设置style属性.fontWeight:bold用于设置字体加粗.

   4.注册或是登录页面中每个文本输入框中间间隔一定距离显示,文本框中输入的内容设置一定的边距.

   使用margin-top设置每个view之间的距离,文本框中使用padding设置文本输入内容与文本框的间距.文本框圆角设置通过border-radius:15px;进行设置.


相关文章
|
20天前
|
数据挖掘
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
43 10
|
20天前
|
搜索推荐 JavaScript 数据可视化
uniapp/vue个性化单选、复选组件
uniapp/vue个性化单选、复选组件
56 5
|
18天前
|
数据可视化 大数据 API
低代码可视化开发-uniapp新闻跑马灯组件-代码生成器
低代码可视化开发-uniapp新闻跑马灯组件-代码生成器
49 2
|
18天前
|
存储 API 数据库
uniapp APP自动更新组件
uniapp APP自动更新组件
41 1
|
23天前
Uniapp矩阵评分组件
Uniapp矩阵评分组件
45 1
|
4天前
|
移动开发 编解码 数据可视化
低代码可视化-uniapp SliderRange区间组件-代码生成器
SliderRange区间组件是一种用户界面元素,允许用户通过拖动滑块选择数值范围。组件支持微信小程序、H5和App,具有高度可定制性、响应式设计和多种事件处理功能。适用于价格筛选、音量调节等场景。代码实现包括滑动区域、滑块、事件处理等部分,支持可视化配置步长、颜色等属性。使用时需注意选择合适步长、提供清晰标签和考虑无障碍设计。
22 0
|
20天前
|
编解码 数据可视化 API
DIY可视化UniApp表格组件
DIY可视化UniApp表格组件
26 0
|
23天前
|
机器学习/深度学习 算法 数据可视化
UniApp手机滑块验证组件代码生成器
UniApp手机滑块验证组件代码生成器
43 0
|
23天前
|
前端开发 JavaScript
uniapp纯CSS实现圆形进度条组件
uniapp纯CSS实现圆形进度条组件
64 0
|
4月前
|
移动开发 前端开发 小程序
uniapp内置组件uni.navigateTo跳转后页面空白问题解决
【7月更文挑战第1天】uniapp内置组件uni.navigateTo跳转后页面空白问题解决
99 4