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

动态API+swiper组件实现轮播图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

1. 获取轮播图数据
接口：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

pages/index/index.js文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

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

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

2. 加载轮播图数据
使用swiper组件实现轮播图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

微信小程序官方文档：scroll-view组件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

pages/index/index.wxml文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

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" src="{{}}">image>        navigator>      swiper-item>    swiper>  view>  view>

问题：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

① swiper标签存在默认宽度和高度 100% * 150px文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

② image标签也存在默认宽度和高度 320px * 240px文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

解决：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

① 先看一下原图的宽高 750px * 340px文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

② 让图片的高度自适应，宽度等于100%文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

③ 让swiper标签的宽高变成与图片的宽高一样文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

④ image标签 mode属性 渲染模式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

让image标签的宽高和图片的宽高等比例变化 mode="widthFix"文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

pages/index/index.less文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

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

pages/index/index.wxss文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

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

3. 发送请求代码的优化
问题：发送请求成功后再发送多次请求
解决：将原生请求修改为es6的promise
request/index.js文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

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

引入用来发送请求的方法：import { } from "module";
“module” 路径一定要补全 "../../request/"
pages/index/index.js文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

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