微信小程序轮播图

效果图

详情可见 微信小程序

参照: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;
	}
相关推荐
狂团商城小师妹1 天前
JAVA露营基地预约户外露营预约下单系统小程序
java·开发语言·微信小程序·小程序
知识分享小能手1 天前
微信小程序入门学习教程,从入门到精通,微信小程序页面制作(2)
前端·javascript·学习·微信小程序·小程序·前端框架·notepad++
说私域1 天前
情绪点设置在开源AI大模型驱动的S2B2C商城小程序AI智能名片中的应用研究
人工智能·小程序·开源
2501_916007471 天前
Java界面开发工具有哪些?常用Java GUI开发工具推荐、实战经验与对比分享
android·java·开发语言·ios·小程序·uni-app·iphone
流***陌1 天前
扭蛋机抽赏小程序:重构线上娱乐的“盲盒式”新体验
小程序·重构·娱乐
一 乐1 天前
社区互助养老系统|基于java和小程序的社区互助养老系统小程序设计与实现(源码+数据库+文档)
java·数据库·spring boot·小程序·论文·毕设·社区互助养老系统小程序
lingggggaaaa1 天前
小迪安全v2023学习笔记(九十讲)—— 小程序篇&反编译&外在&主包分包&配置泄露&算法逆向&未授权
笔记·学习·安全·web安全·网络安全·小程序
说私域1 天前
基于定制开发开源AI智能名片S2B2C商城小程序的文案信息传达策略研究
大数据·人工智能·小程序
计算机毕业设计小帅1 天前
【2026计算机毕业设计】基于Springboot的汉服交流的微信小程序
spring boot·微信小程序·课程设计