基于css的scroll-snap-type实现自动轮播的效果插件 背景 实现一个很简单的自动轮播的效果 思考: 传统的 swiper 太重了,里面封装了很多我们不需要的功能,一个简单的功能没必要那么中的文件。那就自己实现吧 实现方式有千千万万,那么如何才用最少的代码最优雅的实现呢?是否可以推翻传统的实现,使用 css 的某些特效实现呢? 肯定可以的呀,我觉得我这个方式就是最好的实现方法,没有比这个更好的实现了。我有css大佬坐镇指点,你们没有。哈哈 怎么使用 本地下载 js/css 使用引入使用 <script src="./snap-swiper.js"></script> <script> var imageList = [] SnapSwiper(imageList, '.snap-swiper-index') </script> 本地下载js使用Demo 可以 npm 安装使用 npm i snap-swiper import "snap-swiper/snap-swiper.css"; const snapSwiper = require("snap-swiper"); snapSwiper({ imageList:[], el, }); npm 下载使用demo 简单的参数:传入一个对象 let imageList= [{ href: "https://www.yuewen.com/#&about", // 点击图片跳转的连接 src: "https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/d2e93dead4b760eb2385709f42f3aec7.jpg", // 展示图片的地址 alt: "内容3"//图片的简介,在图片加载失败的时候可以看看 }] let el=xxx // 滚动的元素唯一的标识 let autoplay = false //是否自动轮播。默认自动轮播 let params = {imageList,el,autoplay} 目前最主要就是前面两个参数必传。其他的一些方法暴露在原型上面,就不仔细说了,估计用的情况比较少。想知道的话看看源码。通俗易懂,一看就明白 为啥要有一个 autoplay 参数,是不是多余的呢? 肯定不是的,每一个东西存在都有它存在理由和必要性。这是这个插件隐藏功能的一个入口 这种场景之下,autoplay 他的用途就体现出来了。snap-swiper 有一个特点把所有的方法数据都挂在原型上面。怎么用呢? autoplay 设置为 false,默认不滚动了 调用原型上面的 clickHandler 方法,传入一个被点击的元素,和点击之后的回调。(假设是图片 调用原型上面的 setScrollLeft 方法,传入一个滚动的距离,元素自动滚动起来 2和3结合起来就实现了,点击某一个元素滚动指定的距离 你要的功能就实现了 实现思路 使用 css 自带的滚动相关的属性,实现左右滚动的时候回弹,平稳滚动的效果 js 模拟手动滚动的效果 代码实现 ele.scrollLeft = scrollLeft; // 核心代码 有哪些优点 全部原生 js 实现,简单轻量,没有框架限制 图片有懒加载 => 浏览器IMG图片原生懒加载loading=”lazy”实践指南 有图片失败的异常处理 => 图片加载失败后CSS样式处理最佳实践 不支持 scroll-behavior 有兼容处理 可以 npm 安装使用 用哪些 css 属性实现 scroll-behavior: 让页面平滑的滚动,滚动效果又湿又滑,用户体验会很不错 scroll-snap-type: 滚动到了一个临界点,是回到最初的原点还是滚到终点 scroll-snap-align: 上面那个属性的临界点是在具体的哪一个点? caniuse:可以查看这些属性的兼容性 如果有某一个属性不兼容怎么办?自己 js 打补丁呗 比如组件里面实现的:scroll-behavior 讲真这些 css 属性我还是首次知道并使用,真香,脱离网上的哪些定位实现方式,用了 css,整体代码清晰易懂 遇到哪些问题 除了最后一张图片,每一张图片到右边有个 padding 的值,这个是避免两张相邻的图片挨在一起。在计算滚动距离的时候要考虑这个情况左右两边的距离,否则就会出现滚动卡住的情况 npm 发包的时候遇到了包引用的问题,询问之后才知道:一般自己写前端代码的时候都是 es module 的,然后打包成 CMD 发布到 npm 上。npm 全称是 node_modules 是给 node.js 使用的,所以要遵守 node 的规范。最好的导出方式就是使用 module.exports = xxx 实现之后 简单的事情也可以变得很有意义,功能虽然简单,但是里面涉及很多很基础的概念。对于准备从学前端的同学而言这是一个很好的选择。既可以学着怎么涉及一个组件,学一下基础知识,又能顺便学一下 npm 简单的事做到了极致会变得特别有意义了。css 一行代码就能极大效率的解决很多 js 的问题,那为啥不试试用 css 解决呢 源码就 120 行,可以看看,是不是还有别的隐形的功能,后面加一个 autoplay 参数就是我临时突然想到了。在之前的工作有碰到这个点击元素平稳滚动的需求。可以下载源码看看,试一试
yued-fe/snap-swiper
基于css的scroll-snap-type实现自动轮播的效果插件
背景
实现一个很简单的自动轮播的效果
思考: 传统的
swiper
太重了,里面封装了很多我们不需要的功能,一个简单的功能没必要那么中的文件。那就自己实现吧实现方式有千千万万,那么如何才用最少的代码最优雅的实现呢?是否可以推翻传统的实现,使用
css
的某些特效实现呢?肯定可以的呀,我觉得我这个方式就是最好的实现方法,没有比这个更好的实现了。我有css大佬坐镇指点,你们没有。哈哈
怎么使用
js/css
使用引入使用本地下载js使用Demo
npm
安装使用npm i snap-swiper
npm 下载使用demo
简单的参数:传入一个对象
目前最主要就是前面两个参数必传。其他的一些方法暴露在原型上面,就不仔细说了,估计用的情况比较少。想知道的话看看源码。通俗易懂,一看就明白
为啥要有一个 autoplay 参数,是不是多余的呢?
肯定不是的,每一个东西存在都有它存在理由和必要性。这是这个插件隐藏功能的一个入口
这种场景之下,autoplay 他的用途就体现出来了。snap-swiper 有一个特点把所有的方法数据都挂在原型上面。怎么用呢?
autoplay 设置为 false,默认不滚动了
调用原型上面的 clickHandler 方法,传入一个被点击的元素,和点击之后的回调。(假设是图片
调用原型上面的 setScrollLeft 方法,传入一个滚动的距离,元素自动滚动起来
2和3结合起来就实现了,点击某一个元素滚动指定的距离
你要的功能就实现了
实现思路
使用
css
自带的滚动相关的属性,实现左右滚动的时候回弹,平稳滚动的效果js
模拟手动滚动的效果代码实现
ele.scrollLeft = scrollLeft;
// 核心代码有哪些优点
全部原生
js
实现,简单轻量,没有框架限制图片有懒加载 => 浏览器IMG图片原生懒加载loading=”lazy”实践指南
有图片失败的异常处理 => 图片加载失败后CSS样式处理最佳实践
不支持
scroll-behavior
有兼容处理可以
npm
安装使用用哪些
css
属性实现scroll-behavior: 让页面平滑的滚动,滚动效果又湿又滑,用户体验会很不错
scroll-snap-type: 滚动到了一个临界点,是回到最初的原点还是滚到终点
scroll-snap-align: 上面那个属性的临界点是在具体的哪一个点?
caniuse:可以查看这些属性的兼容性
如果有某一个属性不兼容怎么办?自己
js
打补丁呗 比如组件里面实现的:scroll-behavior
讲真这些
css
属性我还是首次知道并使用,真香,脱离网上的哪些定位实现方式,用了css
,整体代码清晰易懂遇到哪些问题
除了最后一张图片,每一张图片到右边有个
padding
的值,这个是避免两张相邻的图片挨在一起。在计算滚动距离的时候要考虑这个情况左右两边的距离,否则就会出现滚动卡住的情况npm
发包的时候遇到了包引用的问题,询问之后才知道:一般自己写前端代码的时候都是es module
的,然后打包成CMD
发布到npm
上。npm
全称是node_modules
是给node.js
使用的,所以要遵守node
的规范。最好的导出方式就是使用module.exports = xxx
实现之后
简单的事情也可以变得很有意义,功能虽然简单,但是里面涉及很多很基础的概念。对于准备从学前端的同学而言这是一个很好的选择。既可以学着怎么涉及一个组件,学一下基础知识,又能顺便学一下
npm
简单的事做到了极致会变得特别有意义了。
css
一行代码就能极大效率的解决很多js
的问题,那为啥不试试用css
解决呢源码就 120 行,可以看看,是不是还有别的隐形的功能,后面加一个 autoplay 参数就是我临时突然想到了。在之前的工作有碰到这个点击元素平稳滚动的需求。可以下载源码看看,试一试