[移动开发]微信小程序云开发实现轮播图功能

轮播图页功能实现
轮播图是微信小程序展现的一个重要功能，轮播图也分好几种，腾讯文档提供的是最基本轮播图。别的不多说了看代码段吧。

WXML代码段

<view class="container">
	<swiper previous-margin="45rpx" next-margin="45rpx" indicator-dots="true" indicator-color="#FFFFFF" current="{{swiper_curPage}}" autoplay="true" circular="true" class="swiper">
		<block wx:for="{{lunbotu}}" wx:for-item="item" wx:key="_id">
			<swiper-item class='swiper_item'>
				<image src='{{item.src}}' class="swiper_imge" data-id="{{item._id}}" data-zhujue="{{item.zhujue}}" data-dianyingming="{{item.dianyingming}}" bindtap="ToTapsilat" mode='scaleToFill' data-item="{{item}}"></image>
			</swiper-item>
		</block>
	</swiper>
</view>

WXSS代码段最重要，轮播图的各种各样型就在于WXSS代码段。
WXSS代码段

.container {
  position: relative;
  top: -120rpx;
}

.swiper {
  width: 100%;
  height: 300rpx;
  margin: 10rpx 40rpx;
}

.swiper_item {
  height: 300rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper_imge {
  width: 640rpx;
  height: 300rpx;
  border-radius: 15rpx;
}

JavaScript代码段

const db = wx.cloud.database()
Page({
  data: {

  },
	onLoad: function (options) {
    	db.collection('lunbotu').get().then(res => {
      	this.setData({
        	lunbotu: res.data
      		})
    	})
  	},
 })