swiper:
滑块视图容器。
一般用于左右滑动或上下滑动,比如banner轮播图。
注意滑动切换和滚动的区别,滑动切换是一屏一屏的切换。swiper下的每个swiper-item是一个滑动切换区域,不能停留在2个滑动区域之间。
indicator-dots
是否显示面板指示点;默认false。
indicator-color
指示点颜色。默认:rgba(0, 0, 0, .3);半透明:rgba(255, 255, 255, .3)
indicator-active-color
当前选中的指示点颜色。默认:#000000;白色:#ffffff
autoplay
是否自动切换。默认:false
interval
自动切换时长。默认:5000
vertical
滑动方向是否为纵向。
<template>
<view>
<swiper indicator-dots indicator-color="rgba(255, 255, 255, .3)"
indicator-active-color="#ffffff" circular="true"
autoplay="true" interval="1000">
<swiper-item>111</swiper-item>
<swiper-item>222</swiper-item>
<swiper-item>333</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
}
}
</script>
<style lang="scss">
swiper{
width: 100vw;//全屏宽度;50vh:屏幕高度一半
height: 200px;
border: 1px solid green;
}
swiper-item{
width: 100%;
height: 100%;
background: pink;
}//滑动子模块,此时子模块的颜色是一样的,如果要实现每个模块的颜色不一样,则需要控制器
swiper-item:nth-last-child(2n){
background:orange;
}//比例选择器,2的倍数的子模块是橘色
</style>