quickapp_快应用_某些css样式不兼容问题

样式问题

        • 引入css样式文件
        • [1] 单位
          • px
        • [2]选择器
        • [3]盒模型
        • [4]样式布局-默认弹性布局且不可取消
        • [5-1]样式切换-类名的动态切换-语法
        • [5-2]样式切换 - 类名的动态切换-目标元素
        • [5-3] 样式切换 - 行内样式动态切换
        • [6]background
        • [7]overflow
        • [8]border-radius
        • [9]盒子阴影
        • [10] 定位
          • error-层级导致点击事件被覆盖

在快应用中不能使用html(使用html直接不显示),需要使用快应用组件进行内容显示。

样式虽然使用的是css,但是组件支持的css属性有所不同,比如没有任何一个快应用组件支持overflow这个css属性。

因此我们按照之前开发web页面的方式去编写快应用页面,就会有一些所谓的样式兼容性问题

接下来就是按照我们之前编写web页面的一些习惯 针对一些不兼容样式进行说明~

引入css样式文件
@import './style.css';
[1] 单位

在快应用中,单位仅支持px、dp、%

px

快应用的px单位与传统 web 页面不同,px是相对于项目配置基准宽度的单位,已经适配了移动端屏幕,其原理类似于rem

config.designWidth 中定义项目配置基准宽度,默认750

设计稿1px / 设计稿基准宽度 = 框架样式1px / 项目配置基准宽度

也就是说项目配置基准宽度设置为设计稿基准宽度之后, 框架样式1px = 设计稿1px (不需转换即可使用并且适配移动端屏幕)!

"config": {"designWidth": 750
}
[2]选择器
  • 支持标签选择器、类选择器、id选择器,暂不支持其它选择器;
  • 继承:不支持样式继承(注意字体之类的样式);
[3]盒模型

快应用布局框架使用 border-box 模型,暂不支持 手动指定 box-sizing 属性(快应用中只能使用border-box 盒模型不能使用content-box盒模型)。

[4]样式布局-默认弹性布局且不可取消

在快应用中组件默认采用的都是 弹性布局的方式进行布局。

  • 弹性布局不可以取消 ! ===> 在快应用中display只有flex与none取值情况,

      display: flex ; // 弹性布局display: none; //  消失
    
  • 若是不想子元素在一行排列 可以使用修改主轴方向

      flex-direction: column;
    
  • 注意:在弹性布局中 ===> 若是子元素的高度/宽度总和大于父元素的高度或宽度,不会出现滚动条,而是子元素的宽/高 收缩。

    若是需要使用滚动条,可以使用list组件!

[5-1]样式切换-类名的动态切换-语法

在vue中 是用动态类名使用的是指令,如下

<text :class="activeTag==index ? 'activetag' : ''" for='(index, item) in tags'>{{item}}</text>

而在快应用中使用动态类名使用的是{{}},如下

<text class="{{activeTag==index ? 'activetag' : ''}}" for='(index, item) in tags'>{{item}}</text>
[5-2]样式切换 - 类名的动态切换-目标元素

在很多情况下,我们需要通过动态切换类型来改变元素的的样式,在快应用中注意,切换类名时,类名必须在目标元素上,不然没效果!
比如设置在父元素上

.active{text{color: red; // 没效果}
}

我给text的父元素添加active类名然后修改text元素文本的颜色,但是发现没有效果;但是把类名动态添加在text标签上就发现样式可以正常切换了。

.active{color:red;
}
[5-3] 样式切换 - 行内样式动态切换

行内样式不支持动态编写 ----> 可以使用computed或methods

 <div style='{{background-image:url(imgurl)}}' class='www'></div>
  private:{imgurl: 'https://martin-upload.wcar.net.cn/web/2021/11/6bbf95698459f15b0050cb0d8e9e3484.png'}

上述代码不能正常显示图片,个人猜测是因为识别不出变量imgurl,若是想样式中的数据动态切换,可以采用computed与methods

  <div style="{{returnStatusImage()}}"  class='www'></div>
private: {text: '快应用是什么?',status:0
},
returnStatusImage() {switch (this.status) {case 0:return 'background-image:url(https://martin-upload.wcar.net.cn/web/2021/11/6bbf95698459f15b0050cb0d8e9e3484.png)'break;case 1:return 'background-image:url(https://martin-upload.wcar.net.cn/web/2021/11/07167f84c6dbf2679a6b1744acdd6ae9.png)'break;case 2:return 'background-image:url(https://martin-upload.wcar.net.cn/web/2021/11/743cbd9439d241cb6c8af9aeb85b312e.png)' break;case 3:return 'background-image:url(https://martin-upload.wcar.net.cn/web/2021/12/5459fe6f0978ca211dc7034b903547c2.png)'break;case -1:return 'background-image:url(https://martin-upload.wcar.net.cn/web/2021/12/5459fe6f0978ca211dc7034b903547c2.png)'break;case 4:return 'background-image:url(https://martin-upload.wcar.net.cn/web/2022/02/9ff11fe02d56737ed45dec1ff626a194.jpg)'break;default:return 'background-image:url(https://martin-upload.wcar.net.cn/web/2021/11/6bbf95698459f15b0050cb0d8e9e3484.png)'}},
[6]background
  • 在快应用中background属性的作用是用来设置渐变色的,不能作为背景的复合属性。
    • 起作用
      background: linear-gradient(53deg, #F0E6D5 0%, #F0DFC3 100%);
      
    • 无作用
      background: red;
      
    • 若是想设置颜色使用background-color
      background-color:red;
      
  • span组件添加背景色不起作用!若是想要设置背景色不要使用span组件(span不支持背景样式设置)
[7]overflow

快应用中, css不支持overflow样式,因此无法设置超出滚动或显示!

[1] 若是想在组件内滑动可以使用list组件

[2] 若是希望子节点能够超出父节点显示,不会被父节点裁剪,在1100+版本在元素上添加了overflow属性

<div overflow='visible'></div>

但是经过检验,目前在模拟器上没有问题,但是真机超过父组件的部分还是会被隐藏!
在这里插入图片描述
那像上图所示应该如何设置呢?

[8]border-radius

在快应用中border-radius只接受一个值作为属性值

  • 若是设置2/3/4个值,则会报出警告
    border-radius:30px 20px 10px 0; // 四个圆角都会设置为30px
    
    不支持30px 20px 10px 0作为单位,在编译时会将第一个值后面的值看作为单位
  • 设置4个一样的值
    border-radius:30px 20px 10px 0; // 四个圆角都会设置为30px
    
  • 若是想四个圆角弧度不一致
    border-top-left-radius:30px; // 左上
    border-top-right-radius:30px; // 右上
    border-bottom-left-radius:30px; //  左下
    border-bottom-right-radius:30px; // 右下
    
[9]盒子阴影

快应用中不支持盒子阴影。

[10] 定位

在web页面的css中,定位的层级是通过z-index来控制的,z-index属性的属性值数值越大,则层级越高。

在快应用的css中,定位的层级是根据组件在template中的顺序决定的,后来者居上,写在后面的组件会将写在前面的组件覆盖掉。

error-层级导致点击事件被覆盖

在这里插入图片描述
如上图的自定义titleBar
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
渲染之后样式没问题,点击左侧按钮发现没有返回并且没有走返回方法!

原因:因为在快应用中的层级讲究后来者居上和定位没有关系,text标签在image标签后面,因此text标签覆盖了image导致image标签的事件不起作用!

解决: 只需要将text标签与image标签换一个顺序即可!

<div class='titlebar'><text>设置</text><image src="https://img.iwave.net.cn/other/5f3f779274fbe300917c54ba94dc9797.png" @click='back'></image>
</div>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/169829.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【调度算法】开放车间调度问题遗传算法(failed)

省流&#xff1a;这是一个错误的代码备份&#xff0c;如果你需要可以直接运行的完整代码&#xff0c;请移步GitHub。 本以为手搓了一个单机调度和并行机调度的遗传算法&#xff0c;就可以尝试写开放车间的遗传算法了&#xff0c;结果手搓了两天&#xff0c;开始作业时间和结束…

1、Mysql架构与历史

Mysql逻辑架构 最上层是服务并不是Mysql所独有的&#xff0c;大多数基于网络的客户端/服务器的工具或者服务都有类似的架构&#xff0c;比如连接处理&#xff0c;授权认证&#xff0c;安全等。 第二层是Mysql比较有意思的部分。大多数Mysql的核心服务都在这一层&#xff0c;…

torch.view()和.reshape()

view只能作用在连续的张量上&#xff08;张量中元素的内存地址是连续的&#xff09;。而reshape连续or非连续都可以。 调用x.reshape的时候&#xff0c;如果x在内存中是连续的&#xff0c;那么x.reshape会返回一个view&#xff08;原地修改&#xff0c;此时内存地址不变…

用户与组管理:如何在服务器系统中管理用户和权限

你是否想过&#xff0c;当你登录到一个服务器系统时&#xff0c;你是如何被识别和授权的&#xff1f;你是否知道&#xff0c;你可以通过创建和管理用户和组来简化和优化你的系统管理工作&#xff1f;你是否想了解一些常用的用户和组管理命令和技巧&#xff1f;如果你的答案是肯…

c语言实现简单的string

文章目录 前言一、注意事项二、代码valgrind扫描总结 前言 在c语言中利用面向对象的编程方式&#xff0c;实现类似c中的string类。 一、注意事项 所有与string结构体相关的函数全都没有返回值。 在c中&#xff0c;当产生临时对象时编译器会自动的加入析构函数&#xff0c;销毁…

Walrus 入门教程:如何创建模板以沉淀可复用的团队最佳实践

模板是 Walrus 的核心功能之一&#xff0c;模板创建完成后用户可以重复使用&#xff0c;并在使用过程中逐渐沉淀研发和运维团队的最佳实践&#xff0c;进一步简化服务及资源的部署。用户可以使用 HCL 语言自定义创建模板&#xff0c;也可以一键复用 Terraform 社区中上万个成熟…

云原生安全工具汇总(docker、k8s、Kubernetes、Git仓库)

目录 Metarget:云原生靶机环境 CDK:容器环境定制的渗透测试工具 container-escape-check:容器逃逸检测

synchronized在代码中的用法

synchronized可以对两种对象加锁&#xff1a;实例对象和类对象。下边先说对类对象加锁的代码&#xff1a; 第1是修饰static方法&#xff0c;第2种是直接锁类的class对象&#xff1b; /*** title: SynchronizedStaticDemo1* description: synchronized 对类加锁1* author: * d…

【Python百宝箱】Python数据探险:Excel与数据科学的完美结合

前言 在当今信息爆炸的时代&#xff0c;数据处理和分析已经成为各行各业不可或缺的一部分。在众多数据处理工具中&#xff0c;Python以其简洁而强大的语法成为数据科学家和分析师的首选之一。本文将深入探讨与电子表格处理相关的Python库&#xff0c;介绍它们的功能、应用场景…

批量按顺序1、2、3...重命名所有文件夹里的文件

最新&#xff1a; 最快方法&#xff1a;先用这个教程http://文件重命名1,2......nhttps://jingyan.baidu.com/article/495ba841281b7079b20ede2c.html再用这个教程去空格&#xff1a;利用批处理去掉文件名中的空格-百度经验 (baidu.com) 以下为原回答 注意文件名有空格会失败…

LeetCode Hot100 105.从前序与中序遍历序列构造二叉树

题目&#xff1a;给定两个整数数组 preorder 和 inorder &#xff0c;其中 preorder 是二叉树的先序遍历&#xff0c; inorder 是同一棵树的中序遍历&#xff0c;请构造二叉树并返回其根节点。 代码&#xff1a; class Solution {private Map<Integer, Integer> indexM…

ESP32网络开发实例-远程Web串口监视器

远程Web串口监视器 文章目录 远程Web串口监视器1、应用介绍2、软件准备3、硬件准备4、代码实现在本文中,我们将构建一个 ESP32 网络服务器,用作远程串行监视器。 基于 Web 的串行监视器的工作方式与通常用于调试目的的 Arduino IDE 串行监视器的工作方式相同。 1、应用介绍 …

数字逻辑电路基础-时序逻辑电路之移位寄存器

文章目录 一、移位寄存器定义二、verilog源码三、仿真结果一、移位寄存器定义 移位寄存器定义 A shift register is a type of digital circuit using a cascade of flip flops where the output of one flip-flop is connected to the input of the next. 移位寄存器是一种将…

docker部署MySQL5.7设置密码和远程访问的方法

运行MySQL docker run -p 3306:3306 --name mysql57 -v /root/mysql/log:/var/log/mysql -v /root/mysql/data:/var/lib/mysql -v /root/mysql/conf:/etc/mysql/conf.d -e MYSQL_ROOT_PASSWORDD7txumqc2b! -d mysql:5.7 --character-set-serverutf8mb4 --collation-serverutf8…

c++八股文记录

八股文 1.类和结构体的区别 在 C 中&#xff0c;类&#xff08;class&#xff09;和结构体&#xff08;struct&#xff09;在语法上几乎是相同的&#xff0c;唯一的区别是默认的访问权限。在结构体中&#xff0c;默认的访问权限是公有的&#xff08;public&#xff09;&#x…

基于51单片机超市快递寄存自动柜设计源程序

一、系统方案 1、本设计采用这51单片机作为主控器。 2、存包&#xff0c;GSM短信取件码。 3、液晶1620显示。 4、矩阵键盘输入取件码&#xff0c;完成取包。 二、硬件设计 原理图如下&#xff1a; 三、单片机软件设计 1、首先是系统初始化 /******************************…

python基于flask_sockets实现WebSocket

WebSocket是啥&#xff1f; WebSocket是HTML5引入的新的通信协议&#xff0c;主要由Web客户端和服务器实现&#xff0c;当然它也可以在Web之外实现。 与HTTP连接不同&#xff0c;WebSocket连接是客户端和服务器之间永久的双向通信通道&#xff0c;其中任何一个都可以启动交换。…

量子计算的发展

目录 一、量子力学的发展历程二、量子计算的发展历程三、量子计算机的发展历程四、量子信息科学的发展 一、量子力学的发展历程 量子力学是现代物理学的一个基本分支&#xff0c;它的发展始于20世纪初。以下是量子力学发展的几个重要阶段&#xff1a; 普朗克&#xff08;1900&…

steam搬砖还能做吗?CSGO饰品未来走势如何?

steam/csgo搬砖项目真能月入过万吗&#xff1f;到底真的假的&#xff1f; 如何看待CSGO饰品市场的整体走向&#xff1f; 从整体来说&#xff0c;CSGO的饰品市场与规模肯定会持续不断的上升&#xff0c;大盘不会发生特别大的波动&#xff0c;目前处于稳定期&#xff01;&#x…

WGCLOUD 中文繁体版本 下载

wgcloud 繁体版下载 下載繁體版安裝包 - WGCLOUD