小程序轮播图

1、小程序轮播图

轮播图涉及的代码涉及到俩个文件代码：

1.1：*.wxml文件

1.2：*.js文件

2、代码演示：

2.1：*.wxml代码如下

 <!-- 轮播图 -->
  <view class="page-body">
    <view class="page-section page-section-spacing swiper">
      <swiper indicator-dots="{{indicatorDots}}" 
      autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
        <block wx:for="{{lunBoImage}}" wx:key="index">
          <swiper-item>
            <image src="{{item.ioc}}"  data-url="{{item.url}}" bindtap="lunboBtn">></image>
          </swiper-item>
        </block>
      </swiper>
    </view>
  </view>

2.2:*.js代码如下

Page({
  data: {
    lunBoImage:[],
    indicatorDots: true,  //  是否显示指示点
    vertical: false,   // 滑动方向是否为纵向
    autoplay: true,  // 是否自动播放
    circular:true,  // 是否采用衔接滑动
    interval: 2000, // 自动切换时间间隔(毫秒)
    duration: 500  // 滑动动画时长(毫秒)
  },

  // 给轮播图添加图片
  onShow : function(){
    // 可查询询数据库 添加轮播图的值
    var lunBoImage = this.data.lunBoImage;
    // 设置图片跳转的地址
    var imgUrl = ['/pages/xhrwLh/index','/pages/xhrwBnk/index','/pages/xhrwCsk/index'];
    var imgurl = [];
    //  循环获取图片跳转地址
    for(let i = 0 ; i < imgUrl.length ; i++){
      //获取图片跳转地址
      var url = imgUrl[i];
      var ioc = ("/images/lunboBat/"+ (i + 1) +".png");
      let list = {
        url:url,
        ioc:ioc
      }
      imgurl.push(list);
    }
    this.setData({lunBoImage:imgurl})
  },

 // 轮播图点击事件
  lunboBtn(e){
    //console.log(e.target.dataset.url);
    wx.navigateTo({
      url: e.target.dataset.url
    })
  },

  // 事件处理函数
  bindViewTap() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  }
})

3、注意：轮播图的图片地址位于pages同级