- 博客(20)
- 收藏
- 关注
RSS订阅原创 手把手实现可拖拽横向滚动导航栏
这种横向可拖拽导航非常适合内容分类较多的场景：电商导航（不同品类切换）新闻/资讯站（频道快速切换）数据后台（模块快速定位）用户操作直观兼容 PC + 移动端无需第三方库，纯原生 JS 即可实现你可以在自己的项目里直接套用，也可以根据业务需求扩展样式和逻辑。
2025-09-29 13:48:28
312
原创 Shopify实现图片墙的懒加载优化
placeholder SVG 避免页面空白跳动；意味着当图片有 30% 可见时触发加载。好了，感兴趣的可以自己去试试。，在图片进入视口时才加载；上面的是HTML布局代码。支持旧浏览器降级处理；
2025-08-06 15:21:08
196
原创 Shopify 元对象（Metaobject）的创建与使用
Metaobject 是一种结构化数据模型。结构可定义：可以创建字段（text、image、date、reference 等）。可复用：一个元对象可以被多个资源引用。可管理：可在后台内容编辑器中管理，支持权限和 UI 控制。支持关系引用：字段可以是另一个元对象的引用，实现嵌套结构。
2025-08-04 15:33:31
768
原创 去除Youtube视频黑边
今天给大家分享一个很常见的需求，就是去除youtube视频多余的黑色边框。这个是html代码，主要就是需要一个盒子将iframe套住。然后就可以进行css操作了。
2025-07-17 13:13:16
195
原创 Shopify 博客点击按钮实现无限加载
这个是{%- render 'pagination-btn', paginate: paginate -%}中的内容，其实就是一个小组件，里面就是那个加载按钮。今天分享一下shopify博客集合页的一个需求，客户不需要默认的分页样式和功能，他想要的是一个加载按钮，点击加载，如果没有了，按钮就隐藏。上面就是最重要的js代码部分了，其实主要就是做了通过接口获取相关数据，然后加在已有数据的后面进行拼接，最后判断是否还有下一页来决定是否隐藏按钮。按照上面的步骤来，就可以实现客户提的需求，看起来是不是也挺简单的。
2025-07-14 17:58:20
134
原创 关于Shopify的blocks文件夹以及schema相关属性
这是 Shopify 的主题编译系统提供的一个特殊变量，它会将当前 block 下的所有子 block 渲染结果插入进来。从图中可以看出block中可以嵌套block,且最多可以嵌套9层，个人建议不要这么嵌套，容易出问题，且不易维护。，用于控制一个字段（setting 或 block）是否在编辑器中可见，基于其他字段的值来动态判断。相关引入（并且blocks中的文件也可以引入blocks中的文件）定义里的一个属性，用于标识该 block 是静态区块。是一个非常关键的字段，用来。
2025-06-13 14:29:00
244
原创 Shopify中实现地图标点且移动端滚动驱动横向滚动
但是今天主要是来说移动端的实现，因为之前的那个移动端并没有用地图显示而是换了一种方式，所以这个项目的移动端需要重写。但是我们还需要考虑pc端和移动端之间的相互影响，因为我操作的是同一个元素，并没有区分两端，因为那样太冗余了。最近我的项目中又遇到这个模块了，由于之前写过这种模块的pc端，所以我很快就将之前的搬过来改了改，效果就如下图所示。在shopify项目中，地图展示模块是非常常见的。实现的方式也是五花八门的，复杂的会要求你用真地图进行开发，当然也可以用插件实现，会简单许多，简单的也可以直接贴张图即可。
2025-06-06 11:01:49
223
原创 只用css实现文字跑马灯效果
需要注意的是，里面的内容一定要足够的多，最好能撑满整个容器，不然也会出现空白项的。但是用swiper实现这个功能会有许多问题，想要实现无限循环轮播，里面的swiper-slide必须足够的多，不然的话会有空白项。除了这个问题外，还有可能出现轮播停止的现象，至于这个问题怎么出现的，我还没找到原因。也有不同的实现方式，有通过js直接写的，有借助轮播js库写的，比如swiper。最后我发现他们用的最多的就是通过css动画实现的，这个方法既简单又高效，不需要引入第三方库之类的。
2025-05-14 15:18:51
393
原创 Shopify 商品列表实现不在集合页面进行无限加载
从代码中可以看到，我们用到的还是{% paginate %}分页来拿到剩余的数据，不过我们需要将当前分页的请求地址进行一下更换，将它替换成在collection页面中展示的正确的地址。拿到数据后，我们就可以添加上一些用于无限加载的功能的代码了，代码片段中有，我就不具体说了。相信大家在进行 Shopify 主题开发时，都遇到过一个问题，就是shopify限制了collection返回的数量，最多一次返回50个数据，想要更多的话必须要进行分页了。
2025-05-09 15:27:29
340
原创 在shopify中如何正确处理blocks循环和swiper的冲突
细心的小伙伴应该看出来了，swiper是在for循环中的。用过的都知道这样会出现问题，要么就是swiper渲染会出问题，要么就是swiper的箭头和点会出现问题，要么会互相影响，要么就会失效。想要解决这个问题，其实也很简单，重点就是我图中框出来的地方。其实从图中可以看出，在js中照样可以用for循环将代码包裹起来，这样js代码也是可以被循环出来的。其实不止是swiper可以这么解决，一些其他的东西也可以这样解决的。以上代码只涉及右边的swiper和整体的js代码。这个链接看看，因为参考的就是这个。
2025-04-22 17:55:04
338
原创 关于在shopify主题代码theme.js中如何获取前台配置的数据
在看代码的时候，有一些关键词引起了我的注意。就是下图中window.themeVariables开头的代码，最开始的时候我一直以为这些是shopify自带的一些关键词。你们发现没有，这里面有许多前台配置的数据，都是可以通过{{ | json }}的形式进行转换的，然后就可以直接在theme.js中使用了。这样的话，除了这些文件自带的一些数据，你也可以添加你想要处理的数据放进去。之前的我都是通过data属性，把前台需要的数据放在里面，然后再在theme.js中获取最后在进行操作。
2025-04-21 17:02:19
177
原创 使用gsap实现渐进动画
大概效果就是，前三个盒子跟随滚动条的滑动依次从底部回到初始的位置对齐，然后后面的三个盒子在前面的三个盒子完成之后再进行类似的动画，直到底部对齐。是不是感觉挺简单的，又挺繁琐的。实现的代码是不是很简短，因为gsap在第一步的时候就已经把之前需要考虑的点全部完成（页面的滚动，动画的执行先后，还有动画的触发和结束，以及动画的回滚）。因为它不仅涉及到页面的滚动，动画的执行先后，还有动画的触发和结束，以及动画的回滚。如果不借用相关的动画库，要实现起来还是挺麻烦的，但是如果使用gsap.js动画库就会简单多了。
2025-03-17 13:49:22
540
原创 一个不需要插件的数字滚动
我当时就是被下图的数字滚动效果吸引的，而且他还能在Object 属性（任何包含数值的对象属性都可以为其设置动画）和DOM 属性（任何包含数值的 DOM 属性都可以设置动画）生效。但是设计稿上除了数字滚动，还有其他的效果，它需要的是数字滚动和进度条动画是联动一致的，所以我就没有采用countUp.js。最近项目中有个模块需要用到数字滚动这个功能，本来一开始的打算是直接用我之前用过的一个插件js写的，它是一个专门处理数字滚动，相信大家都用过它countUp.js。阅读，里面还有许多关于动画方面的知识。
2025-03-07 14:31:12
393
原创 手写一个步骤slider，实现步骤选择
今天给大家写个步骤slider功能，html部分可以不看，主要看js代码部分。具体是什么样子可以看下面的视频。功能点2：没有选择option,不能点击下面步骤点进入下一步。功能点3：进入下一步后，可以通过下面的步骤点返回到对应的一步。功能点4：做了缩屏实时监听，确保模块一直在正确的位置。功能点1：选择好option,进入下一步。
2023-10-13 17:36:33
326
1
原创 一个非常好用的js动画库
GSAP是一个强大的JavaScript动画库，用于在网页上创建各种动画效果。GSAP使用高性能的动画引擎，可以实现平滑的动画，无论是移动、旋转、缩放还是淡入淡出。GSAP提供了丰富的API，可以精确控制动画的每个方面，包括持续时间、缓动函数、重复次数等。GSAP支持所有主流浏览器，确保您的动画在不同平台上都能正常工作。
2023-09-22 18:15:00
894
1
原创 如何使Swiper的无限自动轮播更流畅，没有停顿感！
相信大家都用过Swiper的无限自动轮播吧，虽然基本的功能能满足大部分需求，但是它轮播的时候明显有停顿感，这个时候给别人的视觉感受就不是很好了。这允许你更精确地控制过渡的速度曲线。时间函数可以影响过渡的速度曲线，使得过渡可以是线性的、缓慢开始、缓慢结束、或者有弹性效果等。：这是默认的时间函数，它提供了一种缓慢开始和结束的效果，通常用于使过渡看起来更加自然。：线性时间函数表示属性值在整个过渡期间都是以相同的速度变化，没有缓慢开始或结束的效果。的变体，它提供了一个较慢的开始和结束，中间部分是较快的。
2023-09-15 17:45:00
4728
3
原创 通过一个API判断元素是否在可视区内
Intersection Observer是一个浏览器API，用于监视页面上的元素与视口之间的交叉状态。换句话说，它可以告诉我们元素何时进入或离开视口，以及它们在视口中的可见程度。这一信息对于实现懒加载、无限滚动、元素动画和广告跟踪等功能非常有用。
2023-09-08 16:35:56
359
1
原创 Js倒计时功能
今天分享一个简单实用的前端功能“倒计时”，相信大家做前端的多多少少都遇到过倒计时的需求，虽然现在网上设计好的倒计时插件一大堆，随便拿一个就能完成任务了。但是这个需求最好是自己动手写一个比较好。代码这展示js部分，样式根据自己的喜好来自己设计就行。简单的倒计时功能就完成了，有兴趣的可以在此基础上进一步完善倒计时功能。
2023-08-25 20:45:00
266
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人