harmonyos swiper的使用

最新推荐文章于 2025-03-29 20:37:11 发布

liuye066

最新推荐文章于 2025-03-29 20:37:11 发布

阅读量468

点赞数

分类专栏： harmony 文章标签： harmonyos

本文链接：https://blog.youkuaiyun.com/liuye066/article/details/119141829

版权

一组按钮，分成两页，使用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可用的数据