耐克1網(wǎng)站建設(shè)的總體目標,軟件技術(shù)培訓(xùn),網(wǎng)站新聞后臺怎么做,wordpress要ftp#x1f966; 鴻蒙學(xué)習(xí)實戰(zhàn)之路-Swiper 輪播組件全攻略 最近好多朋友問我#xff1a;“鴻蒙里的輪播圖怎么搞啊#xff1f;是不是和前端的 Swiper 差不多#xff1f;” 哎#xff0c;這你可問對人了#xff01;作為一個把 npm install 炒成 ohpm install 的前端廚子_ 鴻蒙學(xué)習(xí)實戰(zhàn)之路-Swiper 輪播組件全攻略最近好多朋友問我“鴻蒙里的輪播圖怎么搞啊是不是和前端的 Swiper 差不多” 哎這你可問對人了作為一個把npm install炒成ohpm install的前端廚子_今天我就手把手帶你搞定 HarmonyOS 里的 Swiper 輪播組件咱們今天的目標很明確從 Swiper 的基本用法到高級定制再到實際案例包教包會全程實操沒有虛的一、Swiper 組件是什么Swiper 組件提供滑動輪播顯示的能力本身是一個容器組件當設(shè)置了多個子組件后可以對這些子組件進行輪播顯示。你可以把它理解為前端的 Swiper 插件但更原生、更貼合 HarmonyOS 的聲明式 UI 體系。看看這些常見的使用場景二、Swiper 基本用法1. 設(shè)置輪播內(nèi)容和尺寸輪播內(nèi)容很簡單直接作為 Swiper 的子組件即可。尺寸有兩種設(shè)置方式設(shè)置 Swiper 的尺寸內(nèi)容會拉伸為和 Swiper 一致優(yōu)先級高設(shè)置內(nèi)容尺寸會將 Swiper 撐開Entry Component struct SwiperBasic { build() { Column() { Text(Swiper基本使用) .fontSize(20) .fontWeight(900) .padding(10) Swiper() { Text( 西蘭花) .textAlign(TextAlign.Center) .backgroundColor(Color.Red) .fontColor(Color.White) .fontSize(30) Text( 西紅柿) .textAlign(TextAlign.Center) .backgroundColor(Color.Green) .fontColor(Color.White) .fontSize(30) Text( 胡蘿卜) .textAlign(TextAlign.Center) .backgroundColor(Color.Blue) .fontColor(Color.White) .fontSize(30) } .width(100%) .height(100) } .width(100%) .height(100%) } }運行效果就是這樣滴西蘭花小貼士建議優(yōu)先設(shè)置 Swiper 的尺寸這樣可以更好地控制輪播區(qū)域的大小避免內(nèi)容撐開導(dǎo)致的布局問題。三、Swiper 常用屬性設(shè)置了基礎(chǔ)內(nèi)容后咱們來看看一些高頻使用的屬性屬性名類型說明默認值loopboolean是否開啟循環(huán)。在 LazyForEach 模式下建議組件數(shù)量大于 5 個trueautoPlayboolean是否自動播放falseintervalnumber自動播放時間間隔毫秒3000verticalboolean是否縱向滑動false咱們來試試這些屬性的效果把輪播圖調(diào)整為自動播放、4 秒間隔、縱向滑動Entry Component struct SwiperAttributes { 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) // 是否開啟循環(huán) .autoPlay(true) // 自動播放 .interval(4000) // 4秒切換一次 .vertical(true) // 縱向滑動 } .width(100%) .height(100%) } }效果如下西蘭花警告當 loop 為 false 時自動輪播到最后一頁會停止但如果用戶手動滑動后只要不是最后一頁就會繼續(xù)自動播放哦別問我怎么知道的都是淚…四、導(dǎo)航點的調(diào)整默認的導(dǎo)航點可能不符合你的設(shè)計需求沒關(guān)系咱們可以自定義導(dǎo)航點的調(diào)整主要分兩類顯示或隱藏導(dǎo)航點類型圓點指示器重點掌握數(shù)字指示器了解即可1. 基礎(chǔ)控制Swiper() { // 輪播內(nèi)容 } // .indicator(false) // 關(guān)閉導(dǎo)航點 // .indicator(Indicator.dot()) // 圓點指示器默認 // .indicator(Indicator.digit()) // 數(shù)字指示器2. 自定義圓點導(dǎo)航點日常開發(fā)中最常用的就是圓點指示器咱們重點掌握如何調(diào)整它位置屬性left/top/right/bottom設(shè)置導(dǎo)航點距離 Swiper 邊緣的距離樣式屬性itemWidth/itemHeight默認指示器的寬高selectedItemWidth/selectedItemHeight選中指示器的寬高color默認指示器顏色selectedColor選中指示器顏色來個實際例子Entry Component struct SwiperIndicator { build() { Column() { Text(Swiper導(dǎo)航點自定義) .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( Indicator.dot() .left(10) // 左側(cè)距離 .bottom(10) // 底部距離 .itemWidth(20) // 默認指示器寬度 .itemHeight(20) // 默認指示器高度 .selectedItemWidth(30) // 選中指示器寬度 .selectedItemHeight(30) // 選中指示器高度 .selectedColor(Color.Yellow) // 選中顏色 .color(Color.Blue) // 默認顏色 ) } .width(100%) .height(100%) } }調(diào)整后的效果西蘭花小貼士導(dǎo)航點的位置屬性可以組合使用不需要全部設(shè)置。比如想把導(dǎo)航點放在右下角只需要設(shè)置.right(10)和.bottom(10)就可以啦五、實戰(zhàn)案例-小米有品輪播圖光說不練假把式咱們來實現(xiàn)一個小米有品首頁的輪播效果代碼中的圖片素材可以替換為任意的內(nèi)容需求分析寬高100%、160循環(huán)播放、自動輪播間隔 4 秒圓點指示器選中顏色白色選中寬高30、4默認寬高10、4實現(xiàn)代碼Entry Component struct SwiperXiaomiCase { 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) .loop(true) // 開啟循環(huán) .autoPlay(true) // 自動播放 .interval(4000) // 4秒間隔 .indicator( Indicator.dot() .bottom(10) // 距離底部10vp .selectedColor(Color.White) // 選中顏色白色 .selectedItemWidth(30) // 選中寬度30vp .selectedItemHeight(4) // 選中高度4vp .itemWidth(10) // 默認寬度10vp .itemHeight(4) // 默認高度4vp .color(#88FFFFFF) // 默認顏色半透明白色 ) } .width(100%) .height(100%) } }實現(xiàn)效果西蘭花警告別忘記在你的項目資源文件夾里添加對應(yīng)的輪播圖片哦可以去小米有品官網(wǎng)找?guī)讖垬訄D或者用自己的圖片代替。六、總結(jié)與技巧重點回顧基本用法Swiper 作為容器組件子組件即為輪播內(nèi)容核心屬性loop循環(huán)、autoPlay自動播放、interval間隔、vertical方向?qū)Ш近c支持圓點和數(shù)字兩種類型可自定義位置和樣式實戰(zhàn)案例通過小米有品輪播圖掌握綜合應(yīng)用高級技巧懶加載結(jié)合 LazyForEach 使用可以高效加載大量輪播內(nèi)容事件監(jiān)聽可以監(jiān)聽 change 事件實現(xiàn)輪播切換時的聯(lián)動效果手勢控制支持觸摸滑動用戶體驗更好西蘭花小貼士當輪播內(nèi)容很多時記得使用 LazyForEach 懶加載這樣可以提高性能避免一次性加載所有內(nèi)容導(dǎo)致的卡頓 下一步行動今天咱們搞定了 Swiper 輪播組件是不是超簡單o(╯□╰)o 其實鴻蒙里的很多組件都和前端有相似之處只要掌握了規(guī)律學(xué)習(xí)起來并不難推薦資料官方文檔Swiper 組件組件參考Swiper API我是鹽焗西蘭花不教理論只給你能跑的代碼和避坑指南。下期見