小程序项目实战-第三篇
轮播图
在小程序开发中，尽量把图片放在服务器或在线图床中。
因为微信官方要求每个小程序在提交审核时，小程序不使用分包加载时大小不能超过2M，分包加载大小不能超过8M。
而有些图片一张就已经占去1M大小，所以我们的小程序代码包中尽量不要出现图片。
如果你没有使用云开发技术，使用的是自己的服务器，那么你需要给你的服务器发出请求并接收结果。
小程序发送异步请求：
在页面.js中发送异步请求代码
onLoad: function(options) {
//发送异步请求获取轮播图数据
wx.request({
url: '',//要请求的地址
data: {},//要发送的数据
header: {'content-type':'application/json'},//发送的请求头
method: 'GET',//请求方式
dataType: 'json',//发送的数据类型
responseType: 'text',//返回数据类型
success: (result) => {//成功回调函数
},
fail: () => {}, //失败回调函数
complete: () => {}//成功或失败都会调用的回调函数
});
},在success函数内对当前data中内容进行修改，wxml页面进行数据绑定，从而实现动态加载轮播图效果。
一个简单的轮播图：
<!--轮播图-->
<view class="index_swiper">
<swiper class="swiper_a">
<swiper-item class="" item-id="">
<navigator>
<image mode="widthFix" src="图片地址"></image>
</navigator>
</swiper-item>
<swiper-item class="" item-id="">
<navigator>
<image mode="widthFix" src="图片地址"></image>
</navigator>
</swiper-item>
</swiper>
</view>大致流程如下：
① 指定每一次轮播项，可使用循环指定。
②给定swiper宽高。由于swiper标签和image标签有默认宽高，所以需要给定宽高。
高度通过计算得出：swiper高度 = 图片宽度 / 图片高度 * swiper宽度
所以：
.swiper_a{
width: 100%;
height: calc(100vw*1125/352);
}
.swiper_a image{
width: 100%;
}轮播图的属性:
可查看：微信小程序开发（常用标签用法-第一篇）中swiper标签属性。
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2021-02-09，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
云开发 CloudBase
云开发（Tencent CloudBase，TCB）是腾讯云提供的云原生一体化开发环境和工具平台，为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务，可用于云端一体化开发多种端应用（小程序、公众号、Web 应用等），避免了应用开发过程中繁琐的服务器搭建及运维，开发者可以专注于业务逻辑的实现，开发门槛更低，效率更高。
腾讯云开发者
