scroll-view组价
实现页面滚动组件,可以通过标签控制其属性,同时需要注意!在制定横向/纵向滚动时,要在对应wxss里加上限定高/宽【限定纵向(加高度),横向(加宽度)】
简单例子:
在wxml里定义一个滚动容器,标签为scroll-y表示允许纵向滚动。容器里放三个视图
<!--scroll-y允许纵向滚动/横向-x,需要加固定高度(css里-->
<scroll-view class="container1" scroll-y>
<view>a</view>
<view>b</view>
<view>c</view>
</scroll-view>
.container1{
height:500px;
border:1px solid red ;
width: 100px;
}
对应wxss里定义容器的高度,宽度,边框颜色
效果如下:
swiper与swiper-item组件
实现小程序轮播图的组件,其中waiper为容器,swiper为具体轮播的内容,一般是图片,以src的形式调用。
在<swiper 标签>里可以定义整个轮播图的行动,比如本例子中:
indicator-dots=是否显示面板指示点
autoplay=自动播放
interval=自动切换间隔时间
<swiper-item 标签>里,可以定义轮播图片的相关信息,比如此处定义class为slide-image,资源路径为/asserts里。关于图片具体的大小信息和是否适应边框,需要在wxss语言里定义。
简单例子:
wxml定义轮播图:
<view>
<swiper indicator-dots="false" autoplay="true" interval="5000" duration="1000" >
<swiper-item>
<image src="/assets/carousel/1.png" class="slide-image" />
</swiper-item>
<swiper-item>
<image src="/assets/carousel/2.png" class="slide-image" />
</swiper-item>
<swiper-item>
<image src="/assets/carousel/3.png" class="slide-image" />
</swiper-item>
<swiper-item>
<image src="/assets/carousel/4.png" class="slide-image" />
</swiper-item>
</swiper>‘
wxss定义:
.container定义容器内边距为20rpx
.swiper定义轮播图高度,元素的外边距
.carousel-image, .slide-image定义图片的长宽,还有充满容器
.container {
padding: 20rpx;
}
.swiper {
height: 230rpx; /* 修改轮播图高度为230rpx */
margin-bottom: 20rpx;
}
.carousel-image, .slide-image {
width: 100%;
height: 100%; /* 设置图片高度为100% */
object-fit: cover; /* 使用 cover 属性保持图片比例并填充满容器 */
}
最后效果如下:
可以实现轮播/适应屏幕