uniapp swiper组件

最新推荐文章于 2024-07-08 15:44:22 发布

just today

最新推荐文章于 2024-07-08 15:44:22 发布

阅读量2.6k

点赞数

文章标签： uniapp swiper scroll-view slider

本文链接：https://blog.csdn.net/qq_43604714/article/details/117962805

版权

本文详细介绍了uni-app中的三个重要组件：swiper、scroll-view和slider。swiper用于创建轮播图，支持自动切换、切换间隔和小圆点指示器等特性；scroll-view提供横向或纵向滚动，可控制是否显示滚动条；slider则是一个滑块组件，可用于音视频进度控制，具备滑块大小、颜色和回调事件等功能。这些组件在移动应用开发中广泛应用。

摘要由CSDN通过智能技术生成

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)"/>