大家好，又见面了，我是你们的朋友全栈君。
微信小程序轮播图实现（超简单）
微信小程序的轮播图可以用官方给的swiper组件。
下图是官方给出的swiper属性，我截取了比较常用的一些属性。
效果实现如下图
1. 普通开发（不采用云开发）
1.1wxml
<view class="banner">
<swiper indicator-dots indicator-color="rgba(255,255,255,0.5)"
indicator-active-color="#fff" circular autoplay interval="4000">
<swiper-item><image src="/image/1.jpg"></image></swiper-item>
<swiper-item><image src="/image/2.jpg"></image></swiper-item>
<swiper-item><image src="/image/3.jpg"></image></swiper-item>
</swiper>
</view>
1.2wxss
.banner{
width: 100%;
height: 350rpx;
}
.banner swiper{
height: 100%;
width: 100%;
}
.banner image{
width: 100%;
height: 350rpx;
}
2. 采用云开发
2.1wxml
<view class="banner">
<swiper indicator-dots indicator-color="rgba(255,255,255,0.5)"
indicator-active-color="#fff" circular autoplay interval="4000">
<swiper-item wx:for="{
{list}}">
<image src="{
{item.imge}}"></image>
</swiper-item>
</swiper>
</view>
2.2wxss
.banner{
width: 100%;
height: 400rpx;
}
.banner swiper{
height: 100%;
width: 100%;
}
.banner image{
width: 100%;
height: 400rpx;
}
2.3js
getTopList(){
wx.cloud.database().collection('lunbo').get()
.then(res => {
console.log("数据上传成功",res)
this.setData ({
list:res.data
})
})
自己赶紧试试吧，只需件swiper组件中写入image，将image中的src中的路径换成自己图片的路径就可以了，
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/143250.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
