微信小程序-轮播图

轮播图功能

//wxml文件
<swiper class="swiper" indicator-dots="true" autoplay="false" circular="false" interval="3000" duration="1000">
  <block wx:for="{{banner}}" wx:for-item="item">
    <swiper-item>
      <image src="{{item.image}}" mode="widthFix"></image>
    </swiper-item>
  </block>
</swiper>

　　

样式设置

//wxss文件
.swiper{
  height: 400rpx;
  width: 100%;
}

.swiper image{
  height: 400rpx;
  width: 100%;
}

　　

逻辑部分

//js文件
Page({
  data: {
    banner:[]
  },

onLoad: function (options) {
    //获取云数据库中的指定表
    const db = wx.cloud.database()
    const banner = db.collection('demobanner')
    
    banner.get().then(res=>{    //成功
      console.log(res)
      this.setData({
        banner:res.data
      })
    })
    .catch(err=>{     //失败
      console.log(err)
    })
  }

})