小程序实现轮播图
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了小程序实现轮播图的具体代码，供大家参考，具体内容如下
那个先上效果：
step1:页面index.wxml代码
<!-- 轮播 -->
<swiper class='u-wrp-bnr' indicator-dots='true' autoplay='true' interval='5000' duration='1000' circular='true'>
<block wx:for="{{bnrUrl}}" wx:for-index="index" wx:key="index">
<swiper-item>
<image class="lazy" data-src='{{item.image}}' class='u-img-slide' ></image>
</swiper-item>
</block>
</swiper>step2:配置信息也就是index.js
Page({
data: {
bnrUrl: [],
},
onLoad: function () {
// 轮播
wx.request({
url: 'https://locally.uieee.com/slides',
success (res) {
// console.log(res.data)
this.setData({
icons:res.data
})
})
}) step3:样式文件 index.wxss
.u-wrp-bnr {
width: 100%;
height: 300rpx;
display: block;
position: relative;
background: #f0f0f0;
}
.u-img-slide {
width: 100%;
height: inherit;
}然后就是wx.require({})中传递一个对象，这个对象的属性分别对应不同的含义
wx.request({
url: 'test.php', //仅为示例，并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
})下面解释一下：
url：请求地址，必填
data：请求的参数
method：HTTP 请求方法，默认为get
dataType：返回的数据格式，默认为json
success：接口调用成功的回调函数
fail：接口调用失败的回调函数
complete：接口调用结束的回调函数（调用成功、失败都会执行）
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
