微信小程序---swiper轮播图的页面，样式及逻辑的详细用法

红丝绒蛋糕好吃

已于 2022-06-02 10:41:10 修改

阅读量581

点赞数 2

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

于 2022-06-01 14:27:26 首次发布

本文链接：https://blog.csdn.net/m0_61916157/article/details/125082743

版权

本文介绍了微信小程序中使用swiper组件实现轮播图的详细步骤，包括wxml页面结构、js逻辑处理和wxss样式的设置，适用于页面顶部展示、活动内容和广告推广等场景。并提供了官方文档链接以供深入学习。

摘要由CSDN通过智能技术生成

swiper轮播图在小程序中是比较常见的功能，包括：页面顶部产品、活动的内容展示，或者是底部广告推广, swiper —点击蓝色字跳转到小程序官方文档解释。

详细见Demo：

1. wxml页面：

<view class="swiperStyle" wx:if="{
  {showSwiper}}">
      <swiper class="swiper-item" indicator-dots="{
  {indicatorDots}}" autoplay="{
  {autoplay}}" interval="{
  {interval}}" duration="{
  {duration}}" circular="{
  {circular}}" indicator-color="{
  {indicatorColor}}" indicator-active-color="{
  {activeColor}}">
        <block wx:for="{
  {adsImgList}}" wx:key="index">
          <swiper-item>
            <view class="swiper-box"