【微信小程序】轮播图

最新推荐文章于 2024-07-05 17:59:35 发布

cdgogo

最新推荐文章于 2024-07-05 17:59:35 发布

阅读量108

点赞数

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/cdgogo/article/details/119767455

版权

微信小程序专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何在Vue中创建一个轮播图组件，通过设置`swiper`和`image`的样式及属性如`indicatorDots`、`autoplay`、`circular`等，实现轮播图的滑动效果。同时，针对轮播图高度不匹配的问题，给出了解决方案，即设定`swiper`的高度并调整`image`的宽高比填充模式为`aspectFill`，确保图片正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：
在这里插入图片描述

<view class="banner">
  <swiper class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" indicator-color="rgba(0, 0, 0, .3)" indicator-active-color="#fff">
    <block wx:for="{{imgUrls}}" wx:for-index="index" wx:key="index">
      <swiper-item>
        <image class="slide-image" src="{{item}}" mode="aspectFill"></image>
      </swiper-item>
    </block>
  </swiper>
</view>

.banner{
    .swiper{
        height: 330rpx;
        .slide-image{
            width: 100%;
            height: 100%;
        }
    }
}

data: {
  imgUrls: [
    '/images/banner1.png',
    '/images/banner2.jpeg',
    '/images/banner3.jpeg'
  ],
  indicatorDots: true, // 是否显示面板指示点
  autoplay: true,      // 是否自动切换
  circular: true,      // 是否采用衔接滑动
  interval: 3000,      // 自动切换时间间隔
  duration: 1000,      // 滑动动画时长
},