首页 > 其他分享 >【快应用】组件如何页面底部显示

【快应用】组件如何页面底部显示

时间:2023-05-05 10:01:58浏览次数:37  
标签:flex postion 底部 组件 fixed 页面

【关键词】

底部、postion

 

【问题背景】

快应用中某个组件如果要实现在页面底部展示,该如何实现呢?

 

【实现方法】

可以通过设置postion为fixed,再设置margin-top属性和bottom属性来将组件在页面底部显示。

方法一:设置postion为fixed,bottom为0px

<template>
  <div class="container">
    <input type="button" value="ceshi" class="btn" style="position: fixed; bottom: 0px" />
  </div>
</template>
<style>
  .container {
    flex: 1;
    flex-direction: column;
  }
  .btn {
    width: 80%;
    background-color: #23ec2d;
    border: 1px solid #000000;
  }
</style>

截图:

cke_3087.png​​

方法二:设置postion为fixed,margin-top为屏幕的高度减去组件的高度。这种方法需要拿到屏幕高度才能进行设置,代码上更复杂一些,推荐使用第一种方式来实现。

<template>
  <div class="container">
    <input type="button" value="ceshi" class="btn" style="position: fixed; margin-top: 1330px" />
  </div>
</template>
<style>
  .container {
    flex: 1;
    flex-direction: column;
  }
  .btn {
    width: 80%;
    background-color: #23ec2d;
    border: 1px solid #000000;
  }
</style>

截图:

 

 

 欲了解更多更全技术文章,欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh​

标签:flex,postion,底部,组件,fixed,页面
From: https://www.cnblogs.com/developer-huawei/p/17373243.html

相关文章

  • Swift下Data处理全流程:从网络下载,数模转换,本地缓存到页面使用
    Swift下将网络返回json数据转换成struct假如网络请求返回的数据结构是一个深层嵌套的Json首先要通过key-value取出这个json中的数据源//将返回的json字符串转Dictoryletjson="""{"name":"jack","age":20,"description":"Astudent."......
  • Django内置序列化组件(drf前身)和批量操作数据加上分页器
    目录一、django内置序列化组件(drf前身)这里的内置序列化组件,其实就是实现将后端数据,存放到字典中或是存放到列表中有序输出。方式一这里是我们用JsonResponse模块自己实现的代码'''前后端分离的项目视图函数只需要返回json格式的数据即可'''fromapp01importmodelsfr......
  • Vue3 h函数渲染组件
    1、渲染ElSelect组件constmodulleFilters=ref([{label:1,value:2},{label:2,value:3},]);constsearch=ref('');consttableColumn=[{prop:'module',label:'模块',headerRender:()=>h(......
  • react 用父组件状态控制子组件状态方案
    react想用父组件的状态来控制子组件的状态。有时我们可能想在父组件里设置子组件某个状态的值,这时我们应该怎么实现代码呢?法一:把需要共享的状态放在子组件的参数里比如下面这个MyTestSubModal子组件,有2个状态:visible和loading,分别使用setVisible和setLoading来控制,不......
  • vue this.$router.push 页面传值问题
    在修改一个别人的bug的时候发现一个问题,记录一下,vue前端页面在刷新页面后只读页面可以编辑了在前一个传值页面他的写法是this.$router.push({name:'xxx',query:{isEdit:false}});在接收的时候写的是this.isEdit=this......
  • 2-web-UI-页面元素的识别
    1、元素识别元素的定位和操作是自动化测试的核心部分,其中操作又是建立在定位的基础上的,web对象识别的元素一定要是唯一的,通过【唯一】区别于其它元素的属性来定位这个元素。元素识别:1、利用Chrome浏览器开发者工具:1)打开Chrome浏览器,按F12或依次点击菜单—更多......
  • 一条SQL如何被MySQL架构中的各个组件操作执行的?
    摘要:一条SQL如何被MySQL架构中的各个组件操作执行的,执行器做了什么?存储引擎做了什么?表关联查询是怎么在存储引擎和执行器被分步执行的?本文带你探探究竟!本文分享自华为云社区《一条SQL如何被MySQL架构中的各个组件操作执行的?》,作者:砖业洋__。1.单表查询SQL在MySQL架构中的各个组......
  • 直播电商平台开发,环形进度条组件
    直播电商平台开发,环形进度条组件 <template> <divclass="content"ref="box">  <svg   :id="idStr"   style="transform:rotate(-90deg)"   :width="width"   :height="width"   xmlns=&......
  • 关于OKD(OpenShift)中组件资源介绍和命令行操作的一些笔记
    写在前面参加考试,会陆续分享一些OpenShift的笔记博文内容为openshift常见API资源对象介绍,包括所特有的Route,IS,DC,BC等。学习环境为openshiftv3的版本,有些旧这里如果专门学习openshift,建议学习v4版本理解不足小伙伴帮忙指正傍晚时分,你坐在屋檐下,看着天慢慢地黑下去,心......
  • python+playwright 学习-24 判断页面元素状态的几种方式
    前言在操作元素之前,可以先判断元素的状态。判断元素操作状态也可以用于断言。常用的元素判断方法page对象调用的判断方法,传一个selector定位参数page.is_checked(selector:str)#checkboxorradio是否选中page.is_disabled(selector:str)#元素是否可以点击或编辑page.i......