小程序常用樣式和組件

常用樣式和組件

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>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/711662.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/711662.shtml
英文地址，請注明出處：http://en.pswp.cn/news/711662.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

【leetcode】相交鏈表

【leetcode】相交鏈表

大家好&#xff0c;我是蘇貝&#xff0c;本篇博客帶大家刷題&#xff0c;如果你覺得我寫的還不錯的話&#xff0c;可以給我一個贊&#x1f44d;嗎&#xff0c;感謝?? 點擊查看題目 思路: struct ListNode *getIntersectionNode(struct ListNode *headA, struct ListNode *he…
閱讀更多...
海康威視2024校園招聘

海康威視2024校園招聘

海康威視2024全球校園招聘正式啟動 智未來&#xff0c;因你來&#xff0c;圖片附含內推碼
閱讀更多...
Flex布局常見屬性圖解

Flex布局常見屬性圖解

目錄 一、簡介二、父元素屬性2.1、flex-direction2.2、justify-content2.3、align-items2.4、flex-wrap2.5、flex-flow2.6、align-content 三、子元素屬性3.1、flex3.2、align-self3.3、order 一、簡介 Flex是Flexible Box的縮寫&#xff0c;意為”彈性布局”&#xff0c;用來為…
閱讀更多...
筆記本以太網集線器Hub充電可能導致網絡異常（貌似是我把服務器網關寫錯了）

筆記本以太網集線器Hub充電可能導致網絡異常（貌似是我把服務器網關寫錯了）

文章目錄 筆記本以太網集線器&#xff08;Hub&#xff09;充電導致網絡異常概述原理分析電源與信號干擾設備熱度設備兼容性問題 解決方案升級固件提高設備散熱效率選擇兼容性好的設備 總結 今天用筆記本以太網直連服務器&#xff0c;一開始能連通&#xff0c;結果以太網hub插上…
閱讀更多...
c# Excel轉換成DataSet

c# Excel轉換成DataSet

/// <summary> /// Excel轉換成DataSet&#xff08;.xlsx/.xls&#xff09; /// </summary> /// <param name"filePath">Excel文件路徑</param> /// <param name"strMsg"></param> …
閱讀更多...
Vue-4

Vue-4

自定義創建項目 目標&#xff1a;基于 VueCli 自定義創建項目架子 大致步驟&#xff1a; 安裝腳手架創建項目 vue create 項目名稱選擇自定義 選擇 Manually select features 這一項 step-1:按下空格 : 選擇/取消--勾選請選擇&#xff1a;Babel、Router、CSS、Linterstep-2…
閱讀更多...
探索K8S的絕佳選擇：Killercoda與Play-with-K8s在線練習平臺

探索K8S的絕佳選擇：Killercoda與Play-with-K8s在線練習平臺

大家好&#xff0c;近年來Kubernetes&#xff08;K8S&#xff09;作為容器編排的瑞士軍刀&#xff0c;已經成為云原生技術的代表之一。學習K8S是現代云計算領域不可或缺的一部分&#xff0c;但很多人可能面臨一個問題——如何高效地學習K8S&#xff0c;尤其是缺乏實踐環境的初學…
閱讀更多...
藍橋杯 子矩陣 （找大小為a*b的矩陣的最大最小值的乘積，queue）

藍橋杯 子矩陣 （找大小為a*b的矩陣的最大最小值的乘積，queue）

題目鏈接 &#xff1a; https://www.lanqiao.cn/problems/3521/learning/?subject_code1&group_code3&match_num14&match_flow1&origincup 思想 &#xff1a; 用堆維護最大值最小值即可 暴力實現 復雜度 N^2 * log(N^2) 代碼&#xff1a; #include<bit…
閱讀更多...
Vue3修改Element-plus語言與項目國際化

Vue3修改Element-plus語言與項目國際化

修改Element-plus默認語言 Element-plus默認語言是英語&#xff0c;可修改為其它語言&#xff1b; 此處 Element-plus 為自動按需導入方式配置&#xff1b; 更多導入方式&#xff1a;Vue3使用Element-plus-CSDN博客 全局配置默認語言參考&#xff1a;國際化 | Element Plus 統一…
閱讀更多...
文件對比工具Beyond Compare 4 mac v4.4.7(28397)中文版

文件對比工具Beyond Compare 4 mac v4.4.7(28397)中文版

Beyond Compare是一款適用于Windows、Mac OS X和Linux平臺的文件和文件夾比較工具。它可以幫助用戶比較和同步文件夾、文件和壓縮包等內容&#xff0c;支持多種文件格式&#xff0c;如文本、圖像、音頻、視頻等。 軟件下載&#xff1a;Beyond Compare 4 mac v4.4.7(28397)中文版…
閱讀更多...
Kafka中的acks機制——一次由錯誤資料引發的源碼學習

Kafka中的acks機制——一次由錯誤資料引發的源碼學習

前言 這次的學習過程來歷有點奇怪。我本來是學習kafka過程中正常的學到了這個acks機制&#xff0c;但是發現很多地方寫的都不太明白。因此決定還是自己來看一下源碼。 具體來說&#xff1a;請看搜索結果&#xff08;Google引擎&#xff09; 這個是搜索“Kafka的ack”所得到的…
閱讀更多...
Excel中使用ROW函數自動更新行號或編號

Excel中使用ROW函數自動更新行號或編號

操作步驟&#xff1a; 1、在編號“1”的單元格輸入公式“ROW()-1”&#xff1b; 2、在上一步填好公式的單元格基礎上下拉填充&#xff0c;即可批量得到編號&#xff0c;如果刪掉其中的一行或幾行&#xff0c;編號會自動進行更新。
閱讀更多...
數組與list的轉化分析

數組與list的轉化分析

一、相互轉換的方法 1. 數組轉List &#xff0c;使用JDK中java.util.Arrays工具類的asList方法。 2. List轉數組&#xff0c;使用List的toArray方法。無參toArray方法返回 Object數組&#xff0c;傳入初始化長度的數組對象&#xff0c;返回該對象數組。 二、分析修改內容的影響…
閱讀更多...
在 Rust 中實現 TCP : 1. 聯通內核與用戶空間的橋梁

在 Rust 中實現 TCP : 1. 聯通內核與用戶空間的橋梁

內核-用戶空間鴻溝 構建自己的 TCP棧是一項極具挑戰的任務。通常&#xff0c;當用戶空間應用程序需要互聯網連接時&#xff0c;它們會調用操作系統內核提供的高級 API。這些 API 幫助應用程序 連接網絡創建、發送和接收數據&#xff0c;從而消除了直接處理原始數據包的復雜性。…
閱讀更多...
【教3妹學編程-算法題】標記所有下標的最早秒數 II

【教3妹學編程-算法題】標記所有下標的最早秒數 II

3妹&#xff1a;2哥2哥&#xff0c;你有沒有看到上海女老師出軌男學生的瓜啊。 2哥 : 看到 了&#xff0c;真的是太毀三觀了&#xff01; 3妹&#xff1a;是啊&#xff0c; 老師本是教書育人的職業&#xff0c;明確規定不能和學生談戀愛啊&#xff0c;更何況是出軌。 2哥 : 是啊…
閱讀更多...
shell 免交互ecxept樣例

shell 免交互ecxept樣例

語法 expect [選項] [ -c cmds ] [ [ -[f|b] ] cmdfile ] [ args ] 選項 -c&#xff1a;從命令行執行expect腳本&#xff0c;默認expect是交互地執行的 示例&#xff1a;expect -c expect "\n" {send "pressed enter\n"} -d&#xff1a;輸出調試信息 …
閱讀更多...
【Qt學習】QTextEdit 與 QComboBox 的 屬性與實例（槽函數的使用、讀取本機內容到控件）

【Qt學習】QTextEdit 與 QComboBox 的 屬性與實例（槽函數的使用、讀取本機內容到控件）

文章目錄 1. QTextEdit2.1 介紹2.2 實例使用 - 槽函數的使用 2. QComboBox2.1 介紹2.2 實例使用案例1&#xff1a;設置下拉框項目組件的方式案例2&#xff1a;讀取本機文件內容 到QComboBox 1. QTextEdit 2.1 介紹 我們可以查閱官方文檔&#xff0c;對QTextEdit 有更深的了解&…
閱讀更多...
源碼安裝nginx保姆級教程

源碼安裝nginx保姆級教程

一.目錄存放 1./usr/lib/syste,md/system/:每個服務最主要的啟動腳本設定 2. /run/systemd/system/&#xff1a;系統執行過程中所產生的服務腳本&#xff0c;這些腳本的優先序要比 /usr/lib/systemd/system/ 高&#xff01; 3./etc/systemd/system/&#xff1a;管…
閱讀更多...
【java 基礎】閑話 ClassLoader 和 SPI （一）

【java 基礎】閑話 ClassLoader 和 SPI （一）

文章目錄 引子雙親委派模型你真的明白了嗎&#xff1f; 雙親委派“不夠用了”SPI機制 其他瑣碎 引子 有別于 java 提供的 IO 模塊&#xff0c;java 中的classloader主要是用來加載類的&#xff0c;當然除了加載類&#xff0c;也可以加載資源文件。 那么首先我們會問一個問題&…
閱讀更多...
java基礎 - 14 Java的Deque之Deque、BlockingDeque、LinkedBlockingDeque、ArrayDeque

java基礎 - 14 Java的Deque之Deque、BlockingDeque、LinkedBlockingDeque、ArrayDeque

Java 中的 Deque&#xff08;雙端隊列&#xff09;是一種具有隊列和棧特性的數據結構&#xff0c;它允許在兩端進行插入和刪除操作。Deque 接口是 Java 集合框架中的一部分&#xff0c;它定義了雙端隊列的基本操作。 BlockingDeque 接口&#xff1a; BlockingDeque 接口是 Deq…
閱讀更多...
最新文章

Copyright @ 2022~2023