安装与调用
单独使用直接引入 CSS:
<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/hope/ui/ScrollSnap/swipe.css">
引入 JS:
<script type="module" src="https://qidian.gtimg.com/lulu/hope/ui/ScrollSnap/swipe.js"></script>
或者:
<script type="module"> import 'https://qidian.gtimg.com/lulu/hope/ui/ScrollSnap/swipe.js'; </script>
基本演示
<ui-scroll-snap>
元素的外面包裹 <ui-scroll-snap-swipe>
元素即可实现水平式滑动切换效果。
如果希望自动播放,设置 autoplay
属性值,默认是 3000ms,可以指定具体的轮播时间,例如 autoplay="4000"
表示轮播时间间隔是 4s
。
请在移动端模式下体验下面的交互效果。
![](https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/093002acd40dc7a3c7df6e70b00a2ddb.jpg)
![](https://img0.qidian.com/upload/gamesy/2020/08/06/20200806172741uld59qeccz.jpg)
![](https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/208b240580380220de2843bcddf970a7.jpg)
![](https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/1c549180f8ff7320346021080969d8ad.jpg)
<ui-scroll-snap-swipe autoplay> <ui-scroll-snap> <ui-scroll-snap-item href="snap-swipe.html"> <img src="1.jpg"> </ui-scroll-snap-item> <ui-scroll-snap-item href="snap-swipe.html"> <img src="2.jpg"> </ui-scroll-snap-item> <ui-scroll-snap-item href="snap-swipe.html"> <img src="3.jpg"> </ui-scroll-snap-item> <ui-scroll-snap-item href="snap-swipe.html"> <img src="4.jpg"> </ui-scroll-snap-item> </ui-scroll-snap> </ui-scroll-snap-swipe>
一些说明
ui-scroll-snap-swipe 元素做了以下一些事情,设置 <ui-scroll-snap>
元素的 type
类型是 'x mandatory'
,设置 loop
为 true
,使其同方法可以无限轮播,创建小圆点状态栏元素,添加定时滚动的能力。
本页贡献者:
zhangxinxu