本文实例为大家分享了滚动条滚动条组件的具体代码,供大家参考,具体内容如下
1、滚动条
为捣蛋鬼增加滚动条。类型:对象。
2、el
卷动条容器的钢性铸铁选择器或超文本标记语言元素。类型:字符串/HTML元素,默认:滚动条。
3、隐藏
滚动条是否自动隐藏。类型:布尔值,默认:true(会自动隐藏),假(不会自动隐藏)。
4、可拖动
设置为真实的时允许拖动滚动条。类型:布尔值,默认错误。
5、快照释放
设置为假的,释放滚动条时幻灯片不会自动切合。类型:布尔值,默认:真的。
6、dragSize
设置滚动条指示尺寸。默认:自动自动,或者设置为数量(像素).类型:字符串/数字。
scriptvar mySwiper=new Swiper(' .swiper-container ',{滚动条: { El : } .swiper-scrollbar ',hide: true,draggable: false,snapOnRelease: true,dragSize: 20,}})/script7、MySwifer。滚动条。高架铁道
获取滚动条的超文本标记语言元素,还可以通过$el获取DOM7。
8、我的妻子。滚动条。德拉格尔
获取滚动条指示条的超文本标记语言元素,还可通过$dragEl获取DOM7。
9、我的妻子。滚动条。updateSize()
更新滚动条。
!DOCTYPE htmlhtmlhead元字符集='UTF-8 '标题滚动条滚动条组件/title link rel='样式表href='css/swiper.min.css '样式嗖嗖-容器{宽度: 500像素重量: 214像素边距-底部: 10px} .swiper-slide { text-align : center;线高: 214像素;font-size : 80pxcolor : # fff }/style/head body div class=' Swiper-container ' div class=' Swiper-wrapper ' div class=' Swiper-slide ' style=' background : # FF8604 ' slide 1/div class=' Swiper-slide ' style=' background : # ca 4040 ' slide 3/div/div class=' Swiper-scroll '/div/div Swiper-container ',{滚动条: { El : }swiper-scrollbar ',hide: true,draggable: false,snapOnRelease: true,dragSize: 20,} })MyWifer。滚动条。$ El。CSS('高度',' 6px ');我的雨刷。滚动条。$ Dragel。CSS('背景',' # fff ');我的雨刷。滚动条。updateSize();/脚本/正文/html注:swiper.min.css,swiper.min.js文件直接上捣蛋鬼官网下载。
参考瑞士原料药文档
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。