微信小程序云开发轮播图实现

轮播图效果图;

index.wxml代码：

<!-- 写在index.wxml里 --><!-- 轮播图 -->

<view class="swiper">
  <swiper class="swiper-img" circular="true" autoplay="true" bindchange="swiperchange" interval="5000" duration="1000">
    <block wx:for="{{datalist}}" wx:key="_id">
      <swiper-item class="item">
        <image class="item-Img" src="{{item.image}}"></image>
      </swiper-item>
    </block>
  </swiper>
  <view class="dots">
    <block wx:for="{{datalist}}" wx:key="_id">
      <view class="dot {{index===current?'active':''}}"></view>
    </block>
  </view>
</view>

index.wxss代码：

/* 写在index.wxss里 *//* 轮播图 */

.swiper{
  width: 100%;
  height: 340rpx;
  margin-top: 5rpx;
}
.swiper-img{
  width: 100%;
  height: 340rpx;
}
.item-Img{
  width: 90%;
  height: 320rpx;
  border-radius: 15rpx;
  box-shadow: 3px 3px 3px 1px #ccc;
  margin-top: 10rpx;
}
.item{
  display: flex;
  justify-content: center;
}
.dots{
  width: 100%;
  height: 50rpx;
  margin-bottom: 50rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dot{
  width: 30rpx;
  height: 10rpx;
  border-radius: 50rpx;
  background-color: crimson;
  margin-right: 10rpx;
}
.active{
  background-color: black;
}

index.js代码：

Page({
  data: {
    datalist:[],// 获取数据
    index:0,// 轮播图
    current:0// 轮播图
  },
  onLoad: function (options) {
    // 请求云端列表数据
    wx.cloud.database().collection("tj").get()
      .then(res => {
        // 显示到小程序页面上
        this.setData({ datalist: res.data })
      })
  },
  // 轮播图
  swiperchange(e){
    this.setData({
      index:e.detail.current,
      current:e.detail.current
    })
  }
})

需要注意的是js代码里的“tj”是云数据库集合的名