微信小程序（二）首页之轮播

Zaltana

于 2022-03-31 08:00:00 发布

阅读量1k

点赞数 2

分类专栏：微信小程序文章标签：微信小程序前端

本文链接：https://blog.csdn.net/zhoulina815/article/details/123858160

版权

二.轮播

轮播

轮播图的外层容器 swiper

每一个轮播项 swiper-item

autoplay 自动轮播

circular 衔接滑动

indicator-dots 显示指示器分页器索引器

interval 修改轮播时间单位ms 1s = 1000 ms

图片

先找出来原图的宽度和高度等比例给 swiper 定宽度和高度原图的宽度和高度 1125 * 352 swiper 宽度 / swiper 高度 = 原图的宽度 / 原图的高度 swiper 高度 = swiper 宽度 * 原图的高度 / 原图的宽度 height: 100vm * 352 / 1125。

swiper.wxml

<!--components/swiper/swiper.wxml-->
<!--首页轮播-->
<swiper
 autoplay="{
 {true}}"
 circular="{
 {true}}"
 indicator-dots="{
 {true}}"
 interval="2000"
>
    <swiper-item>
        <image mode="widthFix" src="https://gd3.alicdn.com/imgextra/i3/3043575644/O1CN01bNndWx1rYzuNxQ3dF_!!3043575644.jpg_400x400.jpg"  />
    </swiper-item>
    <swiper-item>
        <image mode="widthFix" sr