微信小程序（三）常见组件_微信小程序 css attr-CSDN博客

本文链接：https://blog.csdn.net/YogaLin_qwq/article/details/107642967

常见组件

view

相当于web里的div标签

text

1.文本标签

2.只能嵌套text

3.长按文字可以复制（只有该标签有这个功能）

4.可以对空格(&nbsp)回车进行编码

在这里插入图片描述

 <text selectable="{
    {false}}" decode="{
    {false}}">
     普&nbsp;通  
</text>

`img`

|默认宽度320px、⾼度240px

|支持懒加载（延时加载，即当对象需要用到的时候再去加载，当图片出现在视口上下三屏之内时 => 开始加载）

在这里插入图片描述

|mode有13种模式：4种缩放模式，9种裁剪模式

aspectFit：常用于轮播图

在这里插入图片描述

`swiper`

|微信内置轮播图组件，滑块视图容器（最外部）

|默认样式：width：100% height：150px => 无法实现由内容撑开

|等比例计算swiper的高度（适应屏幕）：swiper高度 = swiper宽度*原图高度/原图宽度 然后图片的mode属性选择widthFix

| swiper-item：每一个轮播项，默认宽度和⾼度都是100%

|其他属性

在这里插入图片描述

navigator

导航组件类似超链接标签 => 块级元素可以换行

|target：self跳转自身小程序；miniProgram跳转其他小程序

在这里插入图片描述

|open-type的有效值

在这里插入图片描述

rich-text

|富文本标签，可以将字符串解析成对应标签，类似vue中v-html 功能

| nodes属性支持字符串和标签节点数组

在这里插入图片描述

|文本标签type = text

|特别注意：

1.nodes不推荐使用string类型，性能会下降

2.rich-text组件内屏蔽所有节点的事件

3.attrs不支持id，支持class

4.name对大小写不敏感

5.如果使用的不受信任的html的节点，该节点的所有子节点将会被移除

6.img标签仅支持网络图片

<rich-text nodes="{
    {nodes}}" bindtap="tap"></rich-text> 
<!--{
   {nodes}}与js中的nodes对应-->

// 1 标签字符串 => 常用
page({
   
    data:{
   
        nodes:'<img src="https://developers.weixin.qq.com/miniprogram/assets/images/head_global_z_@all.png" alt="