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。
给图片赋值。
父传子
参数类型是一样
作者:流年少年
出处:https://www.cnblogs.com/ishoulgodo/
本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
如果文中有什么错误,欢迎指出。以免更多的人被误导。
出处:https://www.cnblogs.com/ishoulgodo/
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!
万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
![](http://images.cnblogs.com/cnblogs_com/IwishIcould/1900124/t_201214043958支付宝收款码.jpg?a=1607924145179)
支付宝
![](http://images.cnblogs.com/cnblogs_com/IwishIcould/1900124/t_20121604194271E6E296CCB71A007F4E22073D5EB64A.jpg)
微信
如果文中有什么错误,欢迎指出。以免更多的人被误导。