小程序实现轮播图
本文实例为大家分享了小程序实现轮播图的具体代码,供大家参考,具体内容如下
那个先上效果:
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 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; /* top: rpx; */ 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:接口调用结束的回调函数(调用成功、失败都会执行)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
javascript 文字上下间隔滚动的代码 符合WEB标准 脚本之家修正版
javascript 文字上下间隔滚动的代码 符合WEB标准 脚本之家修正版,这里提供了两个版本,第二个在firefox下运行有些问题大家可以修改下,第一个的高度问题,已经修正,其实就是简单的加了css样式。2009-12-12基于小程序请求接口wx.request封装的类axios请求
这篇文章主要介绍了基于小程序请求接口wx.request封装的类axios请求,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2020-07-07JavaScript中join()、splice()、slice()和split()函数用法示例
这篇文章主要介绍了JavaScript中join()、splice()、slice()和split()函数用法,结合实例形式较为详细的分析了join()、splice()、slice()和split()函数的功能、使用方法及相关操作注意事项,需要的朋友可以参考下2018-08-08
最新评论