- 博客(39)
- 收藏
- 关注
RSS订阅原创 前端优化之节流(throttle)与防抖(debounce)
在前端开发中，节流（Throttle）和防抖（Debounce）是两种重要的性能优化技术，用于控制高频触发的事件处理函数，避免浏览器过度执行导致的卡顿或资源浪费。掌握节流和防抖能有效提升前端应用的性能和用户体验，特别是在处理高频触发的事件时。根据具体场景选择合适的实现方式，并注意参数调优是关键。
2025-06-12 10:45:00
142
原创 前端性能优化之async 与 defer
async和defer属性是前端性能优化中非常实用的工具，合理使用它们可以显著提升页面的加载速度和用户体验。在实际开发中，我们需要根据脚本的功能、依赖关系以及对执行时机的要求，选择合适的属性。对于独立的、无依赖的脚本，优先使用async；对于有依赖关系且需要在 DOM 加载完成后按序执行的脚本，defer则是更好的选择。通过正确运用async和defer，我们能够让页面的资源加载和执行更加高效，为用户带来更流畅的浏览体验。
2025-06-10 12:45:00
598
原创 vue2使用three.js实现一个旋转球体
渲染有一个问题 重新触发会导致球体运动加速；再这里要加个判断如果有触发动画的话；再次渲染不需要加载动画方法。
2025-05-19 15:05:02
195
原创 微信小程序转多端实践
1. 微信开发者工具 点击 ‘预览’ 在点击下方‘去体验’1. 点击‘去体验’ 升级为多端 会出现下面按钮。打包后安装可打开部分页面；用微信授权的页面不支持。点击运行测试一下 扫码可以正常访问有页面展示。开始进行打包(开发版热更新)选择打包后生成文件的路径。生成一下开发版试一下。
2025-04-17 16:20:46
250
原创 微信小程序转为App实践篇 FinClip
导入进来后可以先编译看是否可以运行；有报错需要加官方企业微信群在群里咨询问题（这里进来和小程序开发工具类似 多了几个操作按钮）打开导入自己的小程序项目；导入时会解析自己的小程序源码并分析其中有哪些需要兼容并生成一个xls文档（这一步不确定代码安全性）如果编译顺利的话 可以点击 生成app进行相关配置进行操作（本人由于代码过于庞大复杂；我的小程序项目比较大 逻辑比较复杂 需要300多条的兼容。首先在FinClip 官网上下载应用。参考下面链接先 开始实践。
2025-04-16 17:28:22
568
原创 ios端使用TCplayer直播播放三秒直接卡顿bug
2. 最后在代码里查看 发现初始化两个palyer播放器；考虑ios直播流时间戳时间比较严格；两个同时初始化渲染；注释掉另一个可以正常播放。对比官方文档没发现什么问题。1. 查看配置项没问题。
2025-03-21 15:29:57
379
原创 小程序添加到手机日历提醒
1. 首先在小程序后台 设置=》用户隐私权限 =》 添加日历写入权限。3. 在代码中调用授权日历写入然后调用写入日历的api。2. 在小程序app.json代码中加入日历写入权限。
2025-03-11 11:36:18
453
原创 创建自己的组件库
一： 创建组件库1. 登录或者注册自己的npm 账号https://www.npmjs.com/2. 在控制台登录上自己的帐号npm login //按照提示输入用户名,密码,邮箱即可npm who am i //登陆后查看登陆状态注意： 控制台登录时可以能遇到的问题问题一： 报401 （该问题是因为之前安装淘宝镜像 指向不对 修改回来重新登录就可以）npm config set registry https://registry.npmjs.org/3. 创...
2022-03-18 16:16:11
1748
3
原创 vant移动端遇到的一些问题记录
1. 使用动作面板ActionSheet 和弹出层Popup 被下层元素遮挡问题解决方法 使用 get-container属性挂载到body上2. 使用Tab 标签页组件 选中样式偏移解决方法 给tab外层设置宽度100%3. 使用transition动画切换路由 页面出现卡顿效果解决方法 给外面路由设置宽度100%4. 由于页面中书写beforeRouteLeave(to, from, next) { }方法 导致页面路由不跳转5. 使用watch监听页面某一元素高度 来控制展
2022-01-04 09:28:36
1152
原创 vue组件引用以及组件之间传值
1.首先创建页面index文件为父级；在common里创建需要的组件并命名2.创建子组件子组件页面和实际的vue页面写法结构是一样的3.在父级里引用子组件先用import引用该组件页面，再在commponents注册组件之后在父级就可以使用了4.子组件和父级通信如果父级需要给子级传参 在引用组件时写传参名称 然后在父级传值；在子组件的props里面获取传参名称得到传参值 进行使用这里的.sync修饰符：可以在子组件中修改值子组件修改值的方...
2021-09-06 10:51:34
794
原创 vue 多层对象数据更新 视图不渲染问题
刚开始直接使用（根据下标来修改找到相对应位置修改数据；数据虽然修改成功了；但视图未修改）setRowPath(){ this.list1[this.editIndex].eventLocation=this.temp.eventLocation; this.list1[this.editIndex].referencePath=this.temp.referencePath; this.list1[this.editIndex].radius=this.
2021-05-11 10:39:16
913
原创 vue 点击复制内容功能实现
文本<li>升级包地址：<span style="color: #05A5FB;cursor: pointer;" @click="showUrl">点击复制</span></li>方法调用接口获取url地址 //查看复制链接 showUrl(){ showFileUrl({type:3,typeId:this.id}).then(response => { this.copy(respon
2021-05-11 09:50:19
131
转载 高德地图Marker与InfoWindow定位居中冲突问题
最近的项目里有功能模块需要实现地图显示,用的是高德地图.前不久发现个小问题,项目需要实现点击某个Marker时将地图放大到合适的级别,中心点设置为当前Marker的坐标,并显示一个InfoWindow;问题所在就是当点击该Marker的时候,经常无法将地图中心设置为当前Marker的坐标,导致Marker跑偏了十万八千里,视野内的地图空无一物..相当的不友好…..之前实现这个功能的代码如下:var infoWindow = new AMap.InfoWindow({offset: new AMap.
2021-01-19 17:07:51
1245
4
原创 高德地图关于点标记的一些实现
需求：1、引用高德地图根据设备坐标点放置设计的icon,点击该标记时标记样式改变（变大）；2、当后端推送设备消息时，地图出现信息弹框并且该设备点要出现缩放动画效果；实现方法需求一1.首先初始化地图var map = new AMap.Map('container', { mapStyle: '自己的自定义样式的路径', //设置地图的显示样式 center: [118.85,30.48], resizeEnable: true, expandZoomRange:
2021-01-18 11:11:33
1914
原创 iot studio引用中遇到的问题
使用iframe引用iot上搭建好的页面路径，页面引用后配置的接口在谷歌浏览器上报403(edge同样的问题；火狐没问题）提工单询问，是由于浏览器cookie导致了这个问题解决方案一（手动配置一下）：摘自：https://blog.csdn.net/wang1006008051/article/details/1110547521.打开chrome 浏览器2.地址栏输入chrome://flags/#same-site-by-default-cookies3.分别把same-site-b
2021-01-18 10:27:39
313
原创 vue-elemnent动态添加得表单其实有值但是验证必填的样式文字一直在
因为绑定的model里面数据没有初始定义这个参数；所以验证一直不消失；初始定义一下这个参数就消失了
2020-12-31 11:07:54
311
原创 vue中饼图多重效果实现
效果图如上//html<div class="pie-wrapper"> <div id="pie" ref="pieCharts"> </div> //中间两个圆的布局 <div class="pie-width"> <d..
2020-07-28 15:15:56
388
原创 vue中echarts折线图中设置背景渐变&选中样式
设置改折线图的背景颜色 选中样式为柱状阴影 选中点有外发光//html<div class="middle-center-charts" ref="middleCenterCharts"></div>//js var myChart = echarts.init(this.$refs.middleCenterCharts); //获取元素进行echarts初始化 // 指定图表的配置项和数据 ..
2020-07-28 15:05:51
2214
原创 vue中echarts实现水球动画图
实现如上图样式思路：把后面图片用背景图片写入 中间水球图使用echarts中的liquidFill由于自己是在vue中使用的 首先要用npm安装npm iecharts-liquidfill -s在页面引用import "echarts-liquidfill";//html模块<div class="carLeft"> <div class="carCharts" ref="carCharts"></div></div&...
2020-07-28 14:56:13
3784
3
转载 JS实现指定区域的全屏显示功能示例
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.jb51.net js指定区域全屏</title> <style> #fulldiv { background: #fff; width: 100%; text-al...
2020-07-28 14:34:19
295
原创 vue中使用WebSocket
需要实现：有人触发门禁，就弹出消息信息使用WebSocket 实现（由于项目重新发布会导致WebSocket断开连接，所以当断开时会定时请求连接WebSocket） websocketInfo(){ var that = this; var min = 100; var max = 999; var range = max-min; var rande = Math.rand...
2020-07-07 15:30:01
250
原创 antd-mobile 移动端使用input调用摄像头拍摄图片反显时图片旋转问题
需要实现的页面效果：点击头像进行图片上传；再次点击可以修改遇到的问题：上传图片反显到框里面 图片旋转最终解决方案： <div style={{padding:'10px 0'}}> <span className={s.fileStyle}> <img src={this.state.imgSrc} alt="" className={s.imgs} id
2020-06-16 14:35:12
1569
1
原创 一般pc端首页怎么布局比较好
之前一直都不知道首页布局怎么处理比较好；写了几个首页页面后自己觉得绝对定位展示各种分辨率下适配比较好首先要实现下列首页布局现在的做法是：先获取文字到下面框的高度；获取中间部分盒子的宽度；写一个盒子之后绝对定位到页面中间；之后进行内部布局<template> <div class="login-container"> <div style="height:557px;position: absolute;top:0;bottom:0;right:0;
2020-06-10 09:42:42
1326
转载 css实现三角形&多边梯形
css可以实现各种各样的三角形，减少了切图加载图片，以下是各种三角形的实现方法。1.首先设置一个盒子的三边为不同的颜色，看下边框是怎么显示的。<html><head><style type="text/css">#test{ width:20px; height:20px; border-width:15px; border-style:solid; border-color:#e66161 #f3bb5b #94e2...
2020-06-02 15:08:31
447
2
原创 element-ui中echarts自适应窗口改变
1.进入页面添加监听窗口改变事件2.定义窗口改变时触发的方法（在这个方法里面调用echarts的自适应 resize方法）3.一定要注意离开页面的时候销毁这个页面的监听事件over~...
2020-04-02 15:25:06
663
原创 使用element-ui表格编辑时 表格内容也跟着改变问题
原因：由于编辑框的值都是直接从表格的row中取值赋值的 属于浅克隆吧 所以同一源里的数值也会改变解决方法：点击编辑框赋值的时候；不要直接赋值；使用Object.assign({},row);赋值...
2020-04-02 15:04:19
2467
原创 vue-admin-element框架三级菜单跳转问题
遇到的问题：当项目路由中书写三级菜单之后；跳转之后面包屑改变为三级了，但是页面比没有跳转（但是又要展示三级面包屑；又要跳转页面）解决方法：1.在二级菜单加一个<router-view></router-view>标签 (用来承载三级菜单页面)2.在项目路由中的meta标签加一个参数开关来控制是否隐藏二级菜单页面...
2020-04-02 14:28:29
5505
5
原创 vue axios请求全局配置返回提示信息&且全局配置加载loading
import axios from 'axios'import { MessageBox, Message } from 'element-ui'import store from '@/store'import { getToken } from '@/utils/auth'import { Loading } from 'element-ui';//开始加载动画let loa...
2020-01-03 09:59:25
1081
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人