亲宝软件园·资讯

展开

小程序轮播图

苏三金 人气:0

那个先上效果:

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:接口调用结束的回调函数(调用成功、失败都会执行)

加载全部内容

相关教程
猜你喜欢
用户评论