/*index.js*/
Page({
/**
data: {
imgUrls: [
],
indicatorDots: true, //小点,根据图的数量自动增加小点
autoplay: true, //是否自动轮播
interval: 3000, //间隔时间
duration: 1000, //滑动时间
},
/**
onLoad: function(options) {
wx.showLoading({
title: '加载中',
})
this.text();
},
//轮播图片
text: function() {
var that = this;//这部必须有,非常重要
wx.request( {//从后端获取数据
url: '',//后端传数据的路径
data: {},
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
console.log(res.data);
that.setData({
imgUrls: res.data
})//这里的imgUrls和<wxml>的imgUrls是同一个变量,就是将从后端获取到的数据赋值给imgUrls,传到前面使用
wx.hideLoading();//隐藏加载
}
})
},
/**
onReady: function() {
},
/**
onShow: function() {
},
/**
onHide: function() {
},
/**
onUnload: function() {
},
/**
onPullDownRefresh: function() {
},
/**
onReachBottom: function() {
},
/**
onShareAppMessage: function() {
}
})
<*index.wxml*>
<view>
//对应js文件中的数据
<swiper
indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}"
interval="{{interval}}"
duration="{{duration}}"
circular="true">//循环
<block wx:for="{{imgUrls}}" wx:key="imgUrls">//for循环出图片
<swiper-item>
<image class="img1" src="{{item.url}}" mode="widthFix"/>//这里的item指的是当前项,后面跟上目标项
</swiper-item>
</block>
</swiper>
</view>