harmonyos swiper的使用

一組按鈕，分成兩頁，使用swiper展示

index.hml調用：

<swiper class="swiper" id="swiper" index="0" indicator="true" loop="false" digital="false" on:change="changeSwiper">
                        <div class = "swiperContent" for="{{autoModeSwiperArr}}" tid="name">
                            <div class="fun-grid">
                                <div for="{{$item.value}}" tid="name">
                                    <div class="fun-grid-item" onclick="controlAutoClick({{$item.label}},{{$item.value}})" disabled="{{!(onOffStatus=='true')}}">
                                        <div class="grid-item-parent-vertical">
                                            <text class="fun-name" style="opacity: {{isOnLine=='true'?(onOffStatus=='true'?1:0.38):0.38}};">{{$item.name}}</text>
                                            <text class="fun-status" if="{{onOffStatus=='true'}}" show="{{isOnLine=='true'?$item.value==autoMode?true:false:false}}">已開啟</text>
                                            <text class="fun-status" else show="false">已開啟</text>
                                        </div>
                                        <div class="onOffLine_status" style="flex: 2;">
                                            <image if="{{onOffStatus=='true'}}" src="{{isOnLine=='true'?$item.value==autoMode?$item.activeIcon:$item.icon:$item.offIcon}}" class="statusImg"></image>
                                            <image else src="{{$item.offIcon}}" class="statusImg"></image>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </swiper>
           

資料處理index.js:

原始資料見上一篇的配置檔案，這裡隻是将原始資料處理成swiper可用的資料結構；

（确定為兩頁顯示時的資料處理）

getSwiperData() {
        var swiper1 = [];
        var swiper2 = [];
        for (var index = 0; index < this.autoModeArr.length; index++) {
            const element = this.autoModeArr[index];
            if (this.autoMode == element.value) {
                element.flag = true;
            } else {
                element.flag = false;
            }
            if (index < 6) {
                swiper1.push(element);
            }else {
                swiper2.push(element)
            }
        }
        if (swiper1.length > 0) {
            this.autoModeSwiperArr.push({name:'swiper1',value:swiper1})
        }
        if (swiper2.length > 0) {
            this.autoModeSwiperArr.push({name:'swiper2',value:swiper2})
        }
        console.log("getSwiperData==="+JSON.stringify(this.autoModeSwiperArr));
    },
           

當頁數不定時的資料處理：

getSwiperData1() {
        var count = Math.ceil(this.autoModeArr.length/6);
        for (var index = 0; index < this.autoModeArr.length; index++) {
            const element = this.autoModeArr[index];
            if (this.autoMode == element.value) {
                element.flag = true;
            } else {
                element.flag = false;
            }
        }
        for (var index = 0; index < count; index++) {
            this.autoModeSwiperArr.push({name:'swiper2',value:this.autoModeArr.slice(index*6,index*6+6)});
        }
        console.log('swiperDataList===='+JSON.stringify(this.autoModeSwiperArr));
    },
           

index.css:

.swiper {
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 510px;
    indicator-color: #cf2411;
    indicator-selected-color: greenyellow;
    indicator-size: 14px;
    indicator-bottom: -20px;
    padding-left: 10px;
    padding-right: 10px;
}

.swiperContent {
    height: 100%;
    justify-content: center;
}

.fun-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows:138px 138px 138px;
    grid-gap:16px;
    margin-bottom: 18px;
    margin-top: 16px;
}

.fun-grid-item {
    height: 138px;
    border-radius: 24px;
    background-color: #ffffff;
    text-align: center;
    align-items: center;
    width: 100%;
}
           

swiper的屬性：

名稱	類型	預設值	必填	描述
index	number	否	目前在容器中顯示的子元件的索引值。
autoplay	boolean	false	否	子元件是否自動播放，自動播放狀态下，導航點不可操作5+。
interval	number	3000	否	使用自動播放時播放的時間間隔，機關為ms。
indicator	boolean	true	否	是否啟用導航點訓示器，預設true。
digital	boolean	false	否	是否啟用數字導航點，預設為false。 說明 必須設定indicator時才能生效數字導航點。
indicatormask	boolean	false	否	是否采用訓示器蒙版，設定為true時，訓示器會有漸變蒙版出現。 說明 手機上不生效5+。
indicatordisabled	boolean	false	否	訓示器是否禁止使用者手勢操作，設定為true時，訓示器不會響應使用者的點選拖拽。
loop	boolean	true	否	是否開啟循環滑動。
duration	number	-	否	子元件切換的動畫時長。
vertical	boolean	false	否	是否為縱向滑動，縱向滑動時采用縱向的訓示器。

樣式：

indicator-color	<color>	-	否	導航點訓示器的填充顔色。
indicator-selected-color	<color>	手機：#ff007dff 智慧屏：#ffffffff 智能穿戴：#ffffffff	否	導航點訓示器選中的顔色。
indicator-size	<length>	4px	否	導航點訓示器的直徑大小。
indicator-top|left|right|bottom	<length> | <percentage>	-	否	導航點訓示器在swiper中的相對位置。

注：

indicator-top: 20px;指的是距離swiper最上面的距離；      

indicator-bottom為0時，位于swiper的最下方，與内容齊平