微信小程序轮播图

效果图

详情可见 微信小程序

参照: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;
	}
相关推荐
racerun几秒前
微信小程序如何实现再多个页面共享数据
微信小程序·小程序
XM-545818 分钟前
2025微信小程序wxapkg解包全攻略
linux·运维·小程序
HERR_QQ1 天前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
racerun1 天前
小程序导航设置更多内容的实现方法
小程序
说私域1 天前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的超级文化符号构建路径研究
人工智能·小程序·开源
mg6681 天前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序
程序员柳1 天前
基于微信小程序的校园二手交易平台、微信小程序校园二手商城源代码+数据库+使用说明,layui+微信小程序+Spring Boot
数据库·微信小程序·layui
Jyywww1212 天前
微信小程序学习笔记
笔记·学习·微信小程序
The_era_achievs_hero2 天前
微信小程序41~50
微信小程序·小程序