微信小程序---轮播图

0. 微信小程序轮播图的实现

a. 是利用了swiper组件滑块视图容器

b. swiper的文档

文档https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

1. 常用属性介绍

 

2. 常用事件

 

 3. 使用案例

3.1 hml

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{ detail_data_list.msg_url }}" wx:key="index">
      <swiper-item>
        <image src="https://{{item.cosUrl}}" class="slide-image" />
      </swiper-item>
    </block>
  </swiper>

3.2 js

data: {
    detail_data_list: {{"msg_url ":"1980362662.png"},{"msg_url ":"1980362662.png"}},
    indicatorDots: true, //是否显示面板指示点
    autoplay: true, //是否自动切换
    interval: 3000, //自动切换时间间隔
    duration: 1000, //滑动动画时长
    inputShowed: false,
    inputVal: ""
  },

3.3 css

.swiper {
  height: 400rpx;
  width: 100%;
}

.swiper-image {
  height: 100%;
  width: 100%;
}

.slide-image {
  height: 100%;
  width: 100%;
}

ps 如果使用本地图片，无法加载成功

1. 检查自己的路劲是否有问题

2. url包裹一层 require()

data: {
    detail_data_list: [require('/page/static/images/1.png'),require('/page/static/images/1.png')],
    indicatorDots: true, //是否显示面板指示点
    autoplay: true, //是否自动切换
    interval: 3000, //自动切换时间间隔
    duration: 1000, //滑动动画时长
    inputShowed: false,
    inputVal: ""
  },