Swiper、樣式結構重用、GridGridItem

今日核心：

  1. 容器組件：Swiper、Grid\GridItem
  2. 樣式&結構重用：@Builder、@Extend、@Styles

相關資源:

  1. 圖片素材：📎day01.zip

1. Swiper

1.1. 適用場景

首先來看看 Swiper 在什么情況下會用到

鏈接

Swiper組件提供滑動輪播顯示的能力。Swiper本身是一個容器組件，當設置了多個子組件后，可以對這些子組件進行輪播顯示，比如：

1.2. 基本用法

首先來看看如何設置輪播內容，以及設置尺寸

  1. 輪播內容：內容作為Swiper的子組件即可
  2. 尺寸：
    1. 設置 Swiper 的尺寸：內容會拉伸為和 Swiper 一致（優先級高）
    2. 設置內容尺寸：會將Swiper撐開
Swiper() {// 輪播內容 // (設置尺寸，撐開swiper)
}
// 設置尺寸（內容拉伸、優先級高）
.width('100%')
.height(100)

實現一個數字輪播的效果:

參考代碼：

@Entry
@Component
struct Page01_Swiper {// Swiper 基本使用build() {Column() {Text('Swiper基本使用').fontSize(20).fontWeight(900).padding(10)Swiper() {Text('0').textAlign(TextAlign.Center).backgroundColor(Color.Red).fontColor(Color.White).fontSize(30)Text('1').textAlign(TextAlign.Center).backgroundColor(Color.Green).fontColor(Color.White).fontSize(30)Text('2').textAlign(TextAlign.Center).backgroundColor(Color.Blue).fontColor(Color.White).fontSize(30)}.width('100%').height(100)}.width('100%').height('100%')}
}

1.3. 常用屬性

設置了內容以及尺寸之后已經可以實現基礎的輪播效果啦，接下來看看一些常見屬性

loop

boolean

是否開啟循環。

設置為true時表示開啟循環，在LazyForEach懶循環加載模式下，加載的組件數量建議大于5個。

默認值：true

autoPlay

boolean

子組件是否自動播放。

默認值：false

說明：

loop為false時，自動輪播到最后一頁時停止輪播。手勢切換后不是最后一頁時繼續播放。

interval

number

使用自動播放時播放的時間間隔，單位為毫秒。

默認值：3000

vertical

boolean

是否為縱向滑動。

默認值：false

更多屬性參考文檔。。。。。

使用上述屬性，將輪播圖調整為：

  1. 自動播放
  2. 播放間隔：4 秒鐘
  3. 縱向滑動

基礎模版

@Entry
@Component
struct Page02_SwiperAttribute {build() {Column() {Text('Swiper常用屬性').fontSize(20).fontWeight(900).padding(10)Swiper() {Text('0').textAlign(TextAlign.Center).backgroundColor(Color.Red).fontColor(Color.White).fontSize(30)Text('1').textAlign(TextAlign.Center).backgroundColor(Color.Green).fontColor(Color.White).fontSize(30)Text('2').textAlign(TextAlign.Center).backgroundColor(Color.Blue).fontColor(Color.White).fontSize(30)}.width('100%').height(100)}.width('100%').height('100%')}
}

參考代碼：

@Entry
@Component
struct Page02_SwiperAttribute {build() {Column() {Text('Swiper常用屬性').fontSize(20).fontWeight(900).padding(10)Swiper() {Text('0').textAlign(TextAlign.Center).backgroundColor(Color.Red).fontColor(Color.White).fontSize(30)Text('1').textAlign(TextAlign.Center).backgroundColor(Color.Green).fontColor(Color.White).fontSize(30)Text('2').textAlign(TextAlign.Center).backgroundColor(Color.Blue).fontColor(Color.White).fontSize(30)}.width('100%').height(160).loop(false) // 是否開啟循環 true/false.autoPlay(true) // 是否自動播放 true/false.interval(4000) // 自動播放時間間隔 單位毫秒.vertical(true) // 是否縱向滑動}.width('100%').height('100%')}
}

1.4. 調整導航點

如果默認的導航點不滿足效果，可以自行調整

導航點的調整可以分為 2 類：

  1. 顯示 or 隱藏
  2. 導航點類型：
    1. 圓點（掌握）
    2. 數字（了解）

indicator

DotIndicator

| DigitIndicator

| boolean

設置可選導航點指示器樣式。

- DotIndicator：圓點指示器樣式。

- DigitIndicator：數字指示器樣式。

- boolean：是否啟用導航點指示器。

默認值：true

默認類型：DotIndicator

Swiper(){// 略
}
// .indicator(false) // 關閉導航
// .indicator(Indicator.dot()) // 圓點指示器（默認）
// .indicator(Indicator.digit()) // 數字指示器

日常開發中 較為常見的是圓點指示器，咱們重點掌握如何調整他即可

Swiper(){// 略
}.indicator(Indicator.dot()// .xxx(設置圓點指示器的屬性)) // 圓點指示器（默認）

位置屬性：

參數名

參數類型

必填項

參數描述

left

Length

否

設置導航點距離Swiper組件左邊的距離。

默認值：0

單位：vp

top

Length

否

設置導航點距離Swiper組件頂部的距離。

默認值：0

單位：vp

right

Length

否

設置導航點距離Swiper組件右邊的距離。

默認值：0

單位：vp

bottom

Length

否

設置導航點距離Swiper組件底部的距離。

默認值：0

單位：vp

樣式屬性：

參數名

參數類型

必填項

參數描述

itemWidth

Length

否

設置Swiper組件圓點導航指示器的寬，不支持設置百分比。

默認值：6

單位：vp

itemHeight

Length

否

設置Swiper組件圓點導航指示器的高，不支持設置百分比。

默認值：6

單位：vp

selectedItemWidth

Length

否

設置選中Swiper組件圓點導航指示器的寬，不支持設置百分比。

默認值：12

單位：vp

selectedItemHeight

Length

否

設置選中Swiper組件圓點導航指示器的高，不支持設置百分比。

默認值：6

單位：vp

color

ResourceColor

否

設置Swiper組件圓點導航指示器的顏色。

默認值：'#182431'（10%透明度）

selectedColor

ResourceColor

否

設置選中Swiper組件圓點導航指示器的顏色。

默認值：'#007DFF'

更多屬性參考文檔。。。。。

基礎模版

@Entry
@Component
struct Page03_SwiperIndicator {build() {Column() {Text('Swiper導航點').fontSize(20).fontWeight(900).padding(10)Swiper() {Text('0').textAlign(TextAlign.Center).backgroundColor(Color.Red).fontColor(Color.White).fontSize(30)Text('1').textAlign(TextAlign.Center).backgroundColor(Color.Green).fontColor(Color.White).fontSize(30)Text('2').textAlign(TextAlign.Center).backgroundColor(Color.Blue).fontColor(Color.White).fontSize(30)}.width('100%').height(160)}.width('100%').height('100%')}
}

參考代碼：

@Entry
@Component
struct Page03_SwiperIndicator {build() {Column() {Text('Swiper導航點').fontSize(20).fontWeight(900).padding(10)Swiper() {Text('0').textAlign(TextAlign.Center).backgroundColor(Color.Red).fontColor(Color.White).fontSize(30)Text('1').textAlign(TextAlign.Center).backgroundColor(Color.Green).fontColor(Color.White).fontSize(30)Text('2').textAlign(TextAlign.Center).backgroundColor(Color.Blue).fontColor(Color.White).fontSize(30)}.width('100%').height(160)// .indicator(false) // 關閉導航點// .indicator(Indicator.digit()) // 數字導航點.indicator(Indicator.dot().left(10)// 左側距離.top(10)// 頂部距離.bottom(10)// 底部距離.right(10)// 右側距離（距離屬性組合使用，無需全部設置）.itemWidth(20)// 指示器寬度.itemHeight(20)// 指示器高度.selectedItemWidth(30)// 選中指示器寬度.selectedItemHeight(30)// 選中指示器高度.selectedColor(Color.Yellow)// 選中指示器顏色.color(Color.Blue) // 默認指示器寬度) // 圓形導航點}.width('100%').height('100%')}
}

1.5. 案例-小米有品

通過剛剛學習的內容，咱們來完成小米有品首頁的輪播效果

關鍵信息:

  1. 寬高：100%、160
  2. 循環、自動輪播，間隔 4000
  3. 圓點指示器：
    1. 選中顏色：白色
    2. 選中寬高：30、4
    3. 默認寬高：10、4

基礎模版：

@Entry
@Component
struct Page04_SwiperDemo_xiaomi {build() {Column() {Text('Swiper案例-小米').fontSize(20).fontWeight(900).padding(10)Swiper() {Image($r('app.media.ic_swiper_xmyp01'))Image($r('app.media.ic_swiper_xmyp02'))Image($r('app.media.ic_swiper_xmyp03'))Image($r('app.media.ic_swiper_xmyp04'))}}.width('100%').height('100%')}
}

參考代碼：

@Entry
@Component
struct Page04_SwiperDemo_xiaomi {build() {Column() {Text('Swiper案例-小米').fontSize(20).fontWeight(900).padding(10)Swiper() {Image($r('app.media.ic_swiper_xmyp01'))Image($r('app.media.ic_swiper_xmyp02'))Image($r('app.media.ic_swiper_xmyp03'))Image($r('app.media.ic_swiper_xmyp04'))}.width('100%').height(160).indicator(Indicator.dot()// 圓形導航點.selectedColor(Color.White)// 選中顏色.selectedItemWidth(30)// 選中寬度.selectedItemHeight(4)// 選中高度.itemWidth(10)// 默認寬度.itemHeight(4) // 默認高度)}.width('100%').height('100%')}
}

2. 樣式&結構重用

隨著頁面復雜程度提高，頁面中會有很多的樣式&結構代碼，其中難免重復的部分，如果可以提取出來重復使用，就可以提升編碼效率，減少重復代碼，提升代碼可讀性。

咱們來來學習3 種樣式&結構復用的語法：

  1. @Styles: 抽取公共樣式、事件
  2. @Extends：擴展組件樣式、事件
  3. @Builder：輕量級的元素復用機制（結構、樣式、事件）- 重點掌握

2.1. @Styles

@Styles 可以抽取 通用的事件和屬性，比如:

鏈接

Text(this.message).width(100).height(100).backgroundColor(this.bgColor).onClick(() => {this.bgColor = Color.Orange})Column() {
}
.width(100)
.height(100)
.backgroundColor(this.bgColor)
.onClick(() => {this.bgColor = Color.Orange
})Button('按鈕').width(100).height(100).backgroundColor(this.bgColor).onClick(() => {this.bgColor = Color.Orange})
Text(this.message).sizeAndColorFancy()Column() {
}
.sizeAndColorFancy()Button('按鈕').sizeAndColorFancy()

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

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

相關文章

前沿分享｜技術雷達202504月刊精華

前沿分享｜技術雷達202504月刊精華

本期雷達 ###技術部分 7. GraphRAG 試驗 在上次關于 檢索增強生成（RAG）的更新中，我們已經介紹了GraphRAG。它最初在微軟的文章中被描述為一個兩步的流程： （1）對文檔進行分塊，并使用基于大語言…
閱讀更多...
數據結構與算法-順序表應用

數據結構與算法-順序表應用

一.通訊錄的創建 首先我們要理解的是通訊錄本身就是以順序表為底層的 只不過順序表中的數組，這里我們是用結構體來替代，用來存儲用戶的信息 由于是通訊錄的本質就是順序表，所以順序表的任何方法它都能套用 Contact.h: #pragma once #def…
閱讀更多...
【C++】新手入門指南（下）

【C++】新手入門指南（下）

文章目錄 前言 一、引用 1.引用的概念和定義 2.引用的特性 3.引用的使用 4.const引用 5.指針和引用的關系 二、內聯函數 三、nullptr 總結 前言 這篇續上篇的內容新手入門指南（上），繼續帶大家學習新知識。如果你感興趣歡迎訂購本專欄。 一、…
閱讀更多...
uniapp-商城-33-shop 布局搜索頁面以及u-search

uniapp-商城-33-shop 布局搜索頁面以及u-search

shop頁面上有一個搜索&#xff0c;可以進行商品搜索&#xff0c;這里我們先做一個頁面布局&#xff0c;后面再來進行數據i聯動。 1、shop頁面的搜索 2、搜索的頁面代碼 <navigator class"searchView" url"/pagesub/pageshop/search/search"> …
閱讀更多...
SAP 采購訂單如何防止開票數量 大于 收貨數量呢

SAP 采購訂單如何防止開票數量 大于 收貨數量呢

配置點如下&#xff1a; 事務碼&#xff1a;OMRM&#xff0c;配置如下 當過賬開票的數量 大于收貨數量的時候會提示如下&#xff1a;
閱讀更多...
Kotlin 的 suspend 關鍵字

Kotlin 的 suspend 關鍵字

更多相關知識 Kotlin 的 suspend 關鍵字是 Kotlin 協程的核心組成部分&#xff0c;它用于標記一個函數可以被掛起&#xff08;暫停執行&#xff09;并在稍后恢復執行&#xff0c;而不會阻塞線程。 理解 suspend 的作用需要從以下幾個方面入手&#xff1a; 1. 允許非阻塞的異步…
閱讀更多...
UDS診斷協議iso-14229 15765

UDS診斷協議iso-14229 15765

Diagnostic request 形式多種： 1.SID+DID 2.SID+Sub-Func+DID 3.SID+Sub-Func SID占1個Byte，Sub-func占一個Byte，DID通常兩個Byte eg.10 01 (SID+Sub-Func) 10 03 05 02 (SID+Sub-Func+DID) 22 02 00 (SID+DID) 肯定響應抑制位 抑制正響應信息除非是收到NRC 0x78的情況下 不…
閱讀更多...
記錄一次使用面向對象的C語言封裝步進電機驅動

記錄一次使用面向對象的C語言封裝步進電機驅動

簡介 (2025/4/21) 本庫對目前僅針對TB6600驅動下的42步進電機的基礎功能進行了一定的封裝, 也是我初次嘗試以面向對象的思想去編寫嵌入式代碼, 和直流電機的驅動步驟相似在調用stepmotor_attach()函數和stepmotor_init()函數之后僅通過結構體數組stepm然后指定枚舉變量中的id即…
閱讀更多...
[創業之路-376]：企業法務 - 創業，不同的企業形態，個人承擔的風險、收益、稅費、成本不同

[創業之路-376]：企業法務 - 創業，不同的企業形態，個人承擔的風險、收益、稅費、成本不同

在企業法務領域&#xff0c;創業時選擇不同的企業形態&#xff0c;個人在風險承擔、收益分配、稅費負擔及運營成本方面存在顯著差異。以下從個人獨資企業、合伙企業、有限責任公司、股份有限公司四種常見形態展開分析&#xff1a; 一、個人承擔的風險 個人獨資企業 風險類型&…
閱讀更多...
GNOME桌面隱藏回收站和分區

GNOME桌面隱藏回收站和分區

dconf-editor 搜索 trash&#xff0c;關閉 show-trash 搜索 volumes&#xff0c;關閉 show-volumns
閱讀更多...
準確--Tomcat更換證書

準確--Tomcat更換證書

具體意思是&#xff1a; Starting Coyote HTTP/1.1 on http-8080: HTTP 連接器&#xff08;端口 8080&#xff09;啟動成功了。嚴重: Failed to load keystore type PKCS12 with path conf/jlksearch.fzsmk.cn.pfx due to failed to decrypt safe contents entry: javax.crypt…
閱讀更多...
禁止ubuntu自動更新

禁止ubuntu自動更新

由于ubuntu server和desktop版本都默認 啟動了&#xff0c;自動更新內核的操作。這對于生 產環境來說是不友好的。容易導致億賽通 無法啟動 默認開啟了內核自動更新所以我們關閉自 動內核更新。 1.禁止更新執行 sudo apt-mark hold linux-image-generic linux-headers-generic…
閱讀更多...
vue3 + element-plus中el-drawer抽屜滾動條回到頂部

vue3 + element-plus中el-drawer抽屜滾動條回到頂部

el-drawer抽屜滾動條回到頂部 <script setup lang"ts" name"PerformanceLogQuery"> import { ref, nextTick } from "vue"; ...... // 詳情 import { performanceLogQueryByIdService } from "/api/performanceLog"; const onD…
閱讀更多...
【重走C++學習之路】16、AVL樹

【重走C++學習之路】16、AVL樹

目錄 一、概念 二、AVL樹的模擬實現 2.1 AVL樹節點定義 2.2 AVL樹的基本結構 2.3 AVL樹的插入 1. 插入步驟 2. 調節平衡因子 3. 旋轉處理 4. 開始插入 2.4 AVL樹的查找 2.5 AVL樹的刪除 1. 刪除步驟 2. 調節平衡因子 3. 旋轉處理 4. 開始刪除 結語 一、概念 …
閱讀更多...
char32_t、char16_t、wchar_t 用于 c++ 語言里存儲 unicode 編碼的字符，給出它們的具體定義

char32_t、char16_t、wchar_t 用于 c++ 語言里存儲 unicode 編碼的字符，給出它們的具體定義

&#xff08;1&#xff09; #include <iostream> #include <string>int main() { std::u16string s u"C11 引入 char16_t"; // 定義 UTF-16 字符串for (char16_t c : s) // 遍歷輸出每個 char16_t 的值std::cout << std::hex << (…
閱讀更多...
redis數據類型-基數統計HyperLogLog

redis數據類型-基數統計HyperLogLog

redis數據類型-基數統計HyperLogLog 文檔 redis單機安裝redis常用的五種數據類型redis數據類型-位圖bitmap 說明 官網操作命令指南頁面&#xff1a;https://redis.io/docs/latest/commands/?nameget&groupstringHyperLogLog介紹頁面&#xff1a;https://redis.io/docs…
閱讀更多...
邏輯思維：從混沌到秩序的理性推演在軟件開發中的應用

邏輯思維：從混沌到秩序的理性推演在軟件開發中的應用

引言 在軟件開發的過程中&#xff0c;邏輯思維就像是開發者的“GPS導航”&#xff0c;幫助我們從混沌的需求中找到清晰的解決方案。想象一下&#xff0c;如果沒有邏輯思維&#xff0c;我們可能會在需求的海洋中迷失方向&#xff0c;最終寫出一堆“看似聰明但毫無意義”的代碼。…
閱讀更多...
Spring AI Alibaba Graph基于 ReAct Agent 的天氣預報查詢系統

Spring AI Alibaba Graph基于 ReAct Agent 的天氣預報查詢系統

1、在本示例中&#xff0c;我們僅為 Agent 綁定了一個天氣查詢服務&#xff0c;接收到用戶的天氣查詢服務后&#xff0c;流程會在 AgentNode 和 ToolNode 之間循環執行&#xff0c;直到完成用戶指令。示例中判斷指令完成的條件&#xff08;即 ReAct 結束條件&#xff09;也很簡…
閱讀更多...
HCIP(綜合實驗2)

HCIP(綜合實驗2)

1.實驗拓補圖 2.實驗要求 1.根據提供材料劃分VLAN以及IP地址&#xff0c;PC1/PC2屬于生產一部員工劃分VLAN10,PC3屬于生產二部劃分VLAN20 2.HJ-1HJ-2交換機需要配置鏈路聚合以保證業務數據訪問的高帶寬需求 3.VLAN的放通遵循最小VLAN透傳原則 4.配置MSTP生成樹解決二層環路問題…
閱讀更多...
使用 rebase 輕松管理主干分支

使用 rebase 輕松管理主干分支

前言 最近遇到一個技術團隊的 dev 環境分支錯亂&#xff0c;因為是多人合作大家各自提交信息&#xff0c;導致出現很多交叉合并記錄&#xff0c;讓對應 log 看起來非常混亂&#xff0c;難以閱讀。 舉例說明 假設我們有一個項目&#xff0c;最初develop分支有 3 個提交記錄&a…
閱讀更多...
最新文章

Copyright @ 2022~2023