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

发布时间:2024-12-06 03:37

下载携程地图,获取景区导览图 #生活技巧# #自驾游建议# #自驾游自驾游APP#

最新推荐文章于 2024-02-04 20:00:19 发布

icon-Y 于 2019-04-08 09:58:27 发布

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

/*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>

网址:小程序之轮播图、加载、从后端获取数据、图片、wx:for https://www.yuejiaxmz.com/news/view/391069

相关内容

【微信小程序】基础篇
小程序各种功能代码片段整理
微信小程序项目实例——今日美食
单片机数据上传到阿里云物联网平台后,如何在手机端和网页端获取获取数据?
用wordpress打造的第一个小程序:图书共享借阅
社区二手回收小程序源码v6.15.2+前端+后端
python毕设百货超市在线购物小程序小程序端程序+论文
基于微信小程序的校园二手图书交易小程序设计与实现(源码+lw+部署+讲解)
前视图高清图片
数据管家下载

随便看看