微信小程序|组件-轮播图swiper

Posted 2023-02-26 準提童子

1. 效果样式

2. 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="previousMarginpx" next-margin="nextMarginpx">
        <block wx:for="background" wx:key="*this">
          <swiper-item>
            <view class="swiper-item item"></view>
          </swiper-item>
        </block>
      </swiper>
    </view>
  </view>
</view>

 

3. js代码

Page(
  data: 
    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
    indicatorDots: true,//指示点是否显示
    vertical: false,//是否竖向滑动
    autoplay: false,//自动播放
    circular: false,//衔接滑动
    interval: 2000,//自动播放时的间隔时长
    duration: 500,//滑动过一张图片的时长
    previousMargin: 0,//前边距
    nextMargin: 0 //后边距
  
)