当前位置: 首页 > news >正文

微信小程序wxss定位/选择/查找元素的几种方式

wxss定位、选择、查找元素的几种方式与css类似,下面介绍常用的几种:

选择器样例样例描述
.class.intro选择所有拥有 class="intro" 的组件
#id#firstname选择拥有 id="firstname" 的组件
elementview选择所有 view 组件
element, elementview, checkbox选择所有文档的 view 组件和所有的 checkbox 组件

下面是样例:

wxml:

<view class="tool" id="tool-id"><view>绘制展厅</view><view>制作展会名片</view><view>签到</view><view>抽奖</view><view>礼品领取</view>
</view>

wxss:

/*使用class进行选择*/
.tool{display: flex;flex-wrap: wrap;justify-content: center;
}/*使用id进行选择*/
#tool-id{width: 200rpx;height: 200rpx;background-color: rgba(0, 162, 255, 0.514);border-radius: 10rpx;display: flex;align-items: center;justify-content: center;text-align: center;color: white;font-size: large;font-weight: bold;margin: 10rpx;
}/*使用框架容器类型进行选择,选择所有view*/
view{}

xcss支持组合筛选,使用空格分开,如下:

/*选择的是.tool元素下所有的view容器*/
.tool view{width: 200rpx;height: 200rpx;background-color: rgba(0, 162, 255, 0.514);border-radius: 10rpx;display: flex;align-items: center;justify-content: center;text-align: center;color: white;font-size: large;font-weight: bold;margin: 10rpx;
}

 欢迎关注我获取更多微信小程序教程!

http://www.lryc.cn/news/230625.html

相关文章:

  • Canvas—从入门到案例实现
  • 飞书开发学习笔记(六)-网页应用免登
  • 【ROS】Nav2源码下载、编译、运行
  • 微信小程序 30分钟倒计时功能
  • JAVA判断指定日期是否在指定的时间段内
  • 关于晋升与跳槽的一些思考
  • url找不到404的问题,url被拼接
  • 如何解决golang开发中遇到的报错:checksum mismatch downloaded
  • 4.以docker容器生成镜像推送到阿里云镜像仓库
  • CSS Form表单布局
  • c++ shared_mutex 读写锁使用详解
  • 淘宝商品详情接口,淘宝详情页接口,宝贝详情页接口,商品属性接口,商品信息查询,商品详细信息接口,h5详情,淘宝API接口演示案例
  • python爬取网站数据,作为后端数据
  • 【机器学习】K近邻算法:原理、实例应用(红酒分类预测)
  • 基于安卓android微信小程序的快递取件及上门服务系统
  • leetCode 92.反转链表 II + 图解
  • 【MongoDB】索引 – 通配符索引
  • python安装pip install报错Could not fetch URL https://pypi.org/simple/pip/...更换镜像源
  • C++ 算数运算符 学习资料
  • 问题 H: 棋盘游戏(二分图变式)
  • SQL 主从数据库实时备份
  • C/C++:在#define中使用参数
  • Hive 查询优化
  • 【Java 进阶篇】JQuery 案例:优雅的隔行换色
  • Redis 常用的类型和 API
  • 在qt的设计师界面没有QVTKOpenGLWidget这个类,只有QOpenGLWidget,那么我们如何得到QVTKOpenGLWidget呢?
  • 力扣每日一道系列 --- LeetCode 138. 随机链表的复制
  • 无人零售:创新优势与广阔前景
  • 【华为OD题库-022】阿里巴巴找黄金宝箱(IV)-java
  • Linux 图形界面配置RAID