网站建设问题及对策,小学网站建设方案,规模以上工业企业划分标准,建个企业网站需要多少钱目录
1、自定义加载中效果
2、HTML页面注入环境变量 / 加载CDN和本地库
3、在 Vue 中使用 wow.js
4、过渡路由
5、全局监听当前设备#xff0c;切换PC端和移动端
6、移动端常用初始化样式
7、官网默认入口文件
8、回到顶部滑动过渡效果#xff08;显示与隐藏、滑动置…目录
1、自定义加载中效果
2、HTML页面注入环境变量 / 加载CDN和本地库
3、在 Vue 中使用 wow.js
4、过渡路由
5、全局监听当前设备切换PC端和移动端
6、移动端常用初始化样式
7、官网默认入口文件
8、回到顶部滑动过渡效果显示与隐藏、滑动置顶
9、弹窗遮罩层
10、多个组件全局注册成全局组件
11、在js中图片引入方式
12、锚点跳转
13、事件防抖
14、在vue中使用swiper轮播效果
15、vue滑动事件左右滑动切换
16、页面回到指定位置动画效果回到顶部、回到指定位置
17、数字跳动到目标值
18、图片懒加载
19、阻止图片默认的点击事件事件委托
20、在小程序内跳转到外链再从外链跳回来小程序 1、自定义加载中效果
① 实操含代码
自定义加载中效果_小草莓蹦蹦跳的博客-CSDN博客
② 各种 loading 动效参考
loader
Single Element CSS Spinners 2、HTML页面注入环境变量 / 加载CDN和本地库
若是生产环境则加载的Vue和Vue-router来源于CDN加快加载的速度。因为Vue和Vue-router两个库很庞大。
若是CDN加载不了则加载本地的库
%if (htmlWebpackPlugin.options.environment production) {%script srchttps://cdn.staticfile.org/vue/2.5.20/vue.min.js/scriptscriptif (!window.Vue) {var ele document.createElement(script);ele.src % htmlWebpackPlugin.options.assetsPublicPath %/static/cdn/vue.min.js;document.body.appendChild(ele);}/scriptscript srchttps://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js/scriptscriptif (!window.VueRouter) {var ele document.createElement(script);ele.src % htmlWebpackPlugin.options.assetsPublicPath %/static/cdn/vue-router.min.js;document.body.appendChild(ele);}/script% } %
3、在 Vue 中使用 wow.js
① 安装 wow.js
npm install wowjs --save-dev
② 在Vue里面引入wow.js在src文件夹里面找到 main.js 里面加入代码
import animate.css
import {WOW} from wowjs
new WOW({boxClass: wow,animateClass: animated,offset: 0,mobile: true,live: false,// scrollContainer: #app // bug所在
}).init()
③ 在页面中使用wow.js
div data-wow-delay0.5s classwow rollIn 4、过渡路由transition/transition
切换路由页面呈现“呼吸”状态 !-- 过渡路由 --transition namebounce modeout-inrouter-view //transition
/* 页面过渡效果 */
.bounce-enter-active {animation: bounce-up 1s;
}
.bounce-leave-active {animation: bounce-down 1s;
}
keyframes bounce-up {0% {transform: translateY(30px);opacity: 0;}100% {transform: translateY(0);opacity: 1;}
}
keyframes bounce-down {0% {transform: translateY(0);}100% {transform: translateY(30px);opacity: 0;}
} 5、全局监听当前设备切换PC端和移动端
在App.vue中 mounted () {// 跳转官网/移动端this.navigate()// 屏幕的变化 获取屏幕的宽度window.onresize () {return (() {window.screenWidth document.body.clientWidththis.screenWidth window.screenWidth})()}}, // 跳转官网/移动端navigate () {console.log(跳转官网/移动端)let is_mobi navigator.userAgent.toLowerCase().match(/(ipod|ipad|iphone|ios|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince)/i) ! null// 非移动端 PC端官网if (!is_mobi) {window.location.href ; // PC端官网路径}}
监听屏幕宽度的变化使用定时器降低计算成本避免频繁触发事件 watch: {// 监听屏幕的变化screenWidth (val) {console.log(val, 监听屏幕的变化)if (!this.timer) {this.screenWidth valthis.timer truethis.navigate()setTimeout(() {this.timer false}, 400)}}} 6、移动端常用初始化样式
移动端 -- 常用初始化样式_小草莓蹦蹦跳的博客-CSDN博客 7、官网默认入口文件
index.html / index.ejs
https://blog.csdn.net/qq_38290251/article/details/95619667 8、回到顶部滑动过渡效果显示与隐藏、滑动置顶 !-- 回到顶部 --transition nameslide-upimg src../src/assets/up.png alt回到顶部 classup-img v-ifshowUp clicktoTop //transition
/* 回到顶部 */
.up-img {width: 80px;height: 80px;position: fixed;right: 20px;bottom: 120px;z-index: 10;
}/* 回到顶部按钮显示隐藏过渡效果 */
.slide-up-enter-active {transition: all 0.5s ease;
}
.slide-up-leave-active {transition: all 0.3s ease;
}
.slide-up-enter,
.slide-up-leave-to {transform: translateY(10px);opacity: 0;
}
监听屏幕滚动判断“回到顶部”按钮的显示与隐藏。 在App.vue中全局监听屏幕的滚动mounted生命周期中注册监听事件。 避免页面频繁变动时出现昂贵的计算需要加上函数防抖待页面滚动结束时才触发事件。 // 监听屏幕滚动的高度,避免窗口在变动时出现昂贵的计算开销。
window.addEventListener(scroll, debounce(this.showIcon, 100)) 当页面滚去的高度是视图高度的1.2倍的时候显示“回到顶部”按钮 // 计算视图的高度兼容其他浏览器getViewportSize () {return {height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight}},// 监听滚动showIcon () {let heightTop document.documentElement.scrollTop || document.body.scrollTopif (heightTop this.getViewportSize().height * 1.2) {this.showUp true} else {this.showUp false}},
点击“回到顶部”缓慢滑动到顶部。
引入插件 Smooth Scroll behavior polyfill // 回到顶部toTop () {window.scroll({ top: 0, left: 0, behavior: smooth })},
在组件销毁的时候移除事件监听 beforeDestroy () {// 离开当前组件别忘记移除事件监听哦window.removeEventListener(scroll, this.showIcon)} 9、弹窗遮罩层
固定在一页且阻止滚动
弹窗遮罩层_弹窗遮罩是什么_小草莓蹦蹦跳的博客-CSDN博客 10、多个组件全局注册成全局组件
多个组件全局注册 - 全局组件_小草莓蹦蹦跳的博客-CSDN博客 11、在js中图片引入方式 imgAcitve: require(../assets/about/style_02_active.png) 12、锚点跳转
给锚点位置添加id或者ref , 使用 ele.scrollIntoView({ true }) 这个方法定位到锚点。
加入插件 Smooth Scroll behavior polyfill 使其具备动画效果。
若是锚点由路由传入的参数决定则要监听路由参数。 mounted () {// 跳转到相应的位置let ref this.$route.query.refif (ref) {if (ref factory) {window.scroll(0, 0)} else {this.$refs[${ref}].scrollIntoView(true);}}} watch: {// 跳转到相应的位置$route (newV, oldV) {console.log(监听路由, newV.query.ref)let ref newV.query.refif (ref) {if (ref factory) {window.scroll(0, 0)} else {this.$refs[${ref}].scrollIntoView({ behavior: smooth });}}}} 13、事件防抖
Lodash 简介 | Lodash中文文档 | Lodash中文网
Lodash 简介 | Lodash中文文档 | Lodash中文网 14、在vue中使用swiper轮播效果
GitHub - surmon-china/vue-awesome-swiper: Swiper component for vuejs
https://surmon-china.github.io/vue-awesome-swiper/ 15、vue滑动事件左右滑动切换
GitHub - vuejs/vue-touch: Hammer.js wrapper for Vue.js 16、页面回到指定位置动画效果回到顶部、回到指定位置
Smooth Scroll behavior polyfill 17、数字跳动到目标值
GitHub - PanJiaChen/vue-countTo: Its a vue component that will count to a target number at a specified duration https://panjiachen.github.io/countTo/demo/
GitHub - inorganik/countUp.js: Animates a numerical value by counting to it 18、图片懒加载
vue-lazyload - npm 19、阻止图片默认的点击事件事件委托 document.getElementsByTagName(body)[0].addEventListener(click, e {if (e.target.nodeName IMG) {e.preventDefault()return false}}) 20、在小程序内跳转到外链再从外链跳回来小程序 wx.miniProgram.redirectTo({url:/pages/user/user})
