- 博客(38)
- 收藏
- 关注
RSS订阅原创 uniapp vue3 小程序中 手写模仿京东淘宝加入购物车红点曲线飞入样式效果 简化版代码
本文介绍了在uniapp+vue3环境下实现类似京东淘宝购物车红点飞入效果的简化方法。通过动态设置红点元素的transform属性实现抛物线动画效果，关键步骤包括：1)获取点击按钮的屏幕坐标；2)计算红点起点和终点位置；3)使用CSS过渡动画实现曲线运动；4)动画完成后重置红点位置。代码中通过uni.createSelectorQuery()获取元素位置，结合系统窗口信息计算运动轨迹，设置900ms的过渡动画，最终实现了点击商品按钮时红点飞向购物车的视觉效果。该方法省略了商品加入购物车的具体业务逻辑，专注于
2025-12-22 16:02:33
310
原创 uniapp+vue3 微信小程序中 页面切换tab 页面滚动到指定锚点位置，滚动页面时候到达指定锚点位置吸顶tab 会自动进行切换
本文介绍了在uniapp+vue3开发的微信小程序中实现页面滚动锚点定位与tab切换联动效果的方法。通过监听页面滚动事件(onPageScroll)和获取元素位置信息(createSelectorQuery)，实现了：1)点击tab自动滚动到对应锚点位置；2)滚动到指定锚点时自动切换tab；3)滚动超过阈值显示吸顶tab栏。关键点包括：正确获取元素高度信息、设置合适的滚动阈值、确保滚动事件能正常触发(需检查overflow设置和页面配置)。代码示例清晰展示了核心实现逻辑，包括tab切换方法、滚动监听处理等，
2025-12-12 14:40:15
334
原创 解决使用 UniApp 搭配 Vue3 小程序开始 使用uview-plus 的返回顶部up-back-top中onPageScroll 不触发的问题
摘要：解决UniApp+Vue3小程序中使用uview-plus的up-back-top组件onPageScroll不触发问题。关键点：1)外层容器需设置高度但不能限制overflow；2)使用自定义导航栏需配置navigationStyle:custom；3)pages.json中disableScroll必须为false。同时提供了自定义返回顶部按钮的实现方案，通过监听onPageScroll事件控制按钮显示，点击时调用uni.pageScrollTo返回顶部。两种方案都需确保页面滚动监听未被禁用。
2025-12-12 14:16:21
363
原创 uniapp uview-plus中 up-cascader 做省市县级联的时候数据编辑回显 只显示了父级 子级别不展示的问题
摘要：uniapp中使用uview-plus的up-cascader组件进行省市县三级联动时，发现数据回显仅显示父级而子级不展示的问题。经排查确认是插件代码缺陷导致，通过在u-cascader.vue文件的setDefaultValue方法中添加代码（判断levelList长度并补充当前层级数据）解决了该问题。解决方案需手动修改uni_modules下的组件代码，但需要注意重新安装插件时需要再次修改。该问题期待后续组件版本更新优化。
2025-11-26 09:38:23
188
原创 模仿elementUI 中Carousel 走马灯卡片模式 type=“card“ 的自定义轮播组件 图片之间有宽度
摘要：本文介绍了如何实现一个自定义的卡片式轮播组件，解决了ElementUI自带Carousel组件样式不满足需求的问题。通过Vue3的响应式数据控制轮播逻辑，使用Flex布局实现图片展示，并添加了左右切换按钮和圆点导航功能。核心代码包括：1）动态计算图片偏移量；2）响应式处理轮播切换逻辑；3）自定义CSS样式实现图片间距和过渡动画。该组件支持灵活配置轮播图片列表，可精确控制每张图片的显示位置和间距，实现了类似走马灯但带有图片间距的视觉效果。
2025-11-11 14:49:54
273
原创 el-select 中嵌套时间选择器 el-time-picker 并且实现时间多选功能
需求是：时间可多选 element中时间的选择不支持多选 下面进行封装拼接时间多选。
2024-03-01 09:18:08
1515
原创 elementUI 动态校验表单数据的方法
:rules=“rules.title” //title 名称可自己定义。这里主要设置两块内容 prop为动态数据 rules设置需要校验的值。list 为动态获取的数据值列表数据。
2024-02-20 18:00:13
1359
原创 elementUI 表格中如何合并动态数据的单元格
效果如下 第2行 和最后一行进行了合并 其他没有合并。ui中提供的案例是固定写法无法满足 实际开发需求。下面进行改造如下 准备数据如下。
2024-02-05 13:55:54
1381
原创 element中form校验中清除校验不通过的提示语
clearValidate(‘festivalTime’)//清除校验错误信息。实际开发中 有些校验提示因为种种原因不隐藏 这时候如何让提示信息隐藏呢？这里可以指定清除prop中设置的数据festivalTime。可以使用系统自带的方法 clearValidate。//这里清除所有校验提示信息。
2024-01-25 14:03:46
1521
1
原创 el-select嵌套el-select或者嵌套el-time-picker点击选择内层的日期时间导致外侧的el-option收回问题的解决办法
其中就是el-select嵌套el-time-picker时间选择 当选择时间时el-select的下拉框自动收回了的问题。el-time-picker 添加 @visible-change=“visTimeChange” 对应方法如下。下一步：判断el-select 标签下拉框是否出现或隐藏 visible-change 下拉框出现/隐藏时触发。2：el-select 标签中添加绑定方法 v-click-outside=“closeBox”3：页面中定义对应的方法。
2023-05-25 15:22:14
2371
2
原创 使用mddir生成项目的工程结构
1、先全局安装插件 npm install mddir -g2、在项目文件夹中 打开cmd 输入mddir 直接生成项目结构文档3、找到名字：directoryList.md的文件就是目录工程文件树
2022-10-13 11:18:51
479
原创 vue3打包时提示 TS2322:Type ‘() =＞ void‘ is not assignable to type ‘MouseEvent‘.
提示信息：不能将类型 ‘() => void’ 分配给 ‘MouseEvent’出现这种原因就是新安装的 @types/node 在18.8.4版本之后。在页面中使用在页面上使用@click会有错误提示。然后安装18.7.18版本的就可以了。更改@types/node 的版本。
2022-10-13 10:22:35
4734
1
原创 vue3+vite中配置路径别名@
在compilerOptions字段中添加： “baseUrl”: “./”,“paths”: {“@/安装@types/node 这个配置地址时会用到。
2022-10-12 17:26:38
3350
原创 vue3+vite中使用环境变量 .env 的一些配置情况说明
在项目文件中新建文件.env .env.pro 两个文件其中.env 是默认设置 .env.pro 为正式环境设置。console.log( import.meta.env) //查看相关信息 这里不显示非VITE开头的变量。正常使用的时候没有提示信息，想增加提示信息在vite-env.d.ts或者env.d.ts进行如下配置即可。使用 import.meta.env.VITE_NODE_ENV 获取环境变量。还是使用 process.env.NODE_ENV。
2022-10-12 14:04:07
10850
原创 vue3中setup语法糖的一些方法的使用总结记录
基本使用：setup写在标签script上，script setup 标签中无需return 变量、函数。vue提供了provide和inject帮助我们解决多层次嵌套通信问题。在目录src下新建文件夹 hooks ==> index.ts。
2022-10-11 11:14:29
3408
原创 vue3状态管理工具 pinia的使用
pinia是一个轻量级的状态管理库，属于 vue3 生态圈新的成员之一，也可以把它看做 vuex5，同时支持 vue2 和 vue3，模块化的设计让它的结构十分地清晰明了。这种写法和我们之前使用的 vuex 简直一模一样，区别就是 pinia 将mutations方法取消了更方便我们使用。例子：在src/stores下新建一个myStore.ts文件。在 main.ts中引入。
2022-09-27 15:26:35
1238
原创 nginx解决静态页面中ajax跨域方案配置
有些老项目遗留的静态页面使用jquery中ajax 又不想使用webpack或者gulp启动，用Nginx配置跨域问题。然后进入nginx\conf下的 nginx.conf 下 使用编辑器vscode或者其他编辑器打开进行配置信息修改。配置好后使用命令 nginx -s reload （在nginx文件夹下启动cmd终端后输入命令重启Nginx）然后在浏览器输入localhost:4000 出现如下图信息这Nginx配置成功。配置完成后重启Nginx cmd中输入命令nginx -s reload。
2022-09-06 10:46:00
1677
原创 js中进行字符串替换的方法
1，str.replace(“需要替换的字符串”，“新字符串”), 这个只替换第一个查找到的字符。2，str.replace(/需要替换的字符串/g，“新字符串”) 这个全局替换查找到的字符。
2022-08-15 13:31:48
75263
原创 element的中手动上传Upload文件做法，文件上传时转换成base64格式
手动上传主要是配置参数 :auto-upload=“false” 的使用 设置true则代表自动上传（即选择文件就开始上传服务器）其他配置如下如果不想使用base64格式提交 还可以使用FormData() 方法数据信息提交 只需要在提交代码时进行数据序列化就行...
2022-07-11 15:57:21
3661
原创 VSCode 安装离线插件的方法
实际工作中发现有些小伙伴的公司无法上网，只能在内网开发，这时候想使用VSCode的时候有些插件用不了 这时候就需要下载插件然后再离线安装使用了第一步：首先你需要有个上网的环境，找到你需要的插件如图第二步：点击右侧插件名字后会跳转到对应的插件应用网站 再网页的右下角点击Download Extension 直接网页下载第三步：将下载后的插件（后缀名为：vsix）发送到你的内网电脑中如下图操作即可安装对应的插件以上就是离线安装VScode插件的步骤了，希望对你有用，谢谢...
2022-06-28 13:51:15
2743
1
原创 npm出现报错 npm WARN config global `--global`, `--local` are deprecated. Use `--location=global
解决：npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
2022-06-28 10:37:34
11280
13
原创 搜索中清空对象属性的值方法
一般搜索中的都是对象模式，这种情况使用重置按钮清空对象中值的方法如下第一种：常规for in循环来做第二种方法：以上方法只适合简单的对象清空属性的值 如果遇到对象嵌套对象的情况使用如下方法：...
2022-06-28 10:10:22
1505
原创 css实现页面瀑布流样式的方法
css实现页面瀑布流样式的方法两种方法：1，css3的样式 column-count 2，flex布局方式方法一：** column-count 方式，这种方式IE浏览器不支持（10以下）更适合手机端使用，缺点是：图片是先从上到下排列，再从左到右排列的**body {margin:0 auto;width:500px;}.box{column-count: 4;//显示的列数（几列显示）column-gap: 10px;//每列之间的间隔距离}//---------------
2022-05-05 14:35:58
3015
原创 Vue使用ref结合ElementUI中的Dialog实现弹框的封装使用
vue使用ref结合ElementUI中的Dialog实现弹框的封装使用
2022-03-10 14:29:45
3050
原创 vue项目获取浏览器地址栏参数方法 ?aaa=111&bbb=222（非路由传参）
vue项目获取浏览器地址栏参数?aaa=111&bbb=222（非路由传参）项目中遇到一个需求，就是另一个管理系统带参直接单纯的跳转跳转到vue pc项目中的某个页面，后再初始化查询数据，参数以地址栏的形式传入管理系统：打开新地址地址（跳转新页面使用 _blank ）let obj = { id: 21, name: “测试传参” };window.open(“http://loc...
2019-11-25 10:14:05
5366
原创 vue项目如何监听窗口变化，达到页面自适应？
vue项目如何监听窗口变化，达到页面自适应？使用方法：获取窗口宽度：document.body.clientWidth监听窗口变化：window.onresizeJS里这些方法：网页可见区域宽：document.body.clientWidth网页可见区域高：document.body.clientHeight网页可见区域宽：document.body.offsetWidth (包括...
2019-11-25 10:00:32
2079
原创 基于vue element-ui的滚动条样式修改
基于vue element-ui的滚动条样式修改做vue项目使用Element UI组件库时 需要使用滚动条但是windows浏览器默认的滚动条太丑不美观和UI库界面不搭配需要考虑优化滚动条样式vue Element UI官方文档上并没有放出滚动条相关的示例说明，但是实际上是有这么一个组件的element-ui隐藏组件scrollbar的使用使用方法如下：使用上述标签把要出现滚动的...
2019-11-20 18:49:48
1764
原创 vue引入第三方js的方案 报错<
vue引入第三方js的方案 报错<问题描述vue项目中引用一个外部js包 npm中没有响应的js下载 所以只能通过外部引用使用方法如下：1、首先是第三方js包存放的位置 一定要放在 static 目录下否则引用不到2、在vue项目的index.html 中引入js包 注意： 在index.html引入外部js时 src=“static/xxxxx.js” 的...
2019-11-19 16:04:20
1252
原创 vue element-ui 第一次打开Dialog 对话框无法加载内容的问题
vue element-ui 第一次打开Dialog 对话框无法显示内容 第二次正常显示问题描述：今天需要使用Dialog 弹框中加载video视频显示，问题如下第一次点击弹框可以正常显示 但是内容不加载 报错 第二次可以正常显示内容也加载问题原因：出现这个问题的原因是js加载了 但是Dialog 的dom并没有加载完全导致js报错所以不加载查看官方文档解释如下：Dialog 的内容...
2019-11-19 15:47:53
4462
1
原创 vue中 配合elementUI实现 勾选多选框在指定区域添加相应数据并实现联动效果
vue中 配合elementUI实现 勾选多选框在指定区域添加相应数据今天在做项目中遇到了小问题，实现勾选按钮在指定区域添加数据并实现联动效果如上图：勾选按钮 在下侧添加数据 并实现联动不废话 上代码：数据自定义的对象结构：数据格式如下：textarea ：''，//存放联动数据xzTypeList:{ '协助司法送达':'协助司法送达：请协助法院完成对被执行人的送...
2019-08-28 18:16:54
2143
原创 vue-取消严格模式，去除格式警告
vue-取消严格模式，去除格式警告我们日常在写vue代码的时候，会遇到很多警告信息，这是因为我们在创建代码的时候一直写yes，或者敲回车，也就是默认安装了eslint的严格模式。在运行测试的时候，会出现很多警告和错误，页面显示会变得十分麻烦，如果习惯了就可以养成很好的代码习惯。那么如何去除这些警告呢，关闭严格模式，只要在build文件夹下的webpack.base.conf.js中的…(co...
2019-08-26 10:35:41
5008
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人