怎么样做一个最简单的轮播图(uni-app)
indicator-dots是否显示面板指示点,indicator-color指示点颜色indicator-active-color当前选中的指示点颜色autoplay是否自动切换interval自动切换时间间隔duration滑动动画时长circular是否采用衔接滑动,即播放到末尾后重新回到开头......swiper详细属性请点击此处查看:swiper | uni-app官网 (dcloud
·
提示:在进行代码之前,需要先添加swiper组件
文章目录
提示:以下是本篇文章正文内容,下面案例可供参考
一、swiper是什么?
示例:swiper是基于uni-app的一种工具,该工具是为了解决轮播图而创建的。
二、使用步骤
1.建立页面
以下是完整代码:
<template>
<view class="content">
<swiper :indicator-dots="true"
:autoplay="true"
:interval="2000"
indicator-color="rgba(0, 0, 0, 0.3)"
indicator-active-color="#000000"
:duration="1000"
circular>
<swiper-item class="swiper-item" v-for="item in List">
<view class="swiper-item">
<image :src="item.img"></image>
</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
List:[
{
id:1,
img:"../../static/lunbo/1.jpg"
},
{
id:1,
img:"../../static/lunbo/2.jpg"
},
{
id:1,
img:"../../static/lunbo/3.jpg"
},
{
id:1,
img:"../../static/lunbo/4.jpg"
}
]
}
},
methods: {
}
}
</script>
<style>
.content{
width: 100%;
height: 800rpx;
background-color: bisque;
}
.swiper-item{
width: 85%;
background-color: aqua;
margin: 0 auto;
}
</style>
总结
uni-app功能强大,在提供我们组建的同时,也给我们了很多属性,例如:
indicator-dots 是否显示面板指示点,
indicator-color 指示点颜色
indicator-active-color 当前选中的指示点颜色
autoplay 是否自动切换
interval 自动切换时间间隔
duration 滑动动画时长
circular 是否采用衔接滑动,即播放到末尾后重新回到开头......
swiper详细属性请点击此处查看:swiper | uni-app官网 (dcloud.net.cn)https://uniapp.dcloud.net.cn/component/swiper.html#swiper
更多推荐
已为社区贡献13条内容
所有评论(0)