- 博客(79)
- 收藏
- 关注
原创 uniapp自定义tabBar
1、在登录页中获取该用户所有的权限// 把所有权限存入缓存中})// 方法二 通过uni.setTabBarItem()中visible属性设置(app端可以微信小程序端不行)// })// })//}, 500)} else {})})2、page.json list添加所有要用到的页面"tabBar":{"list": [// "text": "返回首页",},// "text": "监控",},// "text": "数据",},
2024-07-18 18:02:08 443
原创 商品列表无限加载
需求:例如在商品列表页鼠标向下滑动自动监听去掉接口老数据新数据拼接展示,加载完毕结束监听。核心实现逻辑:使用elementui提供的v-infinite-scroll指令。
2023-12-25 17:51:57 432
原创 el-timeline动态一个一个展示el-timeline-item
要实现在Vue项目中使用ElementUI的el-timeline组件动态一个一个展示el-timeline-item,可以借助Vue的数据绑定和循环遍历功能来逐个添加el-timeline-item。
2023-11-01 11:32:53 1802 5
原创 Uniapp_app端使用重力感应实现横屏竖屏自动切换
打包部署测试后发现Android和ios都能正常旋转,但是后面测试发现在ios16版本以上会出现会横屏但是旋转手机竖屏回不来,只有ios16(苹果最新版)版本以上有这个问题在需要在配置中添加"flexible": true,完美解决。因为我是开发app和小程序一起的所以小程序主要的配置实在page.json里面添加这些属性,如果你开发不涉及到小程序就不用加,只需要加globalStyle中的pageOrientation属性。
2023-08-01 10:18:58 2890 2
原创 公司老项目改造适配不同分辨率2k、3k、4k
因为我这个项目中使用了好多echarts图表,全局使用zoom缩放导致echarts位置错位(比如鼠标经过饼图区域没反应或者鼠标经过饼图红色区域显示的是蓝色区域的数据等错位问题)最近公司要做项目适配2k、3k、4k屏的分辨率,在网上找了很多中方案,常用且方便的是使用zoom全局缩放,因为是老项目所以对样式进行了重写整体使用了flex+百分比布局。4、整体布局使用了flex布局或者使用百分比或者用elementui的栅格布局页面就不会乱在对整体内容的缩放效果就会很好。2、在main.js中导入使用。
2023-07-19 10:50:16 655
原创 使用uniapp开发修改样式无效修改方案
如果是picker 和 picker-view组件元素定位不到 在微信开发者工具中有些标签会转译成别的标签就要对标签的样式进行重写。在微信开发者工具如果是picker 和 picker-view组件元素定位不到,要去查看官方文档有没有配置样式的配置项。我们通常会遇到这种情况在H5和App修改了有效果在微信开发者工具却没有效果,只需要加入如下配置(与data同级)
2023-06-28 18:07:33 2165
原创 rem响应式布局-自动将px转换为rem--px2rem插件的使用
在项目中我们可能要做适配根据不同分辨率做相应的页面处理当你在项目中采用rem做响应式页面的时候,如果代码里面写的是rem单位的话,会不好判断各种距离、宽高的具体数值,下面介绍一款插件:px2rem,使用此插件可以在代码里依然写px,启动项目会自动将px单位转换为可响应的rem单位。
2023-05-06 16:39:00 1830 1
原创 配置vue.config.js处理前端跨域问题
例子 完整路径 https://www.vue-js.com/api/v1/topics。因为是修改了vue.congig.js文件,最后重新运行一下项目 重新点击跨域按钮可以访问。这个地址在浏览器是可以直接打开访问。
2023-04-07 15:07:48 285
原创 uniappp小程序做一个红包雨的功能
在绘制函数中,还需要判断用户是否点击了红包,如果点击了,则触发红包打开的动画效果,并将红包从数组中移除。最后,您还需要添加一些配置项,例如红包的数量、速度、大小等,以及红包打开的奖励内容等。最后,还需要添加一些配置项,例如红包的数量、速度、大小等,以及红包打开的奖励内容等。在每个时间间隔内,遍历红包数组,更新每个红包的位置,并绘制到画布上。首先,您需要在页面中添加一个画布元素,用于绘制红包雨效果。在绘制函数中,首先清空画布,然后绘制红包雨的背景图。接着,生成一定数量的红包,并将它们添加到一个数组中。
2023-03-22 10:58:40 1123 1
原创 Sass报错: Using / for division is deprecated
官方还很贴心做了一个一键迁移的工具,执行下面两行命令,就自动把你项目里面的东西替换了。
2023-03-13 16:44:51 447
原创 vuex状态存储的使用
3、在其他页面中通过判断状态的改变去做相关操作。2、在页面中 如果是单独获取某个状态的话。3、在页面中 如果是这个状态是变化的话。
2023-03-08 14:40:10 197
原创 JS ES6 中的extends关键字直接实现 JavaScript的继承
利用babel工具进行转换,我们会发现extends实际采用的也是寄生组合继承方式,因此也证明了这种方式是较优的解决继承的方式。
2022-08-16 16:51:44 408
原创 JS 寄生式继承
寄生式继承在原型式继承基础上进行优化,利用这个浅拷贝的能力再进行增强,添加一些方法。其优缺点也很明显,跟上面讲的原型式继承一样。
2022-08-16 16:28:57 190
原创 JS 原型式继承
这种继承方式的缺点也很明显,因为Object.create方法实现的是浅拷贝,多个实例的引用类型属性指向相同的内存,存在篡改的可能。这里主要借助Object.create方法实现普通对象的继承。
2022-08-16 16:11:38 97
原创 JS 构造函数继承
相比第一种原型链继承方式,父类的引用属性不会被共享,优化了第一种继承方式的弊端,但是只能继承父类的实例属性和方法,不能继承父类的原型属性或者方法。可以看到,父类原型对象中一旦存在父类之前自己定义的方法,那么子类将无法继承这些方法。借助 call调用Parent函数。...
2022-08-16 15:35:29 119
原创 Vue Router完整的导航解析流程
12.调用beforeRouteEnter守卫中传给next的回调函数,创建好的组件实例会作为回调函数的参数传入。4.在重用的组件里调用beforeRouteUpdate守卫(2.2+)。2.在失活的组件里调用beforeRouteLeave守卫。8.调用全局的beforeResolve守卫(2.5+)。7.在被激活的组件里调用beforeRouteEnter。3.调用全局的beforeEach守卫。1.完整的导航解析流程导航被触发。6.解析异步路由组件。...
2022-08-01 10:40:31 692
原创 vue之router钩子函数
模块一:全局导航钩子函数1、vue router.beforeEach(全局前置守卫)beforeEach的钩子函数,它是一个全局的before 钩子函数, (before each)意思是在 每次每一个路由改变的时候都得执行一遍。它的三个参数:to: (Route路由对象) 即将要进入的目标 路由对象 to对象下面的属性: path params query hash fullPath matched name meta(在matched下,但是本例可以直接用)from: (Route路由对象)
2022-03-20 17:31:43 727
原创 JS 自定义用setTimeout 实现 setInterval功能
自定义用setTimeout 实现 setInterval功能// setTimeout(function() {// console.log('定时炸弹')// },1000)// setInterval(function() {// console.log('闹钟')// },1000)// 自定义用setTimeout 实现 setInterval功能function newSetTimeout(fun,timer) { function inside()
2022-03-18 18:58:18 434
原创 vue路由传参的三种基本方式
项目中很多情况下都需要进行路由之间的传值,想过很多种方式 sessionstorage/localstorage/cookie进行离线缓存存储也可以,用vuex也可以,不过有些大材小用吧,不管怎么说因场景而异下面我来说下vue自带的路由传参的三种基本方式先有如下场景 点击当前页的某个按钮跳转到另外一个页面去,并将某个值带过去<div class="examine" @click="insurance(2)">查看详情</div>第一种方法 页面刷新数据不会丢失met.
2022-03-16 17:36:01 105
原创 JS 数组去重
var arr = [1, 2, 1, 1, 1, 2, 3, 3, 3, 2]// onefunction quchong(arr) { let newArr2 = [] for(let i = 0; i<arr.length;i++) { if(!newArr2.includes(arr[i])) { newArr2.push(arr[i]) } } return newArr2}let res_arr
2022-03-07 16:52:10 107
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人