- 博客(21)
- 收藏
- 关注
原创 vue页面缓存方案
解决方案:keepAlive+scrollTop(页面滚动条位置)+beforeRouteEnter()功能:仅需缓存页面数据、页面滑动位置。
2024-07-23 15:32:20
596
原创 VUE keep-alive动态缓存页面
4、需求描述:需要缓存列表页面,从列表页点击跳转至详情页,从详情页返回需要缓存之前的数据以及定位到查看详情的项,从其他页面进入列表页需要刷新。ps:定位元素使用 document.getElementById(`定位元素id`).scrollIntoView();3、keep-alive/index.vue(缓存页面)
2024-05-30 15:55:44
540
3
原创 React配置路由----傻瓜教程
----整体思路就是:就是在路由文件里配置路由,再将路由文件导入App.js,最后将App.js导入src下的index.js。1.创建React项目:create-react-app day01react2.安装全局和路由依赖:cnpm install -g create-react-app (仅第一次创建项目前需要)cnpm install react-router-dom@5.2.0 --save(安装6.0以下版本,因为6.0以上版本某些属性已经被迭代)3.新建两个页面4
2022-04-28 10:27:26
8111
1
原创 React配置使用Bootstrap
1.安装Bootstrap依赖npm install bootstrap@3 --save2.在入口文件里(src下的index.js)导入Bootstrap依赖和css样式表import 'bootstrap/dist/css/bootstrap.min.css';import 'bootstrap/dist/js/bootstrap';3.引入Jquery的在线依赖(public下的index.html)<script type="text/javascript"src="
2022-04-28 10:23:13
2353
原创 CSS鼠标特效【动画跟随】
JS:<script> document.addEventListener('mousemove', function(e) { let body=document.querySelector("body") let star=document.createElement("span") star.style.left=e.offsetX+"px" star.style.top=e.offsetY+"px" body.appendChild(star) setTi
2022-04-25 11:34:42
784
原创 JQuery纯手搓轮播图【支持自动轮播、划动轮播、圆点联动】
HTML:<!-- 轮播图 --> <div class="lunbo"> <!-- 轮播区域 --> <div class="lunbo_content"> <div class="imgContent"> <img draggable='false' class="imgItem activeImg Started" src="img/lunbo01.jpg"> <
2022-04-24 20:27:16
1523
2
原创 PrimeVue
1.安装依赖:cnpm install primevue@^3.0.0 --savecnpm install primeicons --savecnpm install node-sass sass-loader style-loader -S2.配置vue.config.js文件pluginOptions: { 'style-resources-loader': { preProcessor: 'scss', patterns: []...
2022-04-20 16:45:32
857
原创 Vue3使用Mock
1.安装mock和axiosnpm install --save-dev mockjsnpm install --save axios2.创建mock文件夹3.配置main.js文件import axios from 'axios'require("./mock/mockApi.js");//提前创建好的mock文件const app = createApp(App)app.config.globalProperties.$axios = axios;4.配置mock
2022-04-19 16:04:09
5587
原创 json_server
1.安装依赖:npm -g i json-server/ cnpm install -g json-server2.新增json目录 放置json文件,进入json终端3.输入命令,查看版本:json-server4.启动接口服务(data.json为自己的json文件名):json-server --watch --port 8081 data.json5.安装axios:npm i axios6.在mian.js中配置全局默认请求地址:1. 引入axios..
2022-04-18 11:07:32
931
原创 【小知识点汇总】
1.vue动态获取页面宽高windowWidth: document.documentElement.clientWidth, //实时屏幕宽度windowHeight: document.documentElement.clientHeight, //实时屏幕高度
2022-04-15 14:30:37
422
原创 【基础】创建react脚手架
React_day01(Hello world): 一、升级node 1.进入官网:https://nodejs.org/en/ 2.重新下载最新版本 3.重新安装,一直选择next,既会被覆盖 4.输入:node -v 查看最新版本 注:windows不支持命令更新,需要自己去官网下载覆盖 如看到指令更新node,nvm是mac中的node版本管理工具 二、新建项目: 1、在桌面新建目录:reactdemo...
2022-03-31 11:25:04
1434
原创 【解决问题】解决nuiapp中页面跳转及参数传递问题
首先uniapp提供了三种事件跳转方法:一、uni.navigateTo({})uni.navigateTo({ url: 'test?id=1&name=uniapp'});注意:该方法只能跳转至非tabbar页面,传递少量参数二、uni.switchTab({})uni.switchTab({ url:"/pages/car/car?name=name" })注意:该方法可以跳转至tabb...
2022-03-31 11:22:37
2054
1
原创 【解决问题】解决多人、多模块开发中全局变量冲突问题
问题概述:在企业级开发中基本都是多人多模块开发,必不可少存在全局变量冲突问题(同名),本次提出的解决方法是基于简单的闭包原理,就是使用自执行匿名函数包裹你的js逻辑,解决全局变量同名冲突问题。1、简单实例代码截图a、demo1.jsb、demo2.jsc、demo.html(一个简单的加减运算实例)...
2022-01-11 10:39:51
557
原创 【css样式】抖动效果
即插即用,代码如下:iframe:hover { animation: iframe 800ms ease-in-out; } @keyframes iframe { /* 水平抖动,核心代码 */ 10%, 90% { transform: translate3d(-1px, 0, 0); } 2...
2022-01-10 19:09:46
602
原创 关于iframe控件的使用(宽高自适应)
1、添加加载事件onload()2、编写js逻辑,利用scrollHeight和scrollWidth方法获取要加载的子页面的宽高,随后进行赋值操作,把获取的值赋给当前iframe控件。
2022-01-10 19:02:01
598
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人