微信小程序轮播图

效果图

详情可见 微信小程序

参照: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;
	}
相关推荐
资深前端之路2 小时前
小程序生命周期及页面操作执行过程详解
小程序
给力学长5 小时前
自习室预约小程序的设计与实现
java·数据库·vue.js·elementui·小程序·uni-app·node.js
從南走到北6 小时前
JAVA东郊到家按摩服务同款同城家政服务按摩私教茶艺师服务系统小程序+公众号+APP+H5
android·java·开发语言·微信小程序·小程序
weixin_lynhgworld15 小时前
盲盒抽卡机小程序系统开发:连接线上线下娱乐新桥梁
小程序·娱乐
程知农15 小时前
uniapp_微信小程序_根据胶囊按钮计算出的导航栏高度为什么不是44px?
微信小程序·小程序·uni-app
鲲鹏猿18 小时前
微信小程序——早餐小程序
微信小程序·小程序
说私域18 小时前
基于开源AI智能名片链动2+1模式与S2B2C商城小程序的微商品牌规范化运营研究
人工智能·小程序·开源
2501_9159090619 小时前
iOS 加固工具实战解析,主流平台审核机制与工具应对策略
android·ios·小程序·https·uni-app·iphone·webview
The_era_achievs_hero19 小时前
UniappDay04
vue.js·微信小程序·uni-app
2501_9151063221 小时前
iOS WebView 调试实战,第三方脚本加载失败与内容安全策略冲突问题排查指南
android·ios·小程序·https·uni-app·iphone·webview