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

小程序常用样式和组件

news 2025/9/24 9:29:39

常用样式和组件

1. 组件和样式介绍

在开 Web 网站的时候：

页面的结构由 HTML 进行编写，例如：经常会用到 div、p、 span、img、a 等标签

页面的样式由 CSS 进行编写，例如：经常会采用 .class 、#id 、element 等选择器

但在小程序中不能使用 HTML 标签，也就没有 DOM 和 BOM，同时仅仅支持部分 CSS选择器

不过不用担心，小程序中提供了同样的角色：

其中 WXML 充当的就是类似 HTML 的角色，只不过在 WXML 中没有div、p、 span、img、a 等标签，在 WXML 中需要使用 小程序提供的 view、text 、image、navigator 等标签来构建页面结构，小程序提供的这些标签，我们称为 "组件"，开发者可以通过组合这些基础组件进行快速开发。

WXSS 则充当的就是类似 CSS 的角色，WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改，新增了尺寸单位 rpx、提供了全局的样式和局部样式，另外需要注意的是WXSS 仅支持部分 CSS 选择器。

小程序给提供的组件文档：WXML

小程序样式官方文档：WXSS

2. 样式-尺寸单位

随着智能手机的发展，手机设备的宽度也逐渐多元化，这就需要开发者在开发的时候，需要适配不同屏幕宽度的手机。为了解决屏幕适配的问题，微信小程序推出了 rpx 单位

小程序运行在手机移动端，宿主环境是微信，因为手机尺寸的不一致，在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，会采用一些技巧来算像素单位从而实现页面的适配。而 WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可。

rpx: 小程序新增的拓展单位，可以根据屏幕宽度进行自适应，小程序规定任何型号手机：屏幕宽都为 750 rpx。

📌 注意事项：

小程序规定任何型号手机：屏幕宽都为 750 rpx

🔔 开发建议：

开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

iPhone6 的设计稿一般是 750px，小程序的宽是 750rpx

在我们开发小程序页面时，量取多少 px ，直接写多少 rpx，开发起来更方便，也能够适配屏幕的适配

原因：

设计稿宽度是 750px，而 iPhone6 的手机设备宽度是 375px， 设计稿想完整展示到手机中，就需要缩小一倍

在 iPhone6 下，px 和 rpx 的换算关系是：1rpx = 0.5px， 750rpx = 375px，刚好能够填充满整个屏幕的宽度

落地代码：

➡️ pages/index/index.wxml

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500"><!-- 需求：绘制一个盒子，让盒子的宽度占据屏幕的一半 --></span>
​
<span style="color:#aa5500"><!-- view 是小程序提供的组件，是容器组件，类似于 div，也是一个块级元素，占据一行 --></span>
<span style="color:#aa5500"><!-- 如果想实现需求，不能使用 px，px 使固定单位，不能实现自适应，需要使用小程序提供的 rpx  --></span>
<span style="color:#aa5500"><!-- 微信小程序规定，不管是什么型号的手机，屏幕的宽度都是 750rpx --></span>
<span style="color:#aa5500"><!-- rpx 单位能够实现自适应的 --></span>
<span style="color:#117700"><</span><span style="color:#117700">view</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"box"</span><span style="color:#117700">></span>尚硅谷<span style="color:#117700"></</span><span style="color:#117700">view</span><span style="color:#117700">></span></span></span>

➡️ pages/index/index.wxss

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500">/* 通过演示使用 css 作为单位，px 是不具有响应式的 */</span>
​
<span style="color:#aa5500">/* image {</span>
<span style="color:#aa5500">  width: 375px;</span>
<span style="color:#aa5500">  height: 600px;</span>
<span style="color:#aa5500">  background-color: lightgreen;</span>
<span style="color:#aa5500">} */</span>
​
<span style="color:#555555">.box</span> {<span style="color:#000000">width</span>: <span style="color:#116644">375rpx</span>;<span style="color:#000000">height</span>: <span style="color:#116644">600rpx</span>;<span style="color:#000000">background-color</span>: <span style="color:#770088">lightgreen</span>;
}
​</span></span>

3. 样式-全局样式和局部样式

在进行网页开发时，我们经常创建 global.css、base.css 或者 reset.css 作为全局样式文件进行重置样式或者样式统一，然后在每个页面或组件中写当前页面或组件的局部样式，小程序中也存在全局样式和局部样式，这一节我们来学习一下小程序中的全局样式和局部样式

知识点：

全局样式：指在 app.wxss中定义的样式规则，作用于每一个页面，例如：设置字号、背景色、宽高等全局样式

局部样式：指在page.wxss中定义的样式规则，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

案例：

在 app.wxss 中定义全局样式，设置 text 组件的颜色以及字号大小，这段样式将会作用于任意页面的 text 组件

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500">/* app.wxss */</span>
​
<span style="color:#117700">text</span> {<span style="color:#000000">color</span>: <span style="color:#770088">lightseagreen</span>;<span style="color:#000000">font-size</span>: <span style="color:#116644">50rpx</span>;
}
​</span></span>

然后在 cate.wxss 中定义局部样式，设置 text 组件的颜色以及字号大小，会发现局部样式将全局样式进行了覆盖

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500">/* pages/index/index.wxss */</span>
​
<span style="color:#117700">text</span> {<span style="color:#000000">color</span>: <span style="color:#770088">red</span>;<span style="color:#000000">font-size</span>: <span style="color:#116644">30rpx</span>;
}
​</span></span>

4. 划分页面结构-view 组件

使用小程序常用的组件实现项目首页的效果，会使用以下组件：

1.view 组件

2.text 组件

3.image 组件

4.navigator 组件

5.swiper 和 swiper-item 组件

6.scroll-view 组件

7.字体图标

分析页面结构，使用 view 组件将页面拆分成 4 个区域

view 是小程序提供的组件，是容器组件，类似于 div，也是一个块级元素，占据一行

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500"><!-- 轮播图区域 --></span>
<span style="color:#117700"><</span><span style="color:#117700">view</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"swiper"</span><span style="color:#117700">></span>1<span style="color:#117700"></</span><span style="color:#117700">view</span><span style="color:#117700">></span>
​
<span style="color:#aa5500"><!-- 公司相关信息 --></span>
<span style="color:#117700"><</span><span style="color:#117700">view</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"info"</span><span style="color:#117700">></span>2<span style="color:#117700"></</span><span style="color:#117700">view</span><span style="color:#117700">></span>
​
<span style="color:#aa5500"><!-- 商品导航区域 --></span>
<span style="color:#117700"><</span><span style="color:#117700">view</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"goods-nav"</span><span style="color:#117700">></span>3<span style="color:#117700"></</span><span style="color:#117700">view</span><span style="color:#117700">></span>
​
<span style="color:#aa5500"><!-- 商品推荐区域 --></span>
<span style="color:#117700"><</span><span style="color:#117700">view</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"hot"</span><span style="color:#117700">></span>4<span style="color:#117700"></</span><span style="color:#117700">view</span><span style="color:#117700">></span>
​</span></span>

5. 首页轮播图区域-swiper 组件

在前面我们已经介绍了小程序的组件应该怎么使用，又学习了小程序中的样式，接下来带着大家使用小程序提供的组件，完成小程序的基本结构，通过这个案例我们能够学习到小程序常用的组件以及一些布局技巧。

知识点：

在进行网页开发的时候，实现轮播图的时候，我们通常先使用 HTML 、CSS 实现轮播图的样式结构，然后使用 JS 控制轮播图的效果，或者直接使用插件实现轮播图的功能，而在小程序中实现小程序功能则相对简单很多。

在小程序中，提供了 swiper 和 swiper-item 组件实现轮播图：

  1. swiper：滑块视图容器，常用来实现轮播图，其中只可放置 swiper-item 组件，否则会导致未定义的行为

  2. swiper-item：仅可放置在swiper组件中，宽高自动设置为100%，代表 swiper 中的每一项

我们可以使用 swiper 组件提供的属性，实现轮播图的订制，常见属性如下：

属性说明类型
indicator-dots是否显示面板指示点boolean (默认 false)
indicator-color指示点颜色color (默认：rgba(0, 0, 0, .3))
indicator-active-color当前选中的指示点颜色color (默认：#000000)
autoplay是否自动切换boolean (默认 false)
interval自动切换时间间隔number (默认 5000)
circular是否采用衔接滑动boolean (默认 false)
其他属性...

落地代码：

➡️ pages/index/index.wxml

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500"><!-- 轮播图区域 --></span>
<span style="color:#117700"><</span><span style="color:#117700">view</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"swiper"</span><span style="color:#117700">></span><span style="color:#aa5500"><!-- swiper 组件实现轮播图区域的绘制 --></span><span style="color:#aa5500"><!-- swiper 组件，滑块视图容器 --></span><span style="color:#117700"><</span><span style="color:#117700">swiper</span><span style="color:#0000cc">circular</span><span style="color:#0000cc">autoplay</span><span style="color:#0000cc">indicator-dots</span><span style="color:#0000cc">interval</span>=<span style="color:#aa1111">"2000"</span><span style="color:#0000cc">indicator-color</span>=<span style="color:#aa1111">"#efefef"</span><span style="color:#0000cc">indicator-active-color</span>=<span style="color:#aa1111">"#ccc"</span><span style="color:#117700">></span><span style="color:#aa5500"><!-- swiper 组件内部不能写其他组件或内容 --></span><span style="color:#aa5500"><!-- 在 swiper 组件内部只能写 swiper-item 组件 --></span><span style="color:#aa5500"><!-- swiper-item 组件只能放到 swiper 组件中，宽高自动设置为 100% --></span><span style="color:#117700"><</span><span style="color:#117700">swiper-item</span><span style="color:#117700">></span>第一张轮播图<span style="color:#117700"></</span><span style="color:#117700">swiper-item</span><span style="color:#117700">></span>
​<span style="color:#117700"><</span><span style="color:#117700">swiper-item</span><span style="color:#117700">></span>第二张轮播图<span style="color:#117700"></</span><span style="color:#117700">swiper-item</span><span style="color:#117700">></span>
​<span style="color:#117700"><</span><span style="color:#117700">swiper-item</span><span style="color:#117700">></span>第三张轮播图<span style="color:#117700"></</span><span style="color:#117700">swiper-item</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">swiper</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">view</span><span style="color:#117700">></span></span></span>

➡️ pages/index/index.scss

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700">page</span> {<span style="color:#000000">height</span>: <span style="color:#116644">100vh</span>;<span style="color:#000000">background-color</span>: <span style="color:#221199">#efefef</span> <span style="color:#770088">!important</span>;
}
​
<span style="color:#117700">swiper</span> {<span style="color:#000000">swiper-item</span> {
​// 在 <span style="color:#000000">Sass</span> 拓展语言中，& 符号表示父选择器的引用。它用于在嵌套的选择器中引用父选择器// 下面这段代码在编译以后，生成的代码是 <span style="color:#000000">swiper-item</span>:<span style="color:#000000">first-child</span>&:<span style="color:#000000">first-child</span> {<span style="color:#000000">background-color</span>: <span style="color:#770088">skyblue</span>;}
​&:<span style="color:#008855">nth-child</span>(<span style="color:#116644">2</span>) {<span style="color:#000000">background-color</span>: <span style="color:#770088">lightcoral</span>;}
​&:<span style="color:#008855">last-child</span> {<span style="color:#000000">background-color</span>: <span style="color:#770088">lightseagreen</span>;}}
}</span></span>

6. 首页轮播图区域-image 组件

在这一节中，我们开始来学习小程序中的image组件，通过学习该组件掌握组件的学习方法和使用技巧

在小程序中没有 img 标签，添加图片需要使用小程序提供的image组件，image组件的语法如下：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500"><!-- src：图片资源地址 --></span>
<span style="color:#aa5500"><!-- mode：图片裁剪、缩放的模式 --></span>
<span style="color:#aa5500"><!-- lazy-load：图片懒加载，在即将进入一定范围（上下三屏）时才开始加载 --></span>
<span style="color:#117700"><</span><span style="color:#117700">image</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"/assets/tom.png"</span> <span style="color:#0000cc">mode</span>=<span style="color:#aa1111">"heightFix"</span> <span style="color:#0000cc">lazy-load</span>=<span style="color:#aa1111">”{{</span> <span style="color:#0000cc">true</span> <span style="color:#0000cc">}}“</span> <span style="color:#117700">/></span></span></span>

落地代码

➡️ pages/index/index.wxml

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500"><!-- 轮播图区域 --></span>
<span style="color:#117700"><</span><span style="color:#117700">view</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"swiper"</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">swiper</span><span style="color:#0000cc">circular</span><span style="color:#0000cc">autoplay</span><span style="color:#0000cc">indicator-dots</span><span style="color:#0000cc">interval</span>=<span style="color:#aa1111">"2000"</span><span style="color:#0000cc">indicator-color</span>=<span style="color:#aa1111">"#efefef"</span><span style="color:#0000cc">indicator-active-color</span>=<span style="color:#aa1111">"#ccc"</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">swiper-item</span><span style="color:#117700">></span><span style="color:#aa5500"><!-- 在小程序中图片不能使用 img 标签，使用后不会生效 --></span><span style="color:#aa5500"><!-- <img src="../../assets/banner/banner-1.png" alt=""/> --></span>
​<span style="color:#aa5500"><!-- 需要使用 images 组件 --></span><span style="color:#aa5500"><!-- image 组件不给 src 属性设置默认值，也占据宽和高 --></span><span style="color:#aa5500"><!-- image 默认具有宽度，宽是 320px 高度是 240px --></span>
​<span style="color:#aa5500"><!-- mode 属性：用来设置图片的裁切模式、纵横比例、显示的位置 --></span><span style="color:#aa5500"><!-- show-menu-by-longpress 属性：长按转发给朋友、收藏、保存图片 --></span><span style="color:#117700"><</span><span style="color:#117700">image</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"../../assets/banner/banner-1.png"</span> <span style="color:#0000cc">mode</span>=<span style="color:#aa1111">"aspectFill"</span> <span style="color:#0000cc">show-menu-by-longpress</span> <span style="color:#117700">/></span><span style="color:#117700"></</span><span style="color:#117700">swiper-item</span><span style="color:#117700">></span>
​<span style="color:#117700"><</span><span style="color:#117700">swiper-item</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">image</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"../../assets/banner/banner-2.png"</span> <span style="color:#117700">/></span><span style="color:#117700"></</span><span style="color:#117700">swiper-item</span><span style="color:#117700">></span>
​<span style="color:#117700"><</span><span style="color:#117700">swiper-item</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">image</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"../../assets/banner/banner-3.png"</span> <span style="color:#117700">/></span><span style="color:#117700"></</span><span style="color:#117700">swiper-item</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">swiper</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">view</span><span style="color:#117700">></span>
​</span></span>

➡️ pages/index/index.scss

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500">/** index.wxss **/</span>
<span style="color:#117700">page</span> {<span style="color:#000000">height</span>: <span style="color:#116644">100vh</span>;<span style="color:#000000">background-color</span>: <span style="color:#221199">#efefef</span> <span style="color:#770088">!important</span>;
}
​
<span style="color:#117700">swiper</span> {<span style="color:#000000">height</span>: <span style="color:#116644">360rpx</span>;
​<span style="color:#117700">swiper-item</span> {<span style="color:#117700">image</span> {<span style="color:#000000">width</span>: <span style="color:#116644">100%</span>;<span style="color:#000000">height</span>: <span style="color:#116644">100%</span>;}
​<span style="color:#aa5500">// 在 Sass 拓展语言中，& 符号表示父选择器的引用。它用于在嵌套的选择器中引用父选择器</span><span style="color:#aa5500">// 下面这段代码在编译以后，生成的代码是 swiper-item:first-child</span><span style="color:#aa5500">// &:first-child {</span><span style="color:#aa5500">//   background-color: skyblue;</span><span style="color:#aa5500">// }</span>
​<span style="color:#aa5500">// &:nth-child(2) {</span><span style="color:#aa5500">//   background-color: lightcoral;</span><span style="color:#aa5500">// }</span>
​<span style="color:#aa5500">// &:last-child {</span><span style="color:#aa5500">//   background-color: lightseagreen;</span><span style="color:#aa5500">// }</span>}
}</span></span>

7. 公司宣传语区域-text 组件

落地代码：

➡️ pages/index/index.wxml

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500"><!-- 公司相关信息 --></span>
<span style="color:#117700"><</span><span style="color:#117700">view</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"info"</span><span style="color:#117700">></span><span style="color:#aa5500"><!-- text 是文本组件，类似于 span，是行内元素 --></span>
​<span style="color:#aa5500"><!-- user-select：文本是否可选 --></span><span style="color:#aa5500"><!-- space：是否连续展示空格 --></span><span style="color:#aa5500"><!-- <text user-select space="ensp">同城        配送</text> --></span>
​<span style="color:#117700"><</span><span style="color:#117700">text</span><span style="color:#117700">></span>同城配送<span style="color:#117700"></</span><span style="color:#117700">text</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">text</span><span style="color:#117700">></span>行业龙头<span style="color:#117700"></</span><span style="color:#117700">text</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">text</span><span style="color:#117700">></span>半小时送达<span style="color:#117700"></</span><span style="color:#117700">text</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">text</span><span style="color:#117700">></span>100% 好评<span style="color:#117700"></</span><span style="color:#117700">text</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">view</span><span style="color:#117700">></span></span></span>

➡️ pages/index/index.scss

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#555555">.info</span> {<span style="color:#000000">display</span>: <span style="color:#221199">flex</span>;<span style="color:#000000">justify-content</span>: <span style="color:#221199">space-between</span>;<span style="color:#000000">align-items</span>: <span style="color:#221199">center</span>;<span style="color:#000000">margin</span>: <span style="color:#116644">16rpx</span> <span style="color:#116644">0rpx</span>;<span style="color:#000000">padding</span>: <span style="color:#116644">20rpx</span>;<span style="color:#000000">font-size</span>: <span style="color:#116644">24rpx</span>;<span style="color:#000000">background-color</span>: <span style="color:#221199">#fff</span>;<span style="color:#000000">border-radius</span>: <span style="color:#116644">10rpx</span>;
}</span></span>

8. 商品导航的区域-组件结合使用

到目前为止我们已经学习了 view 、text、image 以及 swiper 和 swiper-item组件的使用

接下来我们继续来使用小程序提供的组件实现首页的功能，这节我们需要实现的是商品导航区域的结构

知识点：

在网页开发中，实现该布局非常简单，使用 div 嵌套 或者 ul 包裹住 li，li 在包裹住 img 就能够实现该效果

但在小程序中没有 HTML 中的 div、ul、li 标签，所以绘制导航区域需要使用小程序提供的的组件，我们先来学习小程序的两个组件：

  1. view：视图容器组件，相当于 HTML 中的 div，是一个块级元素，独占一行

  2. text：文本组件，相当于 span，是一个行内元素

落地代码：

➡️ pages/index/index.wxml

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500"><!-- view：视图容器，作用类似于 div，是一个块级元素，独占一行 --></span>
<span style="color:#117700"><</span><span style="color:#117700">view</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"navs"</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">view</span><span style="color:#117700">></span><span style="color:#aa5500"><!-- text：文本组件，类似于 span，是一个行内元素 --></span><span style="color:#117700"><</span><span style="color:#117700">image</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"/assets/cate-1.png"</span> <span style="color:#0000cc">alt</span>=<span style="color:#aa1111">""</span><span style="color:#117700">/></span><span style="color:#117700"><</span><span style="color:#117700">text</span><span style="color:#117700">></span>爱礼精选<span style="color:#117700"></</span><span style="color:#117700">text</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">view</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">view</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">image</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"/assets/cate-2.png"</span> <span style="color:#0000cc">alt</span>=<span style="color:#aa1111">""</span><span style="color:#117700">/></span><span style="color:#117700"><</span><span style="color:#117700">text</span><span style="color:#117700">></span>鲜花玫瑰<span style="color:#117700"></</span><span style="color:#117700">text</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">view</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">view</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">image</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"/assets/cate-3.png"</span> <span style="color:#0000cc">alt</span>=<span style="color:#aa1111">""</span><span style="color:#117700">/></span><span style="color:#117700"><</span><span style="color:#117700">text</span><span style="color:#117700">></span>永生玫瑰<span style="color:#117700"></</span><span style="color:#117700">text</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">view</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">view</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">image</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"/assets/cate-4.png"</span> <span style="color:#0000cc">alt</span>=<span style="color:#aa1111">""</span><span style="color:#117700">/></span><span style="color:#117700"><</span><span style="color:#117700">text</span><span style="color:#117700">></span>玫瑰珠宝<span style="color:#117700"></</span><span style="color:#117700">text</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">view</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">view</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">image</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"/assets/cate-5.png"</span> <span style="color:#0000cc">alt</span>=<span style="color:#aa1111">""</span><span style="color:#117700">/></span><span style="color:#117700"><</span><span style="color:#117700">text</span><span style="color:#117700">></span>香水护体<span style="color:#117700"></</span><span style="color:#117700">text</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">view</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">view</span><span style="color:#117700">></span></span></span>

➡️ pages/index/index.wxss

<span style="background-color:#f8f8f8"><span style="color:#333333">// 商品导航区域
<span style="color:#555555">.good-nav</span> {<span style="color:#000000">display</span>: <span style="color:#221199">flex</span>;<span style="color:#000000">justify-content</span>: <span style="color:#221199">space-between</span>;<span style="color:#000000">background-color</span>: <span style="color:#221199">#fff</span>;<span style="color:#000000">padding</span>: <span style="color:#116644">20rpx</span> <span style="color:#116644">16rpx</span>;<span style="color:#000000">border-radius</span>: <span style="color:#116644">10rpx</span>;
​<span style="color:#000000">view</span> {<span style="color:#000000">display</span>: <span style="color:#221199">flex</span>;<span style="color:#000000">flex-direction</span>: <span style="color:#221199">column</span>;<span style="color:#000000">align-items</span>: <span style="color:#221199">center</span>;
​<span style="color:#000000">image</span> {<span style="color:#000000">width</span>: <span style="color:#116644">80rpx</span>;<span style="color:#000000">height</span>: <span style="color:#116644">80rpx</span>;}
​<span style="color:#000000">text</span> {<span style="color:#000000">font-size</span>: <span style="color:#116644">24rpx</span>;<span style="color:#000000">margin-top</span>: <span style="color:#116644">12rpx</span>;}}
}
​</span></span>

9. 跳转到商品列表页面-navigator

知识点：

点击商品导航区域，需要跳转到商品列表界面，在网页开发中，如果想实现页面的跳转需要使用 a 标签，在小程序中如果想实现页面的跳转则需要使用 navigator 组件，语法如下：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500"><!-- url：当前小程序内的跳转链接 --></span> 
<span style="color:#117700"><</span><span style="color:#117700">navigator</span> <span style="color:#0000cc">url</span>=<span style="color:#aa1111">"/pages/list/list"</span><span style="color:#117700">></span></span></span>

在小程序中，如果需要进行跳转，需要使用 navigation 组件，常用的属性有 2 个：

  1. url ：当前小程序内的跳转链接

  2. open-type ：跳转方式

    • navigate：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面

    • redirect： 关闭当前页面，跳转到应用内的某个页面。但不能跳转到 tabbar 页面

    • switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

    • reLaunch：关闭所有页面，打开到应用内的某个页面

    • navigateBack：关闭当前页面，返回上一页面或多级页面

📌 注意事项：

  1. 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔 例如：/list?id=10&name=hua，在 onLoad(options) 生命周期函数 中获取传递的参数

  2. 属性 open-type="switchTab" 时不支持传参

落地代码：

➡️ pages/index/index.wxml ： 调整 view 为 navigator

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500"><!-- view：视图容器，作用类似于 div，是一个块级元素，独占一行 --></span>
<span style="color:#117700"><</span><span style="color:#117700">view</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"navs"</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">navigator</span> <span style="color:#0000cc">url</span>=<span style="color:#aa1111">"/pages/list/list"</span><span style="color:#117700">></span><span style="color:#aa5500"><!-- text：文本组件，类似于 span，是一个行内元素 --></span><span style="color:#117700"><</span><span style="color:#117700">image</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"/assets/cate-1.png"</span> <span style="color:#0000cc">alt</span>=<span style="color:#aa1111">""</span><span style="color:#117700">/></span><span style="color:#117700"><</span><span style="color:#117700">text</span><span style="color:#117700">></span>爱礼精选<span style="color:#117700"></</span><span style="color:#117700">text</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">navigator</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">navigator</span> <span style="color:#0000cc">url</span>=<span style="color:#aa1111">"/pages/list/list"</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">image</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"/assets/cate-2.png"</span> <span style="color:#0000cc">alt</span>=<span style="color:#aa1111">""</span><span style="color:#117700">/></span><span style="color:#117700"><</span><span style="color:#117700">text</span><span style="color:#117700">></span>鲜花玫瑰<span style="color:#117700"></</span><span style="color:#117700">text</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">navigator</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">navigator</span> <span style="color:#0000cc">url</span>=<span style="color:#aa1111">"/pages/list/list"</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">image</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"/assets/cate-3.png"</span> <span style="color:#0000cc">alt</span>=<span style="color:#aa1111">""</span><span style="color:#117700">/></span><span style="color:#117700"><</span><span style="color:#117700">text</span><span style="color:#117700">></span>永生玫瑰<span style="color:#117700"></</span><span style="color:#117700">text</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">navigator</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">navigator</span> <span style="color:#0000cc">url</span>=<span style="color:#aa1111">"/pages/list/list"</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">image</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"/assets/cate-4.png"</span> <span style="color:#0000cc">alt</span>=<span style="color:#aa1111">""</span><span style="color:#117700">/></span><span style="color:#117700"><</span><span style="color:#117700">text</span><span style="color:#117700">></span>玫瑰珠宝<span style="color:#117700"></</span><span style="color:#117700">text</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">navigator</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">navigator</span> <span style="color:#0000cc">url</span>=<span style="color:#aa1111">"/pages/list/list"</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">image</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"/assets/cate-5.png"</span> <span style="color:#0000cc">alt</span>=<span style="color:#aa1111">""</span><span style="color:#117700">/></span><span style="color:#117700"><</span><span style="color:#117700">text</span><span style="color:#117700">></span>香水护体<span style="color:#117700"></</span><span style="color:#117700">text</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">navigator</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">view</span><span style="color:#117700">></span></span></span>

➡️ pages/index/index.wxss： 

<span style="background-color:#f8f8f8"><span style="color:#333333">// 商品导航区域
<span style="color:#555555">.good-nav</span> {<span style="color:#000000">display</span>: <span style="color:#221199">flex</span>;<span style="color:#000000">justify-content</span>: <span style="color:#221199">space-between</span>;<span style="color:#000000">background-color</span>: <span style="color:#221199">#fff</span>;<span style="color:#000000">padding</span>: <span style="color:#116644">20rpx</span> <span style="color:#116644">16rpx</span>;<span style="color:#000000">border-radius</span>: <span style="color:#116644">10rpx</span>;
​<span style="color:#000000">view</span> {
+    <span style="color:#000000">navigator</span> {
+      <span style="color:#000000">display</span>: <span style="color:#221199">flex</span>;
+      <span style="color:#000000">flex-direction</span>: <span style="color:#221199">column</span>;
+      <span style="color:#000000">align-items</span>: <span style="color:#221199">center</span>;
+    }
​<span style="color:#000000">image</span> {<span style="color:#000000">width</span>: <span style="color:#116644">80rpx</span>;<span style="color:#000000">height</span>: <span style="color:#116644">80rpx</span>;}
​<span style="color:#000000">text</span> {<span style="color:#000000">font-size</span>: <span style="color:#116644">24rpx</span>;<span style="color:#000000">margin-top</span>: <span style="color:#116644">12rpx</span>;}}
}
​</span></span>

10. 商品推荐区域-scroll-view

可滚动视图区域，适用于需要滚动展示内的场景，它可以在小程序中实现类似于网页中的滚动条效果，用户可以通过手指滑动或者点击滚动条来滚动内容，scroll-view 组件可以设置滚动方向、滚动条样式、滚动到顶部或底部时的回调函数等属性，可以根据实际需求进行灵活配置。

3.10.1 scroll-view 横向滚动

知识点：

使用横向滚动时，需要添加 scroll-x 属性，然后通过 css 进行结构绘制，实现页面横向滚动

落地代码：

➡️ pages/index/index.wxml： 

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500"><!-- 商品推荐区域 --></span>
<span style="color:#117700"><</span><span style="color:#117700">view</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"hot"</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">scroll-view</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"scroll-x"</span> <span style="color:#0000cc">scroll-x</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">view</span><span style="color:#117700">></span>1<span style="color:#117700"></</span><span style="color:#117700">view</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">view</span><span style="color:#117700">></span>2<span style="color:#117700"></</span><span style="color:#117700">view</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">view</span><span style="color:#117700">></span>3<span style="color:#117700"></</span><span style="color:#117700">view</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">scroll-view</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">view</span><span style="color:#117700">></span></span></span>

➡️ pages/index/index.wxss： 

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#555555">.hot</span> {<span style="color:#000000">margin-top</span>: <span style="color:#116644">16rpx</span>;
​<span style="color:#555555">.scroll-x</span> {<span style="color:#000000">width</span>: <span style="color:#116644">100%</span>;<span style="color:#000000">white-space</span>: <span style="color:#221199">nowrap</span>;<span style="color:#000000">background-color</span>: <span style="color:#770088">lightblue</span>;
​<span style="color:#117700">view</span>{<span style="color:#000000">display</span>: <span style="color:#221199">inline-block</span>;<span style="color:#000000">width</span>: <span style="color:#116644">50%</span>;<span style="color:#000000">height</span>: <span style="color:#116644">80rpx</span>;
​&:<span style="color:#008855">last-child</span>{<span style="color:#000000">background-color</span>: <span style="color:#770088">lightseagreen</span>;}
​&:<span style="color:#008855">first-child</span>{<span style="color:#000000">background-color</span>: <span style="color:#770088">lightpink</span>;}} }
}</span></span>

3.10.2 scroll-view 纵向滚动

知识点：

使用竖向滚动时，需要给scroll-view一个固定高度，同时添加 scroll-y 属性，实现页面纵向滚动

落地代码：

➡️ pages/index/index.wxml： 

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500"><!-- 商品推荐区域 --></span>
<span style="color:#117700"><</span><span style="color:#117700">view</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"hot"</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">scroll-view</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"scroll-x"</span> <span style="color:#0000cc">scroll-x</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">view</span><span style="color:#117700">></span>1<span style="color:#117700"></</span><span style="color:#117700">view</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">view</span><span style="color:#117700">></span>2<span style="color:#117700"></</span><span style="color:#117700">view</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">view</span><span style="color:#117700">></span>3<span style="color:#117700"></</span><span style="color:#117700">view</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">scroll-view</span><span style="color:#117700">></span>
​<span style="color:#117700"><</span><span style="color:#117700">scroll-view</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"scroll-y"</span> <span style="color:#0000cc">scroll-y</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">view</span><span style="color:#117700">></span>1<span style="color:#117700"></</span><span style="color:#117700">view</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">view</span><span style="color:#117700">></span>2<span style="color:#117700"></</span><span style="color:#117700">view</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">view</span><span style="color:#117700">></span>3<span style="color:#117700"></</span><span style="color:#117700">view</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">scroll-view</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">view</span><span style="color:#117700">></span></span></span>

➡️ pages/index/index.wxss： 

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#555555">.hot</span> {<span style="color:#000000">margin-top</span>: <span style="color:#116644">16rpx</span>;
​<span style="color:red">.scroll-x</span> {<span style="color:#000000">width</span>: <span style="color:#116644">100%</span>;<span style="color:#000000">white-space</span>: <span style="color:#221199">nowrap</span>;<span style="color:#000000">background-color</span>: <span style="color:#770088">lightblue</span>;
​<span style="color:#000000">view</span>{<span style="color:#000000">display</span>: <span style="color:#221199">inline-block</span>;<span style="color:#000000">width</span>: <span style="color:#116644">50%</span>;<span style="color:#000000">height</span>: <span style="color:#116644">80rpx</span>;
​&:<span style="color:#008855">last-child</span>{<span style="color:#000000">background-color</span>: <span style="color:#770088">lightseagreen</span>;}
​&:<span style="color:#008855">first-child</span>{<span style="color:#000000">background-color</span>: <span style="color:#770088">lightcoral</span>;}} }
​
+  <span style="color:red">.scroll-y</span> {
+    <span style="color:#000000">height</span>: <span style="color:#116644">400rpx</span>;
+    <span style="color:#000000">background-color</span>: <span style="color:#770088">lightsalmon</span>;
+    <span style="color:#000000">margin-top</span>: <span style="color:#116644">60rpx</span>;
+
+    <span style="color:#000000">view</span> {
+      <span style="color:#000000">height</span>: <span style="color:#116644">400rpx</span>;
+
+      &:<span style="color:#008855">nth-child</span>(<span style="color:#000000">odd</span>) {
+        <span style="color:#000000">background-color</span>: <span style="color:#770088">lightseagreen</span>;
+      }
+
+      &:<span style="color:#008855">nth-child</span>(<span style="color:#000000">even</span>) {
+        <span style="color:#000000">background-color</span>: <span style="color:#770088">lightcoral</span>;
+      }
+    }  
+  }
}</span></span>

3.10.3 实现商品推荐区域横向滚动

落地代码

➡️ pages/index/index.wxml： 

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500"><!-- 推荐商品 --></span>
<span style="color:#117700"><</span><span style="color:#117700">view</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"good-hot"</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">scroll-view</span> <span style="color:#0000cc">scroll-x</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"scroll-x"</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">view</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">view</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"good-item"</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">image</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"../../assets/floor/1.png"</span> <span style="color:#0000cc">mode</span>=<span style="color:#aa1111">""</span><span style="color:#117700">/></span><span style="color:#117700"><</span><span style="color:#117700">text</span><span style="color:#117700">></span>鲜花玫瑰<span style="color:#117700"></</span><span style="color:#117700">text</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">text</span><span style="color:#117700">></span>66<span style="color:#117700"></</span><span style="color:#117700">text</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">view</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">view</span><span style="color:#117700">></span>
​<span style="color:#117700"><</span><span style="color:#117700">view</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">view</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"good-item"</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">image</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"../../assets/floor/2.png"</span> <span style="color:#0000cc">mode</span>=<span style="color:#aa1111">""</span><span style="color:#117700">/></span><span style="color:#117700"><</span><span style="color:#117700">text</span><span style="color:#117700">></span>鲜花玫瑰<span style="color:#117700"></</span><span style="color:#117700">text</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">text</span><span style="color:#117700">></span>77<span style="color:#117700"></</span><span style="color:#117700">text</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">view</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">view</span><span style="color:#117700">></span>
​<span style="color:#117700"><</span><span style="color:#117700">view</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">view</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"good-item"</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">image</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"../../assets/floor/3.png"</span> <span style="color:#0000cc">mode</span>=<span style="color:#aa1111">""</span><span style="color:#117700">/></span><span style="color:#117700"><</span><span style="color:#117700">text</span><span style="color:#117700">></span>鲜花玫瑰<span style="color:#117700"></</span><span style="color:#117700">text</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">text</span><span style="color:#117700">></span>88<span style="color:#117700"></</span><span style="color:#117700">text</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">view</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">view</span><span style="color:#117700">></span>
​<span style="color:#117700"><</span><span style="color:#117700">view</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">view</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"good-item"</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">image</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"../../assets/floor/4.png"</span> <span style="color:#0000cc">mode</span>=<span style="color:#aa1111">""</span><span style="color:#117700">/></span><span style="color:#117700"><</span><span style="color:#117700">text</span><span style="color:#117700">></span>鲜花玫瑰<span style="color:#117700"></</span><span style="color:#117700">text</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">text</span><span style="color:#117700">></span>99<span style="color:#117700"></</span><span style="color:#117700">text</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">view</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">view</span><span style="color:#117700">></span>
​<span style="color:#117700"><</span><span style="color:#117700">view</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">view</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"good-item"</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">image</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"../../assets/floor/5.png"</span> <span style="color:#0000cc">mode</span>=<span style="color:#aa1111">""</span><span style="color:#117700">/></span><span style="color:#117700"><</span><span style="color:#117700">text</span><span style="color:#117700">></span>鲜花玫瑰<span style="color:#117700"></</span><span style="color:#117700">text</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">text</span><span style="color:#117700">></span>100<span style="color:#117700"></</span><span style="color:#117700">text</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">view</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">view</span><span style="color:#117700">></span>
​<span style="color:#117700"></</span><span style="color:#117700">scroll-view</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">view</span><span style="color:#117700">></span></span></span>

➡️ pages/index/index.wxss： 

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500">// 推荐商品区域</span>
<span style="color:#555555">.good-hot</span> {<span style="color:#000000">background-color</span>: <span style="color:#221199">#fff</span>;<span style="color:#000000">padding</span>: <span style="color:#116644">16rpx</span>;<span style="color:#000000">border-radius</span>: <span style="color:#116644">10rpx</span>;<span style="color:#000000">font-size</span>: <span style="color:#116644">24rpx</span>;
​<span style="color:#555555">.scroll-x</span> {<span style="color:#000000">width</span>: <span style="color:#116644">100%</span>;<span style="color:#000000">white-space</span>: <span style="color:#221199">nowrap</span>;
​<span style="color:#117700">view</span> {<span style="color:#000000">display</span>: <span style="color:#221199">inline-block</span>;<span style="color:#000000">width</span>: <span style="color:#116644">320rpx</span>;<span style="color:#000000">height</span>: <span style="color:#116644">440rpx</span>;<span style="color:#000000">margin-right</span>: <span style="color:#116644">16rpx</span>;
​<span style="color:#555555">.good-item</span> {<span style="color:#000000">display</span>: <span style="color:#221199">flex</span>;<span style="color:#000000">flex-direction</span>: <span style="color:#221199">column</span>;<span style="color:#000000">justify-content</span>: <span style="color:#221199">space-between</span>;
​<span style="color:#117700">text</span> {&:<span style="color:#008855">nth-of-type</span>(<span style="color:#116644">1</span>) {<span style="color:#000000">font-weight</span>: <span style="color:#221199">bold</span>;}}}
​<span style="color:#117700">image</span> {<span style="color:#000000">width</span>: <span style="color:#116644">100%</span>;<span style="color:#000000">height</span>: <span style="color:#116644">320rpx</span>;}
​&:<span style="color:#008855">last-child</span> {<span style="color:#000000">margin-right</span>: <span style="color:#116644">0</span>;}}}
}</span></span>

11. 字体图标的使用

在项目中使用到的小图标，一般由公司设计师进行设计，如果如果自行设计这些图标会比较麻烦且耗费时间，这时候我们就可以使用到阿里巴巴矢量图库，设计好以后上传到阿里巴巴矢量图标库，然后方便程序员来进行使用。

阿里巴巴矢量图库是阿里巴巴集团推出的一个免费的矢量图标库和图标管理工具。它汇集了大量的精美图标资源，包括品牌图标和各种主题和分类的图标。用户可以在阿里巴巴矢量图库中搜索和浏览所需的图标，也可以上传和管理自己的图标资源。

小程序中的字体图标使用方式与 Web 开发中的使用方式是一样的。

首先我们先找到所需的图标，加入到项目库，进入项目库中生成链接。也快将字体图标库下载到本地

点击链接，会将生成的 CSS 在新的链接页面进行打开，ctrl + s，将该文件重命名为.wxss 后缀名，然后保存到项目根目录下的static 文件夹下。

在全局样式文件app.wxss中导入fonts.wxss字体图标文件，然后获取到图标类名，在项目中使用即可，应用于页面

<span style="background-color:#f8f8f8"><span style="color:#333333">@import "./static/fonts.wxss";</span></span>
<span style="background-color:#f8f8f8"><span style="color:#333333"><view class="myTest"><view class="iconfont icon-tuikuan"></view>
</view></span></span>

注意：使用字体图标可能会报错：

<span style="background-color:#f8f8f8">[渲染层网络层错误] Failed to load font http://at.alicdn.com/t/c/font_3946178_q5oidsl5xo.woff2?t=1680795910637 net::ERR_CACHE_MISS (env: Windows,mp,1.06.2303220; lib: 2.30.4)</span>

该错误可忽略，详见下面这个链接：

wx.loadFontFace(Object object) | 微信开放文档

但在控制台出现错误，会影响开发调试，解决方案是：将字体图标转换成 base64 的格式

落地代码：

➡️ app.wxss： 

<span style="background-color:#f8f8f8"><span style="color:#333333">// 在导入样式文件以后，必须以分号结尾，否则会出现异常@import "./iconfont/iconfont.scss";</span></span>

➡️ pages/index/index.wxml： 

<span style="background-color:#f8f8f8"><span style="color:#333333"><!-- 公司信息 -->
<view class="info"><text><text class="iconfont icon-ps"></text> 同城配送</text><text><text class="iconfont icon-lx"></text> 行业龙头</text><text><text class="iconfont icon-time"></text> 半小时送达</text><text><text class="iconfont icon-hp"></text> 100% 好评</text>
</view>
</span></span>

➡️ pages/index/index.wxss： 

<span style="background-color:#f8f8f8"><span style="color:#333333">// 公司信息区域
.info {display: flex;justify-content: space-between;background-color: #fff;padding: 20rpx 16rpx;border-radius: 10rpx;font-size: 24rpx;+   .iconfont {
+     font-size: 24rpx;
+   }
}
</span></span>

12. 背景图片的使用

注：提供的网络地址连接：

  1. http://8.131.91.46:6677/bgimage.png

  2. http://8.131.91.46:6677/TomAndJerry.jpg

当编写小程序的样式文件时，我们可以使用 background-image 属性来设置一个元素的背景图像，但是小程序的 background-image 不支持本地路径。

<span style="background-color:#f8f8f8"><span style="color:#333333"><view class="image"></view></span></span>
<span style="background-color:#f8f8f8"><span style="color:#333333">.image {background-image: url('../../static/微信.jpg');
}</span></span>

如图，在使用了本地资源图片以后，微信开发者工具提供的提示：

本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用<image/>标签

<span style="background-color:#f8f8f8"><span style="color:#333333">.image {width: 100%;height: 400rpx;/* 本地资源图片无法通过 WXSS 获取 *//* background-image: url('../../static/微信.jpg'); *//* 使用网络图片 *//* background-image: url('http://8.131.91.46:6677/TomAndJerry.jpg'); *//* 使用 base64 格式展示图片 *//* base64 编码的文件很长，这个地址老师在这边进行了简写，在测试的时候，需要自己将这里转成完成的 64 编码 */background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAeAB4AAD/.....")background-position: center;background-size: cover;}</span></span>

相关文章：

小程序常用样式和组件

常用样式和组件 1. 组件和样式介绍 在开 Web 网站的时候&#xff1a; 页面的结构由 HTML 进行编写&#xff0c;例如&#xff1a;经常会用到 div、p、 span、img、a 等标签 页面的样式由 CSS 进行编写&#xff0c;例如&#xff1a;经常会采用 .class 、#id 、element 等选择器…...

编程日记 2024/3/5 11:38:33

《Redis 设计与实现》读书概要

注&#xff1a; 《Redis 设计与实现》一书基于 Redis 2.9 版本编写&#xff0c;部分内容已过时&#xff0c;过时之处本文会有所说明。本文为读书笔记&#xff0c;部分简单和日常使用较少的知识点未记录。原书网页版地址 https://redisbook.com/ 一、底层数据结构 SDS(Simple Dy…...

编程日记 2024/3/5 11:35:29

Docker之数据卷自定义镜像

文章目录 前言一、数据卷二、自定义镜像 前言 Docker提供了一个持久化存储数据的机制&#xff0c;与容器生命周期分离&#xff0c;从而带来一系列好处&#xff1a; 总的来说Docker 数据卷提供了一种灵活、持久、可共享的存储机制&#xff0c;使得容器化应用在数据管理方面更加…...

编程日记 2024/3/5 11:33:27

Docker技术概论（4）：Docker CLI 基本用法解析

Docker技术概论&#xff08;4&#xff09; Docker CLI 基本用法解析 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this article:http…...

编程日记 2024/3/5 11:32:26

【JAVA重要知识 | 第五篇】暴打Java8新特性—（Lambda、方法引用、Stream流、函数式接口、Date Time API、Optional类）

文章目录 5.Java8新特性5.1新特性列表5.2Lambda 表达式5.2.1函数式思想5.2.2举例&#xff08;1&#xff09;方式一&#xff1a;创建对象&#xff08;2&#xff09;方式二&#xff1a;匿名内部类&#xff08;3&#xff09;方式三&#xff1a;Lambda 5.2.3Lambda表达式的标准格式…...

编程日记 2024/3/5 11:31:25

Docker Swarm全解析：实现微服务高可用与故障转移的秘密武器

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《Docker入门到精通》 《k8s入门到实战》&#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、基本概念和介绍 1、Docker Swarm 是什么&#xff0c;它与 …...

编程日记 2024/3/5 11:27:21

编码规范（前端）

文章目录 1. 文档说明1.1 编制说明1.2 名词解释 2.前端研发规范2.1 HTML编码规范2.1.1 文档类型2.1.2 语言2.1.3 元数据2.1.4 资源加载2.1.5 页面标题2.1.6 编码风格2.1.7 标签2.1.8 属性2.1.9 语义化 2.2 CSS编码规范2.2.1 文件引用2.2.2 命名-组成元素 知识点 1. 文档说明 1…...

编程日记 2024/3/5 11:24:18

【JavaEE进阶】部署Web项目到Linux服务器

文章目录 &#x1f343;前言&#x1f340;什么是部署&#x1f332;环境配置&#x1f6a9;数据准备&#x1f6a9;程序配置⽂件修改 &#x1f384;构建项目并打包&#x1f38b;上传Jar包到服务器,并运行&#x1f6a9;上传Jar包&#x1f6a9;运行程序&#x1f6a9;开放端口号 &…...

编程日记 2024/3/5 11:20:13

就业班 2401--3.1 Linux Day9--文件查找和压缩

一、文件查找与打包压缩 grep: 文件内容过滤 [rootqfedu.com ~]# grep root /etc/passwd #从/etc/passwd文件中过滤root字段 grep ^root root$ root:x:0:0:root:/root:/bin/bash operator:x:11:0:operator:/root:/sbin/nologin 查找命令 [rootqfedu.com ~]# which ls ali…...

编程日记 2024/3/5 11:19:12

「滚雪球学Java」：JDBC(章节汇总)

&#x1f3c6;本文收录于「滚雪球学Java」专栏&#xff0c;专业攻坚指数级提升&#xff0c;助你一臂之力&#xff0c;带你早日登顶&#x1f680;&#xff0c;欢迎大家关注&&收藏&#xff01;持续更新中&#xff0c;up&#xff01;up&#xff01;up&#xff01;&#xf…...

编程日记 2024/3/5 11:15:08

RT-DETR改进RepVGG结构：简单但功能强大的卷积神经网络架构

💡本篇内容：RT-DETR改进RepVGG结构：简单但功能强大的卷积神经网络架构 💡🚀🚀🚀本博客 改进源代码改进 适用于 RT-DETR 按步骤操作运行改进后的代码即可 💡本文提出改进 原创 方式：二次创新，RT-DETR专属 应部分读者要求，新增一篇RepVGG 论文理论部分 + 原…...

编程日记 2024/3/5 11:14:06

C#进阶高级语法之LINQ ：Lambda 表达式

C# 中的 LINQ (Language Integrated Query) 提供了一种声明性的数据查询和操作方法&#xff0c;它允许开发人员对集合、数据库等数据源进行查询和操作&#xff0c;而不需要编写复杂的循环和手动编码。Lambda 表达式与 LINQ 紧密相关&#xff0c;它提供了一种简洁的方式来定义匿…...

编程日记 2024/3/5 11:11:03

react hook: useCallback

useCallback的主要使用场景在于优化性能&#xff0c;并确保当传递回调函数给子组件时&#xff0c;子组件不会因为父组件的重渲染而重新创建函数。 使用场景 1.当你需要将回调函数传递给子组件时&#xff0c;使用useCallback可以确保子组件在重新渲染时不会不必要地重新创建函数…...

编程日记 2024/3/5 11:05:57

java面试（jvm）

JVM内存模型 细分Eden&#xff1a; java类加载过程&#xff1f;双亲委派机制&#xff1f;一个对象从加载到JVM&#xff0c;再到被GC清除过程&#xff1f; JAVA类加载器&#xff1a;AppClassLoader - ExtClassLoader - BootStrapClassLoader。每种类加载器都有他自己的加载目录…...

编程日记 2024/3/5 11:03:55

自动化测试摸索：python+selenium+pytest(持续更新.....)

一、环境搭建 1、python 安装 下载链接&#xff1a;Python Releases for Windows | Python.org 自己选择合适的版本下载 当下载完毕时&#xff0c;找到该安装程序&#xff1a;python-3.12.2-amd64.exe文件&#xff0c;双击启动安装向导。 为了防止C:盘文件因系统故障或者无…...

编程日记 2024/3/5 11:01:53

C++惯用法之RAII思想: 资源管理

C编程技巧专栏&#xff1a;http://t.csdnimg.cn/eolY7 目录 1.概述 2.RAII的应用 2.1.智能指针 2.2.文件句柄管理 2.3.互斥锁 3.注意事项 3.1.禁止复制 3.2.对底层资源使用引用计数法 3.3.复制底部资源(深拷贝)或者转移资源管理权(移动语义) 4.RAII的优势和挑战 5.总…...

编程日记 2024/3/5 11:00:52

矢量图是什么，有哪些格式的文件

矢量图是一种图形设计中常用的图像类型&#xff0c;与我们日常见到的光栅图像&#xff08;如JPEG、PNG等&#xff09;有本质的区别。矢量图基于数学方程和几何元素&#xff08;如点、线、曲线和形状&#xff09;来表示图像&#xff0c;而不是像光栅图那样通过像素阵列来表示。这…...

编程日记 2024/3/5 10:57:48

Linux 设置快捷命令

以ll命令为例&#xff1a; 在 Linux 系统上&#xff0c;ll 命令通常不是一个独立的程序&#xff0c;而是 ls 命令的一个别名。 这个别名通常在用户的 shell 配置文件中定义&#xff0c;比如 .bashrc 或 .bash_aliases 文件中。 要在 Debian 上启用 ll 命令&#xff0c;你可以按…...

编程日记 2024/3/5 10:53:44

SpringCloudFeign远程调用

文章目录 1. Feign 是什么2. Feign 的使用2.1 引入依赖2.2 写接口2.3 服务调用方2.4 启动测试 3. Feign 日志配置4. Feign 使用优化5. 注意包扫描问题 1. Feign 是什么 Feign 是一个声明式、模板化的 HTTP 客户端&#xff0c;它是由 Netflix 开发并开源的。Feign 极大地简化了…...

编程日记 2024/3/5 10:52:38

Java中List、Set、Map三种集合之间的区别

Java中List、Set、Map三种集合之间的区别 1. List2. Set3. Map 在Java中&#xff0c;List、Set和Map是三种常见的集合类型&#xff0c;它们之间也有一些重要的区别&#xff1a; 1. List List是有序集合&#xff0c;可以存储重复元素。List的实现类常见有ArrayList、LinkedLis…...

编程日记 2024/3/5 10:50:35

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

编程新知 2025/6/15 22:22:18

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

编程新知 2025/9/23 17:32:59

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

编程新知 2025/9/24 6:19:06

成都鼎讯硬核科技！雷达目标与干扰模拟器，以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

编程新知 2025/9/3 23:09:31

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

编程新知 2025/9/22 15:00:47

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2025/9/22 14:59:58

保姆级教程：在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

编程新知 2025/9/24 6:17:12

AI+无人机如何守护濒危物种？YOLOv8实现95%精准识别

【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而&#xff0c;传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案&#xff0c;能够实现大范围覆盖并远程采集数据。尽管具备这些优势&#xf…...

编程新知 2025/9/23 0:14:10

快速排序算法改进:随机快排-荷兰国旗划分详解

随机快速排序-荷兰国旗划分算法详解 一、基础知识回顾1.1 快速排序简介1.2 荷兰国旗问题 二、随机快排 - 荷兰国旗划分原理2.1 随机化枢轴选择2.2 荷兰国旗划分过程2.3 结合随机快排与荷兰国旗划分 三、代码实现3.1 Python实现3.2 Java实现3.3 C实现 四、性能分析4.1 时间复杂度…...

编程新知 2025/9/21 4:44:22

ThreadLocal 源码

ThreadLocal 源码 此类提供线程局部变量。这些变量不同于它们的普通对应物&#xff0c;因为每个访问一个线程局部变量的线程&#xff08;通过其 get 或 set 方法&#xff09;都有自己独立初始化的变量副本。ThreadLocal 实例通常是类中的私有静态字段&#xff0c;这些类希望将…...

编程新知 2025/9/13 9:57:09