小程序之轮播图、加载、从后端获取数据、图片、wx:for

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_39437489/article/details/89081858

[code]/*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() {

}
})

[code]<*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>