微信小程序云开发 轮播图

[云开发文档]：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html

我的git小程序代码地址:https://github.com/daimananshen/muCeGoodTime

app.js 页面中env环境ID记得修改成个人的小程序环境ID，如果控制台获取到了数据库的数据，页面没有展示轮播图，就是这个原因

1、先建数据库，点击 云开发-数据库，点击集合名称右边的"+"号，输入集合名称，点击“确定”按钮（我这边创建了tables）

image

2、点击“添加记录”按钮，添加json数据(系统ID可以默认，也可以自己修改)

image

3、轮播图代码(index.wxml)

<view class="container">
    <view class="page-body">
        <view class="page-section page-section-spacing swiper">
            <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
                <block wx:for="{{item}}" wx:key="key">
                    <swiper-item>
                        <image class="carouselImg" src='{{item.image}}'></image>
                    </swiper-item>
                </block>
            </swiper>
        </view>
    </view>
</view>

4、轮播图样式（index.wxss）

page {

  background-color: #f4f4f4;

}

.carousel{

  width: 100%;

  background-color: rebeccapurple;

}

.carousel_swiper{

  width: 100%;

  height: 400rpx;

  display: block;

  position: relative;

  background: #f4f4f4;

}

.carouselImg{

  width: 100%;

  height: inherit;

}

5、轮播图页面逻辑 (index.js)

/**

   * 生命周期函数--监听页面加载

   */

  onLoad: function (options) {

    //加载轮播图

    this.requestCarouselListData();

  },

  // 轮播图代码

  requestCarouselListData() {

    // 调用默认环境数据库的引用

    const db = wx.cloud.database()

    // tables数据库创建的集合名称

    const banner = db.collection('tables') 

    //promise

    banner.get().then(res => {

        this.setData({

          item: res.data

        })

      })

      .catch(err => {

        console.log(err)

      })

  },

6、轮播图展示效果

image