微信小程序实现图片轮播

微信小程序 专栏收录该内容
8 篇文章 0 订阅

wxml页面代码:

<!--图片轮播 -->
<view class='swipercontainer'>
  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" vertical='{{vertical}}' circular='{{circular}}'>
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item}}" class="slide-image swipimg"/>
      </swiper-item>
    </block>
  </swiper>
</view>

js页面代码

Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgUrls: [
      ' ../../images/fl01.png',
      ' ../../images/fl02.png',
      ' ../../images/fl03.png'
    ],
    indicatorDots: true, //	是否显示面板指示点
    autoplay: true, //是否自动切换
    circular: true, //是否采用衔接滑动
    vertical: false, //滑动方向是否为纵向
    interval: 3000, //自动切换时间间隔
    duration: 100, //滑动动画时长
  }
})

wxss文件:


.swipercontainer {
  position: relative;
  left: 0rpx;
  right: 0rpx;
  width: 100%;
  /*height: 20%;*/
  background: red;
}

.swipimg {
  width: 100%;
}

 

详细文档请见微信开放平台:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

  • 0
    点赞
  • 5
    评论
  • 13
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值