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

最新推荐文章于 2024-08-13 16:18:56 发布

weixin_669646

最新推荐文章于 2024-08-13 16:18:56 发布

阅读量590

点赞数

原文链接：https://blog.csdn.net/qq_43971504/article/details/105862516?utm_term=%E8%BD%AE%E6%92%AD%E5%9B%BEapi%E6%8E%A5%E5%8F%A3&utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~sobaiduweb~default-2-105862516&spm=3001.4430

版权

获取轮播图数据
接口：https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata

pages/index/index.js

Page({
data: {
// 轮播图数组
swiperList: []
},

onLoad: function (options) {
// 发送异步请求获取轮播图数据
wx.request({
url: ‘https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata’,
success: (result) => {
this.setData({
swiperList: result.data.message
})
}
});
},

});

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

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

pages/index/index.wxml

问题：
① swiper标签存在默认宽度和高度 100% * 150px
② image标签也存在默认宽度和高度 320px * 240px
解决：
① 先看一下原图的宽高 750px * 340px
② 让图片的高度自适应，宽度等于100%
③ 让swiper标签的宽高变成与图片的宽高一样
④ image标签 mode属性渲染模式
让image标签的宽高和图片的宽高等比例变化 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%;
}

发送请求代码的优化
问题：发送请求成功后再发送多次请求
解决：将原生请求修改为es6的promise
request/index.js

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

引入用来发送请求的方法：import { } from “module”;
“module” 路径一定要补全 “…/…/request/request.js”
pages/index/index.js

// 引入用来发送请求的方法
import { request } from “…/…/request/request.js”;

Page({
data: {
// 轮播图数组
swiperList: []
},

onLoad: function(options) {
this.getSwiperList();
},

// 获取轮播图数据
getSwiperList() {
request({
url: “https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata”
}).then(result => {
this.setData({
swiperList: result.data.message
})
})
},

}