微信小程序轮播图

效果图

详情可见 微信小程序

参照：swiper | uni-app官网

代码：

<!--轮播图--       >
<swiper interval="2000"  autoplay="true" circular="true" style="height: 300px;"><swiper-item style="height:300px;"  v-for="(m,index) in lbList" :key="index"><image class="lunbotu" :src="m.pic"></image></swiper-item>
</swiper>

js:

export default {data(){return {lbList:[],//图片集合typeId:"1"}},onLoad() {this.loadSixType();//加载图片方法},methods: {loadSixType(){this.$api.getCpSixType({parentid:this.typeId  //图片分类ID}).then(res => {//处理返回数据  var data = res.data;this.TypeSixList = data;//得到图片集合})}}}

css:

.lunbotu{width: 94%;height: 300px;margin-top: 10px;border-radius: 5px;}