當前位置：首頁 > news >正文

wordpress文章批量編輯器官網(wǎng)seo是什么意思

news 2025/7/15 7:08:07

wordpress文章批量編輯器,官網(wǎng)seo是什么意思,做短袖的網(wǎng)站,網(wǎng)站開發(fā)Z億瑪酷1訂制序言： 本文詳細講解了關于我們在頁面上經(jīng)?？吹降妮啿D在鴻蒙開發(fā)中如何用Swiper實現(xiàn)，介紹了Swiper的基本用法與屬性，及如何面對大段的重復代碼進行封裝和重用（Extend、Styles、Builder），使代碼更加簡潔易…

序言：

本文詳細講解了關于我們在頁面上經(jīng)?？吹降妮啿D在鴻蒙開發(fā)中如何用Swiper實現(xiàn)，介紹了Swiper的基本用法與屬性，及如何面對大段的重復代碼進行封裝和重用（@Extend、@Styles、@Builder），使代碼更加簡潔易讀。

筆者也是跟著B站黑馬的課程一步步學習，學習的過程中添加部分自己的想法整理為筆記分享出來，如有代碼錯誤或筆誤，歡迎指正。

B站黑馬的課程鏈接：鴻蒙課程介紹_嗶哩嗶哩_bilibili

往期筆記：

【01】純血鴻蒙HarmonyOS NEXT星河版開發(fā)0基礎學習筆記-ArkTs基礎語法與界面開發(fā)基礎

【02】純血鴻蒙HarmonyOS NEXT星河版開發(fā)0基礎學習筆記-界面進階與布局排布（附QQ登陸、得物、京東登陸綜合案例+代碼）

【03】純血鴻蒙HarmonyOS NEXT星河版開發(fā)0基礎學習筆記-更多布局（彈性/層疊）方式與界面開發(fā)綜合（附飛狗卡片+B站卡片案例+實戰(zhàn)開發(fā)支付寶界面+代碼）

【04】純血鴻蒙HarmonyOS NEXT星河版開發(fā)0基礎學習筆記-ArkTs進階運算符+狀態(tài)管理（附綜合案例美團購物車）

【05】純血鴻蒙HarmonyOS NEXT星河版開發(fā)0基礎學習筆記-條件渲染+if/switch判斷與for/while循環(huán)（附計數(shù)器、京東加購案例）
【06】純血鴻蒙HarmonyOS NEXT星河版開發(fā)0基礎學習筆記-綜合案例·生肖抽獎卡具體實現(xiàn)（類似支付寶集五福）

一.Swiper輪播組件

簡介：

Swiper是一個容器組件，當設置了多個子組件后，可以對這些子組件進行輪播顯示。（圖片、文字...）

1.Swiper的基本用法

1）語法結構：

    Swiper(){//1.輪播內(nèi)容}//2.設置尺寸（內(nèi)容會自動拉伸）.width('100%').height(100)

2）使用案例：

  build() {Column(){//Swiper 輪播組件的基本使用Swiper(){//1.輪播內(nèi)容Text('1').backgroundColor(Color.Orange)Text('2').backgroundColor(Color.Blue)Text('3').backgroundColor(Color.Gray)}//2.設置尺寸（內(nèi)容會自動拉伸）//tips：給外層設置寬高，未來的子元素都會進行統(tǒng)一的拉伸.width('100%').height(100)Swiper(){//1.輪播內(nèi)容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.設置尺寸（內(nèi)容會自動拉伸）//tips：給外層設置寬高，未來的子元素都會進行統(tǒng)一的拉伸.width('100%').height(100)}}

2.Swiper的常見屬性

1）Swiper的常見屬性

屬性方法	傳值	作用	默認值
loop	boolean	是否開啟循環(huán)	true
autoPlay	boolean	是否自動播放	false
interval	number	自動播放時間間隔（ms）	3000
vertical	boolean	縱向滑動輪播	false
...其他屬性	見文檔

2）需求

使用上述屬性，將剛剛的輪播圖調(diào)整為

①自動播放

②播放間隔：4s

③縱向滑動

      Swiper(){//1.輪播內(nèi)容Text('1').backgroundColor(Color.Orange)Text('2').backgroundColor(Color.Blue)Text('3').backgroundColor(Color.Gray)}//2.設置尺寸（內(nèi)容會自動拉伸）//tips：給外層設置寬高，未來的子元素都會進行統(tǒng)一的拉伸.width('100%').height(100).loop(true) //是否開啟循環(huán).autoPlay(true)  //是否自動播放.interval(4000)  //自動播放時間間隔-4s.vertical(true)  //縱向輪播

改為了縱向滑動→通常會在手機宣傳頁出現(xiàn)

3.Swiper樣式自定義

1）使用案例：

      Swiper(){//1.輪播內(nèi)容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.設置尺寸（內(nèi)容會自動拉伸）//tips：給外層設置寬高，未來的子元素都會進行統(tǒng)一的拉伸.width('100%').height(100)//定制小圓點.indicator(Indicator.dot()  //小圓點.itemWidth(20)  //默認的寬.itemHeight(5)  //默認的高.color(Color.Gray)  //默認的顏色.selectedItemWidth(30)  //選中的寬.selectedItemHeight(5)  //選中的高.selectedColor(Color.White)  //選中的顏色)

tips：

aspectRatio(1)  //寬高比例為1
aspectRatio(2)  //寬高比例為2
//等比例縮放用于根據(jù)不同設備想要相同的視覺效果，保持圖片的正常適配

二.樣式&結構重用

1.@Extend：擴展組件（樣式、事件）

1）原代碼：

     Swiper(){//1.輪播內(nèi)容Text('1').backgroundColor(Color.Orange).textAlign(TextAlign.Center).fontColor(Color.White).fontSize(30).onClick(()=>{AlertDialog.show({message:'我是輪播圖1號'})})Text('2').backgroundColor(Color.Blue).textAlign(TextAlign.Center).fontColor(Color.White).fontSize(30).onClick(()=>{AlertDialog.show({message:'我是輪播圖2號'})})Text('3').backgroundColor(Color.Gray).textAlign(TextAlign.Center).fontColor(Color.White).fontSize(30).onClick(()=>{AlertDialog.show({message:'我是輪播圖3號'})})}//2.設置尺寸（內(nèi)容會自動拉伸）//tips：給外層設置寬高，未來的子元素都會進行統(tǒng)一的拉伸.width('100%').height(100).loop(true).autoPlay(true).interval(4000)

2）組件重寫的方法和圖示

@Extend(Text)
function textExtend(color:ResourceColor,txt:string){.backgroundColor(color).textAlign(TextAlign.Center).fontColor(Color.White).fontSize(30).onClick(()=>{AlertDialog.show({message:txt})})
}

3）重寫達成的效果：

①代碼部分：

     Swiper(){//1.輪播內(nèi)容Text('4').textExtend(Color.Red,'我是輪播圖4號')Text('5').textExtend(Color.Yellow,'我是輪播圖5號')Text('6').textExtend(Color.Pink,'我是輪播圖6號')}//2.設置尺寸（內(nèi)容會自動拉伸）//tips：給外層設置寬高，未來的子元素都會進行統(tǒng)一的拉伸.width('100%').height(100).loop(true).autoPlay(true).interval(4000)

②圖示：

顯而易見于上面啰嗦的代碼，通過封裝大段相同的代碼，我們的代碼會變得更加簡潔高效

2.@Style：抽取通用屬性、事件

1）原文件：

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

2）組件重寫的方法與圖示

①帶this的全局用不了，組件內(nèi)定義就可以用

②例如onClick這種帶邏輯的，也是看帶不帶this，帶this的就放在組件內(nèi)定義

③Styles不支持傳參

④因為全局定義無法獲取this，所以組件內(nèi)定義要比全局更加常用

Column(){Text(this.message).commonStyles().setBg()Button('按鈕').commonStyles().setBg()Column(){}.commonStyles().setBg()}

3.@Builder：自定義構建函數(shù)（結構、樣式、事件）

1）原代碼：

    Row(){Column(){Image($r('app.media.ic_reuse_01')).width('80%')Text('阿里拍賣')}.width('25%').onClick(()=>{AlertDialog.show({message:'點擊了 阿里拍賣'})})Column(){Image($r('app.media.ic_reuse_02')).width('80%')Text('菜鳥')}.width('25%').onClick(()=>{AlertDialog.show({message:'點擊了 菜鳥'})})Column(){Image($r('app.media.ic_reuse_03')).width('80%')Text('芭芭農(nóng)場')}.width('25%').onClick(()=>{AlertDialog.show({message:'點擊了 芭芭農(nóng)場'})})Column(){Image($r('app.media.ic_reuse_04')).width('80%')Text('阿里藥房')}.width('25%').onClick(()=>{AlertDialog.show({message:'點擊了 阿里藥房'})})}

2）組件重寫的方法與圖示

//全局 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'),'芭芭農(nóng)場')navItem($r('app.media.ic_reuse_04'),'阿里藥房')}}}}