轮播图模块

轮播图模块使用swiper组件实现

首先，在onLoad生命周期函数里从云数据库中获取即将上映的电影数据，保存在data中

• 然后通过数据绑定显示在页面上
• 修改app.json配置
• 在pages配置中添加pages/splash/splash
• 生成splash引导页

代码如下：

{
    "pages":[
      "pages/splash/splash",
    "pages/index/index"
  ]
}

获取即将上映的电影数据，修改splash.js的onLoad函数，代码如下：

const db = wx.cloud.database();
db.collection('coming_soon').get({
  success: function (res) {
    console.log(res.data[0].subjects)
    that.setData({ subjects: res.data[0].subjects })
  }
})

获取到的电影数据使用setData保存在data的subjects中，然后在页面上使用swiper组件显示，修改splash.wxml代码如下：

<swiper style="height: 100%;width: 100%;" indicator-dots>
  <swiper-item wx:for="{{ subjects }}" wx:key="{{ item.id }}" style="flex: 1;">
    <image src="{{ item.images.large }}" mode="aspectFill" style="position: absolute;height:
    100%;width: 100%;opacity: .8;" />
  </swiper-item>
</swiper>