ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

uniapp swiper组件

2021-06-17 09:03:37  阅读:922  来源: 互联网

标签:uniapp 滑块 io 组件 小圆点 scroll swiper


swiper组件

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// 滑块拖动时触发

标签:uniapp,滑块,io,组件,小圆点,scroll,swiper
来源: https://blog.csdn.net/qq_43604714/article/details/117962805

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有