微信小程序-组件样式隔离

一.isolated

isolated是自定义组件.js的options对象字段styleIsolation的默认值,表示自定义组件和组件使用者之间的样式相互独立,互不影响。
写法:

  options:{
    //isolated默认值,开启样式隔离,使用者和自定义组件的样式相互不影响
    styleIsolation:"isolated"
}

二. apply-shared

apply-shared:组件使用者或者页面能影响自定义组件,但是自定义组件无法影响组件使用者

  options:{
    //apply-shared:组件使用者或者页面能影响自定义组件,但是自定义组件无法影响组件使用者
    styleIsolation:"apply-shared"
}

三.shared

shared:自定义组件和组件使用者的样式相互影响,影响范围涉及到其它使用了share和apply-share的自定义组件

  options:{
    //shared:自定义组件和组件使用者的样式相互影响,影响范围涉及到其它使用了share和apply-share的自定义组件
    styleIsolation:"shared""
}

在使用shared影响到的范围太广,我们可以通过命名空间进行范围限制。
比如在自定义checkbox组件的时候,在wxml文件里定义checkbox

<checkbox class="checkbox" checked="{{isCheck}}" 
bind:tap="update"></checkbox>

在scss文件里给checkbox设置样式的时候,可以使用命名空间就能确定具体组件的样式

.checkbox .wx-checkbox-input{
  width:24rpx !important;
  height: 24rpx !important;
  border-radius: 50% !important;
  border: 1px solid #fda007 !important;
  margin-top: -6rpx;
}

这样的话,在其他自定义组件或者页面使用checkbox就不会受到本次样式影响了

扩展:
关于checkbox的样式有三个固定的class选择器
.wx-checkbox-input:复选框未选中的样式
.wx-checkbox-input-checked:复选框选中的样式
.wx-checkbox-input.wx-checkbox-input-checked:before:复选框选中对号√的样式

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于Teager-Kaiser能量算子的肌电信号降噪方法(MATLAB)

Teager-Kaiser能量算子是一种非线性算子&#xff0c;它能有效提取信号的瞬时能量&#xff0c;对信号瞬时变化具有良好的时间分辨率。Teager-Kaiser能量算子只需信号三个采样点&#xff0c;即可快速跟踪信号的幅值和角频率变化&#xff0c;计算实现简单、运算量小。 clc clear a…

【 香橙派 AIpro评测】大语言模型实战教程:香橙派 AIpro部署LLMS大模型实站(保姆级教学)

引言 OrangePi AIpro 这块板子作为业界首款基于昇腾深度研发的AI开发板&#xff0c;一经发布本博主就火速去关注了&#xff0c;其配备的 8/20TOPS澎湃算力是目前开发板市场中所具备的最大算力&#xff0c;可谓是让我非常眼馋啊&#xff01;这么好的板子那必须拿来用用&#xff…

WPF 3D绘图 点云 系列五

基本概念:点云是某个坐标系下的点的数据集。 可能包含丰富的信息,包括三维坐标X,Y,Z、颜色、分类值、强度值、时间等等 点云可以将现实世界原子化,通过高精度的点云数据可以还原现实世界。万物皆点云。 通过三维激光扫描仪进行数据采集获取点云数据,其次通过二维影像进行…

初次使用GitHub教程入门

注册一个github账户 访问地址&#xff1a;https://github.com/&#xff0c;点击右上角sign up&#xff0c;录入以下信息&#xff0c;邮箱&#xff0c;密码&#xff0c;账号&#xff0c;会有邮箱验证&#xff0c;跟着步骤来就好了 配置 本机上设置你的github的邮箱和用户名 …

R语言学习,入门

我是一名6年开发经验的程序员&#xff0c;后端&#xff0c;大数据&#xff0c;前端都会。 现在加入了医疗行业&#xff0c;要做数据分析&#xff0c;前同事的实验室生信专业的&#xff0c;用的是R语言&#xff0c;为了跑通他的程序。就来学一下吧&#xff0c;看了一下好像挺简…

农村生活污水处理监测系统解决方案

一、概述 随着国民经济的发展和农村生活水平的提高&#xff0c;农村生活用水量越来越大&#xff0c;随之而来的污水产量也越来越大&#xff0c;农村生活污染对环境的压力越来越明显。环境保护意识的逐渐增强&#xff0c;使得人们对青山绿水的希望更为迫切&#xff0c;为满足人民…

Nordic 52832作为HID 键盘连接配对电视/投影后控制没反应问题的分析和解决

问题现象&#xff1a;我们的一款HID键盘硬件一直都工作的很好&#xff0c;连接配对后使用起来和原装键盘效果差不多&#xff0c;但是后面陆续有用户反馈家里的电视等蓝牙设备配对连接我们的键盘后&#xff0c;虽然显示已连接&#xff0c;但实际上控制不了。设备涉及到了好些品牌…

【操作与配置】VSCode配置Python及Jupyter

Python环境配置 可以参见&#xff1a;【操作与配置】Python&#xff1a;CondaPycharm_pycharmconda-CSDN博客 官网下载Python&#xff1a;http://www.python.org/download/官网下载Conda&#xff1a;Miniconda — Anaconda documentation VSCode插件安装 插件安装后需重启V…

layui-表格

1.使用方法 加上table标签 加上classlayui-table colgroup是列属性 tr是行td是列 thead是表头&#xff0c;后面一一对应 2.基础属性 加lay-even逐行换色 加lay-skin 设置边框风格

竞赛 深度学习+opencv+python实现昆虫识别 -图像识别 昆虫识别

文章目录 0 前言1 课题背景2 具体实现3 数据收集和处理3 卷积神经网络2.1卷积层2.2 池化层2.3 激活函数&#xff1a;2.4 全连接层2.5 使用tensorflow中keras模块实现卷积神经网络 4 MobileNetV2网络5 损失函数softmax 交叉熵5.1 softmax函数5.2 交叉熵损失函数 6 优化器SGD7 学…

企业多存储方式如何兼顾安全统一管理、便捷流畅访问的双向需求?

数据和文件存储是企业最基础的需求&#xff0c;常见的存储方式有磁盘存储、NAS存储、SAN存储、云存储、分布式存储、闪存存储等&#xff1b;随着企业规模的扩大、业务结构的复杂化&#xff0c;企业内部可能会同时出现多种存储方式、多个存储设备并行使用的情况。 这样的使用场景…

Ubuntu24.04(22.04+版本通用)Miniconda与Isaacgym

1. ubuntu24.04安装minicondda mkdir -p ~/miniconda3 wget https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.sh -O ~/miniconda3/miniconda.sh解释下这段代码 bash ~/miniconda3/miniconda.sh -b -u -p ~/miniconda3~/miniconda3/miniconda.sh: 指向Mi…

Meta 发布 Meta 3D Gen 文本生成3D模型

Meta推出了 Meta 3D Gen &#xff08;3DGen&#xff09;&#xff0c;这是一种用于文本到 3D 资产生成的最先进的快速管道。3DGen 可在一分钟内提供具有高提示保真度和高质量 3D 形状和纹理的 3D 资产创建。 它支持基于物理的渲染 &#xff08;PBR&#xff09;&#xff0c;这是…

【笔记】强化学习,gym的命令行图形化界面适配

搞了一大堆还是搞不出来放弃了 最后用matplotlib画出来看 import gym import matplotlib.pyplot as plt from IPython import display import numpy as np %matplotlib inlineenv gym.make(CartPole-v1, render_mode"rgb_array") observation env.reset() a 0 f…

新手教学系列——使用uWSGI对Flask应用提速

在构建和部署Flask应用时,性能和稳定性是两个关键的因素。为了提升Flask应用的性能,我们可以借助uWSGI这个强大的工具。本文将详细介绍为什么要使用uWSGI、uWSGI的底层原理,并提供一个实例配置,帮助你更好地理解和应用这个工具。 为什么要使用uWSGI uWSGI 是一个应用服务…

CentOS 7.9 快速更换 阿里云源教程

CentOS 7.9 更换源教程 总结 # 下载 wget yum -y install wget # 备份 yum 源 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.bak # 下载阿里云的yum源到 /etc/yum.repos.d/ # 此处以 CentOS 7 为例&#xff0c;如果是其它版本或者系统的话&#…

微软工具合集 -- Microsoft PowerToys v0.82.0

软件简介 PowerToys是由微软开发的一款免费系统工具集&#xff0c;专为Windows 10和Windows 11系统设计。它提供了一系列高效实用的工具&#xff0c;旨在帮助用户提升操作系统的使用效率和个性化程度。PowerToys工具集深受系统管理员和高级用户的喜爱&#xff0c;通过集成多种…

Laravel介绍与学习入门

Laravel 是一款优雅且功能强大的 PHP Web 开发框架&#xff0c;它被广泛认为是 PHP 领域内构建现代 Web 应用程序的最佳选择之一。Laravel 提供了一套简洁、富有表现力的语法&#xff0c;使得开发者能够高效地编写清晰、可维护的代码。以下是 Laravel 的一些关键特点和入门概念…

Java线程同步的特征和安全类型

一线程同步的特征 ◆不同的线程在执行以同一个对象作为锁标记的同步代码块或同步方法时&#xff0c;因为要获得这个对象的锁而相互牵制&#xff0c;多个并发线程访问同一资源的同步代码块或同步方法时。 ◆同一时刻只能有一个线程进入synchronized(this)同步代码块。 ◆当一个…

大数据开发如何快速进阶

目录 1. 个人经验与心得分享1.1 试错的价值与机会把握1.2 投入产出比的考量1.3 刻意练习与技能提升1.4 目标设定与职业规划1.5 自我驱动与成长1.6 第一性原理的应用 2. 大数据开发领域的挑战与机遇2.1 技术革新的挑战2.2 数据治理的难题2.3 人才短缺的问题2.4 投入产出比的考量…