uniapp swiper组件

swiper组件

• swiper
• scroll-view
• slider

swiper

官网
https://uniapp.dcloud.io/component/swiper?id=swiper

<swiper :indicator-dots="true" :autoplay="true" 
	  :interval="3000" :duration="1000"
	  indicatorcolor="rgba(255,255,255,0.5)"
	  indicator-active-color="#ff372b"
	  class="swiper">
	 <swiper-item>

     </swiper-item>
</swiper>

一些参数的解释
indicator-dots //控制面板是否显示小圆点
autoplay //自动切换
interval //切换间隔的时间
duration // 切换轮播时，话费的时间
indicatorcolor//小圆点的默认颜色
indicator-active-color//被选中图片对应小圆点的颜色
interval//自动切换的间隔时间
duration//滑动过程中话费的时间

scroll-view

https://uniapp.dcloud.io/component/scroll-view?id=scroll-view

<scroll-view class="scroll-view" scroll-x show-scrollbar>
</scroll-view> //scroll-x 控制滑动的方向
//show-scrollbar 控制是否显示滚动条

slider

https://uniapp.dcloud.io/component/slider?id=slider

<slider @change="sliderChange" class="line flex-item" :value="curPlayTime" min="0" 
block-size="15" backgroundColor="rgba(255,255,255,.5)" :max="playTime" activeColor="rgba(255,255,255,.5)"/>

min //最小值0
max // 总时间，最大值
value // 当前值
block-size //滑块的大小，取值范围为 12 - 28
backgroundColor //背景颜色
activeColor // 滑块左侧已选择部分的线条颜色
change// 滑块拖动时触发