01-组件轮播

组件


<template>
    <view>
        <view class="uni-padding-wrap">
            <view class="page-section swiper">
                <view class="page-section-spacing">
                    <swiper class="swiper" 
                    :indicator-color="ponitcolor"  
                    :indicator-active-color="currentcolor"
                    :circular="zidongxianjie"
                    :indicator-dots="indicatorDots" 
                    :autoplay="autoplay"        
                    :interval="interval" 
                    :duration="duration">

	                <swiper-item v-for="(item,index) in listArr" :key="index"> 
			    <image class="lun-bo-img" :src="item.img"></image>
                        </swiper-item>	

                    </swiper>
                </view>
            </view>
        </view>
		
    </view>
</template>

<script>
export default {
    data() {
        return {
            zidongxianjie:true,//自动衔接,
            background: ['color1', 'color2', 'color3'],
            indicatorDots: true,//是否显示面板指示点 就是下面那个小圆点
            autoplay: true,//是否自动播放
            ponitcolor:"#fff",//指示点的颜色
            currentcolor:"red",//当前指示点颜色
            interval: 2000,
            duration: 500,
        }
    },
     props:{
	listArr:{
	    type:Array
	}
     }
}
</script>

<style  scoped>
.lun-bo-img{
	width: 100%;
	height: 300rpx;
}
</style>

使用页面

<template>
	<view>
		<planting :listArr="listArr"></planting>
	</view>
</template>

<script>
	import planting  from "../../components/planting.vue"
	export default {
		data() {
			return {
				listArr:[
					{img:"https://s2.51cto.com/oss/202004/16/27e58c01fef2ca1e3f98093dbd719eb0.jpg"},
					{img:"https://s2.51cto.com/oss/202004/15/58878ce24c357ac43b16d965e994b918.jpg"},
					{img:"https://s3.51cto.com/oss/202004/14/0b0c76cc1c0c3646b8257240a9e34a77.jpg"},
					{img:"https://s2.51cto.com/oss/202004/14/48d3da17d0cbc03c38815860dc8a3610.jpg-wh_651x-s_3942643498.jpg"}
				]
			};
		},
		
		components:{
			"planting":planting
		}
	}
</script>
对于封装uni-app中的轮播组件。
更vue一样的。 
比如说v-for。
给图片赋值。
父传子
参数类型是一样

posted @   何人陪我共长生  阅读(321)  评论(0编辑  收藏  举报
编辑推荐:
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· .NET 进程 stackoverflow异常后,还可以接收 TCP 连接请求吗?
阅读排行:
· 本地部署 DeepSeek:小白也能轻松搞定!
· 基于DeepSeek R1 满血版大模型的个人知识库,回答都源自对你专属文件的深度学习。
· 在缓慢中沉淀,在挑战中重生!2024个人总结!
· 大人,时代变了! 赶快把自有业务的本地AI“模型”训练起来!
· Tinyfox 简易教程-1:Hello World!
点击右上角即可分享
微信分享提示