[[382656]]

想了解更多內(nèi)容，請?jiān)L問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

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

1、swiper輪播圖

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

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

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

代碼中swiper的后四個(gè)屬性所填的都是默認(rèn)值，可以省略。

2、image-animator幻燈片

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

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

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

images數(shù)組格式：

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

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

<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組件提供了一種跑馬燈的文字效果，文字從屏幕右側(cè)開始出現(xiàn)，并向屏幕左側(cè)滾動(dòng)。適合做滾動(dòng)通知，或是手表類的布局。

<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: （采用動(dòng)靜分離，詳見下文）

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動(dòng)靜分離

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

nginx服務(wù)器可以實(shí)現(xiàn)動(dòng)靜分離，將本地路徑作為靜態(tài)資源服務(wù)器。基本配置如下，在nginx.conf中添加一個(gè)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"四個(gè)子目錄，分別存放圖片、文本、視頻、音頻。重啟nginx后，訪問localhost:8500：

本地目錄就成為了靜態(tài)資源服務(wù)器，不得不感嘆nginx的強(qiáng)大。

在鴻蒙項(xiàng)目中，總不能請求localhost，因此再搭配內(nèi)網(wǎng)穿透，將本地服務(wù)器和域名綁定就可以了。

剛才模塊中的js代碼，就是通過請求靜態(tài)資源中的newyear.json文件獲取圖片路徑以及文字?jǐn)?shù)據(jù)，實(shí)現(xiàn)了動(dòng)靜分離。

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": "新春佳節(jié)，快樂假期，祝你放假快樂，闔家幸福，新春大吉!  福氣高，樂逍遙，生活日日美，收入月月高。" 
} 

想了解更多內(nèi)容，請?jiān)L問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

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