任務一：使用“Swiper 輪播組件”對自行選擇的圖片和文本素材分別進行輪播，且調整對應的“loop”、“autoPlay”“interval”、“vertical”屬性，實現不同的輪播效果，使用Swiper 樣式自定義，修改默認小圓點和被選中小圓點的尺寸及背景。

任務二：自行選擇素材，分別使用“@Extend”、“@Styles”和“@Builder”實現結構或樣式或事件的重用。

實驗一：

@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Swiper(){//1.輪播內容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'))}//2.設置尺寸（內容會自動拉伸）//tips：給外層設置寬高，未來的子元素都會進行統一的拉伸.width('100%').height(100).loop(true) //是否開啟循環.autoPlay(true)  //是否自動播放.interval(4000)  //自動播放時間間隔-4s.vertical(true)  //縱向輪播//定制小圓點.indicator(Indicator.dot()  //小圓點.itemWidth(20)  //默認的寬.itemHeight(5)  //默認的高.color(Color.Gray)  //默認的顏色.selectedItemWidth(30)  //選中的寬.selectedItemHeight(5)  //選中的高.selectedColor(Color.White)  //選中的顏色)}
}

實驗二：

//全局 Builder
@Builder
function navItem(icon:ResourceStr,txt:string){Column({space:10}) {Image(icon).width('80%')Text(txt)}.width('25%').onClick(()=>{AlertDialog.show({message:'點擊了'+txt})})
}@Entry
@Componentstruct Index {@State message: string = 'Hello World';build() {Row(){Row(){navItem($r('app.media.ic_reuse_01'),'阿里拍賣')navItem($r('app.media.ic_reuse_02'),'菜鳥')navItem($r('app.media.ic_reuse_03'),'芭芭農場')navItem($r('app.media.ic_reuse_04'),'阿里藥房')}}}}

參考資料：75-Swiper-輪播圖&常用屬性&小米案例_嗶哩嗶哩_bilibili