微信小程序开发：动态API+swiper组件实现轮播图+es6 Promise

动态API+swiper组件实现轮播图

1。获取轮播图数据
接口：

pages/index/index.js

Page({  data: {    // 轮播图数组    swiperList: []  },    onLoad: function (options) {    // 发送异步请求获取轮播图数据    ({      url: '',      success: (result) => {        this.setData({          swiperList:         })      }    });  },
});

2.加载轮播图数据
使用swiper组件实现轮播图

微信小程序官方文档：scroll-view组件

pages/index/index.wxml

class="pyg_index">    <view class="index_swiper">    <swiper autoplay="{{true}}" indicator-dots="{{true}}" circular="{{true}}">      <swiper-item wx:for="{{swiperList}}" wx:key="goods_id">        <navigator>          <image mode="widthFix" >image>        navigator>      swiper-item>    swiper>  view>  view>

问题：

①swiper标签有一个默认宽高为100%*150px

② 图片标签还有默认宽高为320px*240px

解决方案：

①先看原图的宽高750px*340px

② 使图片的高度自适应，宽度等于100%

③ 使swiper标签的宽度和高度与图片的宽度和高度相同

④ 图片标签模式属性显示模式

保留图像标签Mode="widthFix"

pages/index/index.less

.index_swiper {  swiper {    width: 750rpx;    height: 340rpx;    image {      width: 100%;    }  }}

pages/index/index.wxss

.index_swiper swiper {  width: 750rpx;  height: 340rpx;}.index_swiper swiper image {  width: 100%;}

3.发送请求代码优化
问题：发送请求成功后，发送多个请求
解决方案：将原来的请求改为es6
request/index.js

export const request = (params) => {  return new Promise((resolve, reject) => {        ({      ...params,      success:(result)=>{        resolve(result);      },      fail:(err)=>{        reject(err);      }    });  })}

的promise引入发送请求的方法： import { } from "module";
路径“module”必须填写 "../../request/"
页面/index/index.js

// 引入用来发送请求的方法import { request } from "../../request/";
Page({  data: {    // 轮播图数组    swiperList: []  },    onLoad: function(options) {    this.getSwiperList();  },    // 获取轮播图数据  getSwiperL