- 博客(38)
- 收藏
- 关注
RSS订阅原创 Webpack基本配置
Webpack 是一个流行的模块打包工具，它可以将你的应用程序的各种资源（如 JavaScript、CSS、图片等）打包成一个或多个优化过的文件，以便于浏览器加载。在项目根目录下创建一个名为 webpack.config.js 的文件，这是Webpack读取配置的默认文件名。如果需要处理其他类型的文件（如CSS、图片等），你需要安装相应的loader。filename: 'bundle.js', // 打包后的文件名。entry: './src/index.js', // 打包入口文件。
2024-06-06 15:58:32
366
原创 什么是防抖与节流？应用场景举例
防抖（Debounce）和节流（Throttle）是JavaScript中用于优化性能的技术，特别是在处理高频事件（如窗口滚动、输入事件、resize事件等）时，以避免过于频繁地执行回调函数，从而节省资源和提高应用响应速度。：防抖函数确保在最后一次操作后的一段指定时间（如300毫秒）内，如果不再有新的操作，才会执行回调函数。防抖是延迟执行，只有在事件触发的频率降低到一定程度后才会执行，而且如果事件持续触发，之前的所有执行都会被取消。节流是间隔执行，保证在特定时间内至少执行一次，不论事件触发的频率如何。
2024-06-03 14:10:46
623
1
原创 CSS双飞翼布局
比如：写一个左中右布局占满全屏，其中左、右两块固定宽 200px，中间自适应，要求先加载中间块。双飞翼布局是一种经典的CSS布局模式，主要用于实现左右两列固定宽度，中间列自适应的布局。左右 200px 中间自适应。
2024-06-01 23:21:16
400
原创 什么是BFC?
1、BFC：又叫块级格式化上下文（block formatting context），就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。可以通过触发BFC解决问题：overflow: hidden;或者position: absolute;2、BFC的原则：如果一个元素具有BFC，那么内部元素再怎么弄，都不会影响到外面的元素。display的值为：inline-block、table、table-cell 等等。position的值为：absolute、fixed。
2024-06-01 22:33:33
297
原创 TypeScript基础
1.1TypeScript 是什么：Type + JavaScriptTypeScript（简称：TS）是 JavaScript 的超集（JS 有的 TS 都有）。在 JS 的基础之上，为 JS 添加了类型支持TypeScript 是微软开发的开源编程语言，可以在任何运行 JavaScript 的地方运行1.2 TypeScript为什么要添加类型支持？背景：JS的类型系统存在先天缺陷，JS代码中绝大部分错误都是类型错误（UncaughtTypeError）
2024-05-31 17:45:24
844
原创 小程序-滚动驱动动画
scrollSource: '#scroller', // scroll-view 的选择器。// 页面渲染完毕，绑定动画效果 onReady 相当于 vue 中的onMounted。startScrollOffset: 0, // 开始滚动偏移量。endScrollOffset: 50, // 停止滚动偏移量。timeRange: 1000, // 时间长度。// 获取当前页面实例，数组最后一项。// 动画效果,导航栏返回按钮。// 动画效果,导航栏标题。
2024-05-27 00:21:50
281
原创 小程序-购物车-基于SKU电商规格组件实现
加入购物车 </view><view class="buynow" @tap="openSkuPopup(SkuMode.Buy)"> 立即购买
2024-05-25 17:33:32
1081
原创 在uni-app 插件市场下载 SKU 插件之后，引入项目报错问题
在<script> 标签下面添加 /* eslint-disable */原因：项目使用了 eslint 语法检查。解决：禁用 eslint 语法规则。
2024-05-24 14:47:53
127
原创 小程序-收货地址管理模块实现
实现思路：使用 uni-swipe-action 侧滑组件 --> 绑定删除事件 --> 二次确认删除 --> 调用删除地址API。实现思路：封装 API 接口 --> 定义参数类型 --> 点击保存调用接口 --> 成功提示 --> 返回上一页。(有) --->初始化调用 --> 表单数据回显。点击保存按钮调用接口 --> 成功提示 --> 返回上一页： address-form.vue。address-form.vue --->新建地址和修改地址页面。
2024-05-23 20:55:07
1609
3
原创 面向过程与面向对象
在面向过程思想中，我们编写的代码都是一些变量和函数，随着程序功能的不断增加，变量和函数就会越来越多，此时容易遇到命名冲突的问题，由于各种功能的代码交织在一起，导致代码结构混乱，变得难以理解、维护和复用。而利用面向对象思想，我们可以将同一类事务的操作代码封装成对象，将利用到的变量和函数作为对象的属性和方法，然后通过对象去调用，这样可以使代码结构清晰、层次分明。定义：已完成一件事情来说，面向过程思想注重的是具体的步骤，只有按照步骤一步一步执行，才能完成这件事情。
2024-05-19 14:30:20
286
原创 小程序-图片大图预览和轮播交互
mainPictures, // 需要预览的图片链接列表 数组。current: url, // 当前显示图片的链接。-- 商品主图 -->轮播图变化-更新下标。
2024-05-19 10:57:08
412
原创 小程序-生成页面骨架屏
骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。是就显示骨架屏，不是就显示正常组件(页面)骨架屏作用是缓解用户等待时的焦虑情绪，属于用户体验优化方案。微信开发者工具提供了自动生成骨架屏代码的能力。将这两个文件复制到vscode中，转成组件。-- 热门推荐面板 -->-- 分类面板 -->-- 猜你喜欢 -->-- 轮播图 -->-- 自定义导航栏 -->-- 骨架屏 -->数据加载完成，正常显示页面。// 是否显示骨架屏。
2024-05-17 20:48:39
615
原创 小程序端自定义导航栏-样式适配-安全距离
"navigationStyle": "custom", // 隐藏默认导航。"navigationBarTitleText": "首页"-- ...省略 -->// 获取屏幕边界到安全区域距离。-- 顶部占位 -->适配之后：不同设备都有安全距离。解决：样式适配 - 安全距离。无设备安全距离时，被遮住。样式适配 -> 安全区域。1、隐藏默认导航栏，
2024-05-16 17:37:03
399
原创 插槽相关知识
在组件封装过程中，可以为预留的<slot>插槽绑定props数据，这种带有props数据的<slot>叫做 作用域插槽。：对插槽进行命名，没有name的话，name默认就是default,外层一定要用<template>标签包裹。是vue为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。
2024-05-15 21:17:59
346
原创 Vue3-购物车列表-单选和全选功能实现
/ 通过skuId找到要修改的那一项 然后把它的selected 修改为传过来的selected。1. 操作单选决定全选：只有当cartList中的所有项都为true时，全选状态才为true。2. 操作全选决定单选：cartList中的所有项的selected都要跟着一起变。// 把cartList 中每一项的selected都设置为当前的全选状态。// store 中 cartList 数组无法知道要修改谁的选中状态。// 除了 selected 补充一个用来筛选的参数 - skuId。
2024-05-11 17:09:17
394
5
原创 Vue3-放大镜效果实现-滑块跟随鼠标移动
横向：elementX > 300 left = 200 elementX < 100 left = 0。纵向：elementY > 300 top = 200 elementY < 100 top = 0。维护一个数组图片列表，鼠标换入小图记录当前小图下标值通过下标值在数组中取对应图片，显示到大图位置。获取鼠标相对位置 ----> 控制滑块跟随移动。纵向: 100 < elementY < 300，大图的移动方向和滑块移动方向相反，且数值为2倍。控 制滑块跟随鼠标移动 （left/top）
2024-05-09 22:58:59
388
原创 页面列表数据无限加载-基于eleement-plus实现
核心实现逻辑：使用elementPlus提供的 v-infinite-scroll 指令。页数参数加 一获取下一页数据，做新老数据拼接渲染。-- 商品列表-->监听是否满足触底条件。效果图：无限加载数据。
2024-05-09 17:53:34
231
1
原创 基于业务逻辑拆分函数
Category/index.vue 需要用到 bannerList 和 categoryData 用结构赋值即可。2、函数use开头，内部封装逻辑，return 组件需要用到的数据和方法给组件消费。useBanner业务逻辑、useCategory业务逻辑。3. 函数内部把组件中需要用到的数据或者方法。1、逻辑拆分过程是一个拆分再组合的过程。把数据或者方法组合回来使用。1. 按照业务声明以。四、需要用到数据的组件。
2024-05-09 16:21:50
215
1
原创 路由缓存处理
缓存问题：当路由path一样，参数不同的时候会选择直接复用路由对应的组件，即点击了菜单，但是复用了组件，页面没有发生更新。-- 路由出口 添加key 破坏复用机制 强制销毁重建 -->2、使用 onBeforeRouteUpdate钩子函数，做精确更新。1、给 routerv-view 添加key属性，破坏缓存。
2024-05-08 22:09:33
168
2
原创 地址路径传参-Vue3面包屑导航渲染
2、 在模板组件中路由跳转中传递参数id，使用element-plus组件库中的面包屑组件。1、在router/index.js中传递路由参数，用占位符 " : "4、查看url地址栏，是否有传递的参数id,在组件中调用接口API。3、封装分类API src/apis/category.js。
2024-05-08 20:56:57
142
1
原创 Vue3-全局指令封装-图片懒加载指令
1、vueuse安装：npm i @vueuse/core。2、封装指令：directives/index.js。3、在项目入口文件main.js引入注册指令。5、在浏览器network 查看是否生效。4、在组件中调用指令。
2024-05-08 17:33:33
231
2
原创 登录功能的具体实现
/ 封装拦截器 books/src/netword/request.js。1、技术栈：vue2 + element-ui + node.js + mysql。②安装element-ui --> npm i element-ui -S。// 路由配置 books/src/router/index.js。// 登录界面 books/src/view/login.vue。// 跨域配置 books/vue.config.js。// token秘钥。
2024-05-05 23:19:28
824
3
原创 HTML5 + CSS3 基础知识梳理
视频播放器需要的属性controls显示或隐藏用户控制界面autoplay媒体是否自动播放loop媒体是否循环播放pause媒体是否暂停（只读属性）ended媒体是否播放完毕（只读属性）当前的播放进度duration媒体播放总时间volume0.0到1.0的音量相对值muted是否静音3.2播放器需要的方法：视频播放器用到的方法play()媒体播放Pause()媒体暂停时间更新Canplay()可以播放。
2024-05-05 16:18:19
1047
4
原创 封装拦截器
前端封装拦截器是为了统一处理请求和响应，可以用于添加请求头、处理请求参数、统一处理错误等操作。在Vue实例中引入拦截器文件，并将拦截器实例挂载到Vue原型上，使其在整个应用中都能使用到。添加响应拦截器：在接收到响应后进行拦截，可以在此处统一处理错误、格式化数据等操作。添加请求拦截器：在请求发送前进行拦截，可以在此处添加请求头、处理请求参数等操作。在需要发送请求的地方，直接使用axios实例发送请求，拦截器会自动处理请求和响应。在拦截器文件中引入axios库（或其他HTTP请求库）和Vue框架。
2024-04-17 17:44:51
221
原创 分页功能实现
console.log("NewBookRecommendation.vue_161_获取数据", res);console.log(`每页 ${val} 条`);console.log(`当前页: ${val}`);pageSize: 5, // 每页用户条数。currentPage: 1, // 当前页。// 分页大小 即每页条数。
2024-04-17 16:53:15
283
1
原创 前端导出excel
2.引入使用：import * as XLSX from "xlsx/xlsx.mjs"；// 最后，将工作簿写入到一个Excel文件中并命名文件。// 创建一个新的工作簿（workbook）对象。// 导出全部数据为 excel。// 导单行出 excel 表格。// 将工作表添加到工作簿中。1.安装第三方库如xlsx。
2024-04-17 16:46:42
188
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人