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"]

整个项目预览图