- 当前 Bug 的表现(可附上截图)
- 预期表现
预期顶部轮播图能够显示出来
- 复现路径
- 提供一个最简复现 Demo
云开发快速启动demo
/********************************************************/
index.js
Page({
/**
* 页面的初始数据
*/
data: {
// 顶部轮播图数据
imgUrls: [
],
indicatorDots: true,
autoplay: true,
interval: 3000,
duration: 1000,
circular: true,
},
/**
* 生命周期函数–监听页面加载
*/
onLoad: function (options) {
//获取顶部轮播图数据
const db = wx.cloud.database()
db.collection(‘images’).doc(‘你的_id’).get().then(res => {
this.setData({
imgUrls: res.data.imgUrls,
})
})
},
以下省略
/***************************************************************************************************/
index.wxml
<swiper class=“swiper-view” indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}">
<block wx:for="{{imgUrls}}" wx:key="*this">
<swiper-item>
<image src="{{item}}" class=“slide-image” mode=“widthFix”/>
</swiper-item>
</block>
</swiper>
/*************************************************************************************************/
index.wxss
.swiper-view{
width: 100%;
height: 350rpx;
}
.slide-image{
width: 100%;
}