宝塔服务器面板,一键全能部署及管理,送你10850元礼包,点我领取

微信小程序轮播图实现(超简单)

微信小程序的轮播图可以用官方给的swiper组件。
下图是官方给出的swiper属性,我截取了比较常用的一些属性。
微信小程序轮播图实现(超简单)「建议收藏」-风君子博客微信小程序轮播图实现(超简单)「建议收藏」-风君子博客
效果实现如下图
微信小程序轮播图实现(超简单)「建议收藏」-风君子博客微信小程序轮播图实现(超简单)「建议收藏」-风君子博客

1. 普通开发(不采用云开发)

1.1wxml

<view class="banner">
<swiper indicator-dots indicator-color="rgba255,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="rgba255,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)
.thenres => { 

console.log"数据上传成功",res)
this.setData { 

list:res.data 
})
})

自己赶紧试试吧,只需件swiper组件中写入image,将image中的src中的路径换成自己图片的路径就可以了,