微信小程序-swiper轮播图

最新推荐文章于 2023-05-05 17:59:20 发布

原创

最新推荐文章于 2023-05-05 17:59:20 发布 · 874 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了如何在微信小程序中使用swiper组件创建轮播图，适用于首页展示。提供了index.wxml、index.wxss和index.js的基本代码示例，包括设置图片地址、指示点显示、自动切换和切换时间。建议查阅官方文档以获取更多swiper组件的详细属性。

效果：

一般用于首页的展示页面

直接附上代码：在index.wxml

<view class="container">
  <view class="page-body">
    <view class="page-section page-section-spacing swiper">
      <swiper indicator-dots="{
  
  {indicatorDots}}" autoplay="{
  
  {autoplay}}" circular="{
  
  {circular}}" vertical="{
  
  {vertical}}"
        interval="{
  
  {interval}}" duration="{
  
  {duration}}" previous-margin="{
  
  {previousMargin}}px" next-margin="{
  
  {nextMargin}}px">
        <block wx:for="{
  
  {background}}" wx:key="*this">
          <swiper-item>
            <image src="{
  
  {item}}" class="slide-image" /> 
          </swiper-item>
        </block>
      </swiper>
    </view>
  </view>
</view>