- 博客(22)
- 收藏
- 关注
原创 vue-页面滚动加载 及内容滚动在可视区域发送请求
在这个例子中,我们使用 ref 属性来获取 info 元素的引用,并在 mounted 钩子中使用 window.addEventListener 来监听滚动事件。在滚动事件处理函数 handleScroll 中,我们计算滚动条的位置,并将其与可视区高度进行比较。如果滚动条位置大于可视区高度,我们将滚动条位置重置为可视区高度,从而使元素始终保持在可视区中。
2023-11-30 16:28:57
571
原创 vue---nuxt2 通过服务端检测设备类型
在 Nuxt.js 中,可以通过一些方法来进行服务端检测设备。服务端检测设备通常是指在服务器端判断用户访问网站所使用的设备类型,如手机、平板电脑或桌面电脑。这可以帮助我们提供更好的用户体验,例如根据设备类型优化网页布局或加载不同的资源。通过以上方法,你可以在服务端检测设备类型,并根据设备类型进行相应的页面优化或资源加载,从而提供更好的用户体验。在页面中,你可以通过以下代码获取设备类型。
2023-07-20 18:07:06
462
原创 nuxt 引入nuxt-img 以及webp 和png 之间转换
Nuxt.js提供了一个组件,可以根据浏览器支持情况自动选择合适的图片格式,包括WebP和PNG等。如果你的原始图片是PNG格式,但是想让Nuxt.js自动选择WebP格式的图片,可以按照以下步骤进行操作:1、首先,你需要确保你的服务器支持WebP格式,可以在服务器上安装WebP转换工具或使用WebP格式的图片。2、然后,在你的Nuxt.js项目中,将PNG格式的图片转换为WebP格式。你可以使用Nuxt.js提供的@nuxt/image模块或使用其他的图片处理工具来进行转换。
2023-04-11 20:11:03
2603
1
原创 vue 实现文本复制功能
在上面的代码中,我们先在data中定义了需要复制的文本,然后在mounted钩子中,实例化了一个Clipboard对象,并指定了要复制的文本,同时监听了复制成功和失败的事件,并在控制台输出相应的信息。这样,在点击“复制文本”按钮时,就会将textToCopy中定义的文本复制到剪贴板中。
2023-03-26 13:02:41
2448
原创 如何解决去除window.__nuxt__太大的问题
node_modules/@nuxt/vue-renderer/dist/vue-renderer.js 也需要修改。通过修改node_modules/@nuxt/vue-renderer/dist/vue-renderer.js。修改完成后,别忘了给.nuxt文件夹开启读写权限,本地开发npm run dev的时候,还是需要改回来哦。注意:修改完后重新打包npm run build ,上传到服务器,同时服务器内的。修改完后记得 npm run build 再启动服务。
2022-12-11 00:26:16
515
原创 js实现 scorll 滚动条触底加载 ---及滚动条左右滑动触底事件触发
【代码】js实现 scorll 滚动条触底加载 ---及滚动条左右滑动触底事件触发。
2022-11-11 19:41:30
1387
原创 vue图片懒加载报错------ vue-lazyload 使用 failed to resolve directive: lazy
vue图片懒加载报错------ vue-lazyload 使用 failed to resolve directive: lazy
2022-11-10 17:46:20
1305
1
原创 JS实现移动端标签定位查找 X轴和Y轴
获取元素位置可以用 offset 或 getBoundingClientRect,使用 offset 因为兼容性不好,比较麻烦,offset获取位置会形成“回溯”。right: 元素右边缘距离文档左边的距离;bottom:元素下边缘距离文档顶部的距离;bottom:元素下边缘距离文档顶部的距离;right:元素右边缘距离文档左边的距离;top::元素上边缘距离文档顶部的距离;left:元素左边缘距离文档左边的距离;top: 元素上边缘距离文档顶部的距离;left:元素左边缘距离文档左边的距离;
2022-10-28 12:18:45
631
原创 小程序--自定义组件(一)
根目录下创建components文件夹创建子文件夹 test(自定义名称)test 文件夹下右键选择–新建 Component⚫ app.wxss 中的全局样式对组件无效⚫ 只有 class 选择器会有样式隔离效果,id 选择器、属性选择器、标签选择器不受样式隔离的影响建议:在组件和引用组件的页面中建议使用 class 选择器,不要使用 id、属性、标签选择器!默认情况下,自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。但有时,我们希望在外界能。
2022-09-07 11:26:40
627
原创 小程序基础-组件
小程序内置提供了许多组件,同时也允许开发者根据业务需要自定义组件。小程序提供了模板功能,使用模板可以将页面中的公共部分提取出来,实现复用的效果。自定义模版基本用法使用 template 标签定义模板,指定 name 属性为模板命名使用 template 标签应用模板,指定 is 属性确认应用哪个模板
2022-09-06 20:40:20
301
原创 小程序基础-API
单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB。 API 是小程序开发的核心,通过 API 开发者可以获得微信底层封装的高级特性,如网络请求、文件操作、设备信息、地理定位、本地存储等。通过全局函数 getApp 可以获取全局的应用实例,如果需要全局的数据可以在 App() 中设置。注意:单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB。保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。关闭当前页面,跳转到应用内的某个页面。
2022-09-06 18:55:23
1577
原创 小程序基础知识
导航声明导航变成式导航语法wx:for将数组数据遍历绑定到组件中。通过 wx:for 控制属(类似vue中的指令)实现。block通过 block 可以将多个组件元素“包”到一起进行渲染,block 只是提供一种结构,并不会被渲染到页面中。一般这样做的目的是可以将多个组件按统一的逻辑进行控制。条件渲染1、基本用法2、多分支hidden小程序中组件属性的值如果为布尔类型时,只要包含这个属性即为 true,要表达 false 时,需要通过 {{}} 表达,原因是 {{}} 中的内
2022-09-06 18:33:33
564
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人