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的最下方，与内容齐平