HarmonyOS Day-1

swiper组件——轮播图

$html$ 代码

<div class="topview">
        <swiper class="swiperview" autoplay="true" indicator="true">
            <block for="{{swiperdatas}}">
                <div class="box">
                    <image src="{{$item}}"></image>
                </div>
            </block>
        </swiper>
    </div>

$autoplay$ ： 子组件是否自动播放，自动播放状态下，导航点不可操作

$indicator$：是否启用导航点指示器，默认 $true$

相关 $css$ 代码：

.topview{
    width: 100%;
    height: 22%;
    border-bottom: 2vp solid black;
}
.swiperview{
    width: 100%;
    height: 100%;
}

相关 $javasript$ 代码

imagedatas:["common/icon/a1.jpg","common/icon/a2.jpg","common/icon/a3.jpg"

$tips:$ 图片路径

横向滚动

$html$ 代码

<div class="twoview">
        <block for="{{imagedatas}}">
            <div class="hbox">
                <image class="imgview" src="{{$item}}"></image>
            </div>
        </block>
    </div>

相关 $css$ 代码：

.twoview{
    display: flex;
    overflow: scroll;
    height: 22%;
    border-bottom: 2vp solid black;
}

$tips$：

关于 $css$ 样式的 $scroll$ 默认是纵向滚动，如果需要横向滚动，需要在滚动的那个布局外套一个 $div$ 把他框起来

相关 $javascript$ 代码：

imagedatas:["common/icon/a1.jpg","common/icon/a2.jpg","common/icon/a3.jpg",
        "common/icon/a4.jpg","common/icon/a5.jpg","common/icon/a6.jpg","common/icon/a7.jpg",
        "common/icon/a8.jpg","common/icon/a9.jpg"]

整个项目预览图