微信小程序轮播图

效果图

详情可见 微信小程序

参照: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;
	}
相关推荐
HERR_QQ10 小时前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
racerun18 小时前
小程序导航设置更多内容的实现方法
小程序
说私域18 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的超级文化符号构建路径研究
人工智能·小程序·开源
mg66818 小时前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序
程序员柳19 小时前
基于微信小程序的校园二手交易平台、微信小程序校园二手商城源代码+数据库+使用说明,layui+微信小程序+Spring Boot
数据库·微信小程序·layui
Jyywww12121 小时前
微信小程序学习笔记
笔记·学习·微信小程序
The_era_achievs_hero1 天前
微信小程序41~50
微信小程序·小程序
走,带你去玩1 天前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
是一碗螺丝粉1 天前
🔥 微信H5视频自动播放终极秘籍:WeixinJSBridge竟是官方“通行证”?
微信小程序