Vue防止白屏添加首屏动画的实例
单页应用有个无法避免的问题就是首屏加载慢，虽然可以通过gzip、路由懒加载、CDN、提高服务器带宽等手段，首屏加载速度仍然比传统多页应用慢一些。为了提高用户体验，首屏添加loa...
2020-05-27
使用vue-router切换页面时实现设置过渡动画
背景今天在编写页面时,看到页面没有任何效果就只是直入直出,完全没有一点逼格,所以想要实现类似于原生app的那种切换页面时的特效,遂开始google,发现网上各种方案都是各有优...
2020-05-27
vue-router之实现导航切换过渡动画效果
过渡动效提供了transition的封装组件，添加过渡动画，通过添加或删除css类名来实现。过渡的css类名：v-enter 进入过渡的开始状态v-enter-active 进入活动状态v-enter-to ...
2020-05-27
vue路由切换之淡入淡出的简单实现
路由跳转的淡入淡出在开发中有一种需求叫高端、大气、上档次。所以作为一个前端有责任让你的程序开起来更酷炫。可以在页面切换时我们加入一些动画效果，提升我们程序的动效设...
2020-05-27
Vue 使用beforeEach实现登录状态检查功能
使用VueRouter的beforeEach钩子函数，可以实现导航跳转前检查登录状态的需求。1.在登录请求接口时返回用户的信息，比如 userInfo:{userId:'123', userName:'小明'}，登录成功之后...
2020-05-27
一起写一个即插即用的Vue Loading插件实现
无论最终要实现怎样的网站，Loading状态都是必不可少的一环，给用户一个过渡喘息的机会也给服务器一个递达响应的时间。从使用方式说起不管从0开始写起还是直接下载的Loading插...
2020-05-27
js new Date()实例测试
js new Date() 测试var t = new Date().toString(); //t = "Thu Oct 31 2019 11:36:57 GMT+0800 (中国标准时间)" var t1 = new Date(); var data_arry =[]; var that = new...
2020-05-27
VUE单页面切换动画代码(全网最好的切换效果)
我就废话不多说了，直接上代码吧！// 视图切换动画逻辑let history = window.sessionStoragelet historyCount = history.getItem('count') * 1 || 0function routerTransition...
2020-05-27
解决vue的过渡动画无法正常实现问题
前记：最近在写vue的一个项目要实现过渡的效果，虽然vue动画不是强项，库也多,但是基本的坑还是得踩扎实;建议：先学习vue官方文档的进入/离开 & 列表过渡章节，那么我们来看bug;首先...
2020-05-27
vue中使用vee-validator完成表单校验方案
前言由于大部分移动端的组件库都不提供表单校验，因此需要自己封装。目前，使用较多的是async-validator和vee-validator。其中，elementUI组件库提供的表单验证也是基于async-val...
2020-05-27
浅谈Three.js截图并下载的大坑
最近做有关three.js的动画，想通过截图然后在新的页面打开截图，并且想把图片下载到本地，连环坑很ok:ok_hand:嗯。这个必须要记下来！先来看看普通页面的截图
一开始看到这个，完全没...
2020-05-27
async/await让异步操作同步执行的方法详解
一.前言
我们经常会遇到这样的麻烦事,多个函数按顺序执行,返回结果却不是我们预期的顺序,原因一般是由于异步操作引起的,所以呢,我们需要一种解决方案来处理这种问题,从而使...
2020-05-27
javascript使用链接跨域下载图片
前言图片是最常见的静态资源文件，可以从本地、外链获取图片，或者使用base64码展示。而canvas的toDataUrl() API可以将图片转base64码，然后模拟点击事件即可下载图片。外链下载...
2020-05-27
浅析js实现网页截图的两种方式
Web端的截图(生成图片)并不算是个高频的需求，资料自然也不算多，查来查去，也不过Canvas 和 SVG两种实现方案，原理大概相似，都非真正义上的截图而是把DOM转为图片，然而实现方式却截...
2020-05-27
浅谈vue-router路由切换 组件重用挖下的坑
问题描述：vue-router导航切换 时，如果两个路由都渲染同个组件，组件会重（chong）用,组件的生命周期钩子不会再被调用,使得组件的一些数据无法根据 path的改变得到更新翻车现场再现：...
2020-05-27
Vue-cli项目部署到Nginx服务器的方法
0. Nginx使用以windows版为例，下载niginx压缩包并解压到任意目录，双击nginx.exe，在浏览器中访问http://localhost，如果出现Welcome to nginx!页面则说明成功。nginx常用命令如下...
2020-05-27
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案，cover-view不兼容,具体内容如下所示：1.从微信小程序的官网扣下来的demo，实际测试中，发现6s ios10 系统不兼容，里面的内...
2020-05-27
vue导航栏部分的动态渲染实例
根据公司项目的需求，使用的是element-ui的nav-menu组件实现动态渲染左侧导航条的功能，这里我只写到了四级菜单。代码部分：<el-menu class='el-menu-vertical-demo' :router='tr...
2020-05-27
Vue中jsx不完全应用指南小结
前言：文章不介绍任务背景知识，没有原理说明，偏向于实践的总结和经验分享。
文章所有的代码是基于Vue CLI 3.x版本，不会涉及到一步步通过Webpack来配置JSX所需要的知识点。在使用...
2020-05-27
vue设置导航栏、侧边栏为公共页面的例子
首先，项目结构如下：想要让导航栏、侧边栏变为公共页面，则要在App.vue页面中加入。假设已经有了Header.vue和Left.vue，这里就不贴出来了，App.vue代码如下：<template> <div id="app"...
2020-05-27
详解Vue后台管理系统开发日常总结(组件PageHeader)
在后台管理系统的日常开发过程中发现对于同一个业务下面的版块不同的开发同事每次都会重复写页面标题的样式，而且不同的页面标题还不太一样。虽然有的页面标题栏承载的元素不...
2020-05-27
Vue实现导航栏的显示开关控制
一，制作导航栏<template> <div class="space_header_text"> <ul> <router-link to="/order"> <li class="nav-item"> <div :class="['iconfont','interval','iconClass']&qu...
2020-05-27
vue自定义switch开关组件,实现样式可自行更改
用法：import switchc from './public/switch'<switchc v-model="value1" text="on|off"></switchc>属性text 非必填，类型为string，要求格式为“on|off” ,以 | 分隔事件changeh...
2020-05-27
vue中beforeRouteLeave实现页面回退不刷新的示例代码
路由切换返回前一个路由时实现页面不刷新功能，首先想到的是keep-alive，但是页面不属于父子级关系，所以决定用beforeRouteLeave，下面贴代码beforeRouteLeave(to, from, next){ i...
2020-05-27
vue 中固定导航栏的实例代码
点击按钮回顶<template lang="html"> <div class="gotop-box"> <i @click="gotop"class="icon topIcon"></i> </div></template><script>export default {methods: { gotop:...
2020-05-27
jQuery高级编程之js对象、json与ajax用法实例分析
本文实例讲述了jQuery高级编程之js对象、json与ajax用法。分享给大家供大家参考，具体如下：js对象创建js对象的两种方式：1.通过new Object创建：var p1 = new Object();// 设置属...
2020-05-27
JS实现动态星空背景效果
本文实例为大家分享了JS实现动态星空背景的具体代码，供大家参考，具体内容如下 这里我截取的是一个图片，实际上是会动的。废话不多说，上代码。
HTML：<canvas id="canvas"></canvas...
2020-05-27
vue实现跳转接口push 转场动画示例
1.index.js 配置子路由children。import Vue from 'vue'import Router from 'vue-router'import SingerDetail from 'components/singer-detail/singer-detail'Vue.use(Rout...
2020-05-27
Vue实现push数组并删除的例子
最近在用Vue做评论互动的时候用到了push，因为项目是迭代开发，所以现在做一个简易的demo回顾下<template> <div> <ul v-for="(item , index) in list" :key="index"> <li>...
2020-05-27
js实现漂亮的星空背景
本文实例为大家分享了js实现漂亮星空背景的具体代码，供大家参考，具体内容如下html代码：<div class="stars"></div>css代码 html, body { height: 100%; overflow: hidden; } bo...
2020-05-27
vue.js路由mode配置之去掉url上默认的#方法
比如 ： http://localhost:8080/#/login 路由中间默认带有 #如果需要去掉#，只需将mode的默认值'hash'改为'history'即可。router.js :import Router from 'vue-router'import r...
2020-05-27
vue实现配置全局访问路径头(axios)
在vue中用axios发送请求的时候总是：axios.get(“http://localhost:3000/xxx/xxx”,{params:{xx:xxx}}).then(res=>{}).catch(error=>{})配置全局的url:1.安装axios:npm insta...
2020-05-27
小程序怎样让wx.navigateBack更好用的方法实现
相信只要开发过小程序，对wx.navigateBack 这个 api都不会陌生。在摩拜单车的小程序中，它也被改造的更方便满足复杂的业务需求，可谓之 增强型的 wx.navigateBack。先来看看官方...
2020-05-27
浅谈小程序globalData的那些事儿
我在严冬下掘起结冰的泥土，我在黑暗的战壕里跃动，我用生命守护房屋的石板，我在散发着焦土味的废墟下长眠。小程序中，除了每个页面有自己的 data，还有个全局数据存储地方：globalDat...
2020-05-27
js实现旋转的星空效果
本文实例为大家分享了js实现旋转的星空效果的具体代码，供大家参考，具体内容如下<!DOCTYPE HTML><html lang="en"> <head> <meta charset="utf8"> <meta name="viewport" conte...
2020-05-27
在vue中利用全局路由钩子给url统一添加公共参数的例子
有的时候我们可能有这样的需求,比如现在url为m.taoyuewenhua.com/#/ 我们需要在用户每次跳转路由的时候监控有没有abc这个参数. 如果有,后端要求我们在以后跳转任何url的时...
2020-05-27
vue设置动态请求地址的例子
需求：在开发和生产环境下，请求不同的地址（http or ws），使其置入线上环境，无论是什么域名都不用手动更改请求地址思路：使前端请求接口地址简单化上代码：在vuex中设置总的接口地址，然后...
2020-05-27
JS中自定义事件的使用与触发操作实例分析
本文实例讲述了JS中自定义事件的使用与触发操作。分享给大家供大家参考，具体如下：1. 事件的创建JS中，最简单的创建事件方法，是使用Event构造器：var myEvent = new Event('event_n...
2020-05-27
js+canvas实现两张图片合并成一张图片的方法
本文实例讲述了js+canvas实现两张图片合并成一张图片的方法。分享给大家供大家参考，具体如下：JS和canvas的合成方式function drawAndShareImage(){ var canvas = document.cr...
2020-05-27
VUE 解决mode为history页面为空白的问题
当router.js 中mode:history 发现刷新页面 不显示了，原因出来history的请求路径资源不存在了，这个需要后端配置的，前端 需要修改一个地方即可, devServer: { port: 8000...
2020-05-27
vue-router 中 meta的用法详解
如果我想做下面这个功能：路由代码：用这个获取以上这篇vue-router 中 meta的用法详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。...
2020-05-27
微信小程序定义和调用全局变量globalData的实现
先看看文件结构：
1.现在app.js里面定义globalData对应的全局变量
2.然后在其他js文件进行调用。例如在photo.js里面
要注意的是需要在文件开始的时候初始化 app这个...
2020-05-27
jQuery鼠标滑过横向时间轴样式(代码详解)
每日分享效果，今天分享内容为：jQuery鼠标滑过横向时间轴样式效果图： HTML代码：`<!DOCTYPE html><html><head><title></title><link rel="stylesheet" type="text/css" href="css...
2020-05-27
js canvas实现星空连线背景特效
本文实例为大家分享了js canvas星空连线背景的具体代码，供大家参考，具体内容如下<html> <head> <meta charset="UTF-8"> <title>canvas星空连线背景特效</title> <style type=...
2020-05-27
详解小程序如何改变onLoad的执行时机
也许在小程序所有生命周期里，我们用的最多的就是 onLoad，一大堆代码都要在初始化的时候执行。很多时候，初始化的代码是每个页面共用的，比如获取用户信息、获取定位等：Page({ onLo...
2020-05-27
vue实现计步器功能
本文实例为大家分享了vue实现计步器功的具体代码，供大家参考，具体内容如下1.首先先创建一个Stepper.vue<template> <div class="counter-component"> <div class="counter-btn...
2020-05-27
使用 Angular RouteReuseStrategy 缓存（路由）组件的实例代码
使用 Angular RouteReuseStrategy 缓存组件Cache components with Angular RouteReuseStrategyRouteReuseStrategy provider 允许我们控制 Angular 路由和组件生命周期的行...
2020-05-27
微信js-sdk 录音功能的示例代码
需求描述
制作一个H5页面，打开之后可以录音，并将录音文件提交至后台
微信录音最长时长为1min微信官方文档--音频接口
代码如下 // isVoice： 0-未录音 1-录音中 2-录完音...
2020-05-27
解决vue-router 二级导航默认选中某一选项的问题
现在有一个需求是这样的：这个需求很正常吧！ 二级导航条，不是二级路由的（如果是二级路由是用linkActiveClass来做，我之前文章说过），是单纯获取数据的按钮，当这个页面出现时，默认选中第...
2020-05-27
vue 导航内容设置选中状态样式的例子
如图所示，我们一般需要切换的时候选中导航给个active样式，而router-link 标签 在选中的时候 会自动给整个标签添加一个 router-link-active的class可给router-link 标签里面...
2020-05-27
