微信小程序开发：动态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" src="{{}}">image>navigator>swiper-item>swiper>view>view>
问题：
① swiper标签存在默认宽度和高度 100% * 150px
② image标签也存在默认宽度和高度 320px * 240px
解决：
① 先看一下原图的宽高 750px * 340px
② 让图片的高度自适应，宽度等于100%
③ 让swiper标签的宽高变成与图片的宽高一样
④ image标签 mode属性 渲染模式
让image标签的宽高和图片的宽高等比例变化 mode="widthFix"
pages/index/index.less
{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的promise
request/index.js
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
// 引入用来发送请求的方法import { request } from "../../request/";Page({data: {// 轮播图数组swiperList: []},onLoad: function(options) {this.getSwiperList();},// 获取轮播图数据getSwiperL
THE END
