[[382656]]

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com/#zz

1、swiper輪播圖

微信小程序的swiper組件中只能放置swiper-item，而鴻蒙js的swiper組件中可以放置除list之外的任意組件，功能更強大。除之前講過用swiper結合自定義tabbar實現底部菜單分頁功能，swiper最常用的就是首頁的輪播圖了。

swiper的屬性可見官方文檔（https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-swiper-0000000000611533），開發者工具在duration屬性的代碼提示是有bug的，這里應填的是毫秒數：

<swiper autoplay="true" duration="1000" interval="3000" indicator="true" loop="true" vertical="false"> 
      <block for="{{ swipeImg }}"> 
          <image src="{{ $item }}"></image> 
      </block> 
  </swiper> 

代碼中swiper的后四個屬性所填的都是默認值，可以省略。

2、image-animator幻燈片

swiper是滾動輪播圖的效果，image-animator組件提供了類似幻燈片一樣的圖片切換效果。它不支持任何的子組件，且只支持圖片。官方文檔（https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-image-animator-0000001050066126）。

image-animator的duration屬性與swiper的duration屬性不同，它支持給定單位，不給單位默認為ms。且文檔中寫的“單次播放時長”其實是一次播放完所有圖片的時長，每張圖片的顯示時長被均分。

<image-animator duration="8s" images="{{ animatorImg }}"></image-animator> 

images數組格式：

"animatorImg": [ 
     { 
         "src": "newyear1.jpeg" 
     }, 
     { 
         "src": "newyear2.jpeg" 
     }, 
     { 
         "src": "newyear3.jpeg" 
     }, 
     { 
         "src": "newyear4.jpeg" 
     } 
 ], 

支持設置fixedsize="false"，即可在數組中指定每幅圖片的長、寬、偏移量。

<image-animator duration="8s" images="{{ animatorImg }}" fixedsize="false"></image-animator> 

"animatorImg": [ 
    { 
        "src": "newyear1.jpeg", 
        "width": 500, 
        "height": 500 
    }, 
    { 
        "src": "newyear2.jpeg" 
    }, 
    { 
        "src": "newyear3.jpeg" 
    }, 
    { 
        "src": "newyear4.jpeg", 
        "width": 400, 
        "height": 400, 
        "top": 100, 
        "left": 100 
    } 
], 

3、marquee跑馬燈

marquee組件提供了一種跑馬燈的文字效果，文字從屏幕右側開始出現，并向屏幕左側滾動。適合做滾動通知，或是手表類的布局。

<marquee> 
    {{ text }} 
</marquee> 

整體代碼和效果圖：

hml:

<div class="container"> 
    <swiper autoplay="true" duration="1000" interval="3000" indicator="true" loop="true" vertical="false"> 
        <block for="{{ swipeImg }}"> 
            <image src="{{ $item }}"></image> 
        </block> 
    </swiper> 
    <marquee> 
        {{ text }} 
    </marquee> 
    <image-animator duration="8s" images="{{ animatorImg }}" fixedsize="false"></image-animator> 
</div> 

css:

.container { 
    display: flex; 
    flex-direction: column; 
    width: 100%; 
    height: 1200px; 
} 
swiper { 
    width: 100%; 
    height: 350px; 
} 
swiper image { 
    width: 100%; 
    height: 350px; 
} 
 
marquee { 
    margin-top: 20px; 
    margin-bottom: 20px; 
    width: 100%; 
} 
 
image-animator { 
    width: 100%; 
    height: 550px; 
} 

js: （采用動靜分離，詳見下文）

import fetch from '@system.fetch'; 
 
export default { 
    data: { 
        dataUrl: "http://milkytea.free.idcfengye.com/text/newyear.json", 
        swipeImg: [], 
        text: "", 
        animatorImg: [] 
    }, 
    onInit() { 
        fetch.fetch({ 
            url: this.dataUrl, 
            responseType: 'json', 
            success: res => { 
                let data = JSON.parse(res.data); 
                let imgUrl = data.imgUrl; 
                let swipeImg = data.swipeImg; 
                let animatorImg = data.animatorImg; 
                for (let i in swipeImg) { 
                    swipeImg[i] = imgUrl + swipeImg[i]; 
                } 
                for (let i in animatorImg) { 
                    animatorImg[i].src = imgUrl + animatorImg[i].src; 
                } 
                this.swipeImg = swipeImg; 
                this.text = data.text; 
                this.animatorImg = animatorImg; 
            } 
        }) 
    } 
} 

4、nginx動靜分離

在這個模塊中，我并沒有將圖片放在項目工程目錄中，甚至圖片的url都沒有寫在js文件中。一是現在app功能越發強大，占用的存儲空間也越來越大，如果將靜態資源全部存放在工程目錄中加大了空間的占用量。二是如果圖片定期更換，或者服務器地址更換，寫在代碼里不便于維護。

nginx服務器可以實現動靜分離，將本地路徑作為靜態資源服務器。基本配置如下，在nginx.conf中添加一個server：

server{ 
      listen 8500; 
      server_name localhost; 
 
      location / { 
          root /Users/liuyufeng/image/; 
          autoindex on; 
      } 
 
      location ~ ^/(images|text|video|audio)/ { 
          root /Users/liuyufeng/image/; 
          autoindex on; 
          access_log on; 
          expires 30d; 
      } 
  } 

將本地文件夾"/Users/liuyufeng/image"和localhost:8500綁定，并通過正則匹配"images","text","video","audio"四個子目錄，分別存放圖片、文本、視頻、音頻。重啟nginx后，訪問localhost:8500：

本地目錄就成為了靜態資源服務器，不得不感嘆nginx的強大。

在鴻蒙項目中，總不能請求localhost，因此再搭配內網穿透，將本地服務器和域名綁定就可以了。

剛才模塊中的js代碼，就是通過請求靜態資源中的newyear.json文件獲取圖片路徑以及文字數據，實現了動靜分離。

newyear.json

{ 
    "imgUrl": "http://milkytea.free.idcfengye.com/images/newyear/", 
    "swipeImg": ["swiper1.jpg", "swiper2.jpg", "swiper3.jpg"], 
    "animatorImg": [ 
        { 
            "src": "newyear1.jpeg", 
            "width": 500, 
            "height": 500 
        }, 
        { 
            "src": "newyear2.jpeg" 
        }, 
        { 
            "src": "newyear3.jpeg" 
        }, 
        { 
            "src": "newyear4.jpeg", 
            "width": 400, 
            "height": 400, 
            "top": 100, 
            "left": 100 
        } 
    ], 
    "text": "新春佳節，快樂假期，祝你放假快樂，闔家幸福，新春大吉!  福氣高，樂逍遙，生活日日美，收入月月高。" 
} 

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com/#zz