开发移动端官网总结_Vue2.x

news/2025/2/13 6:40:55/

目录

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 src="https://cdn.staticfile.org/vue/2.5.20/vue.min.js"></script><script>if (!window.Vue) {var ele = document.createElement("script");ele.src = "<%= htmlWebpackPlugin.options.assetsPublicPath %>/static/cdn/vue.min.js";document.body.appendChild(ele);}</script><script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script><script>if (!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-delay="0.5s" class="wow rollIn">

4、过渡路由<transition></transition>

切换路由，页面呈现“呼吸”状态

    <!-- 过渡路由 --><transition name="bounce" mode="out-in"><router-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 name="slide-up"><img src="../src/assets/up.png" alt="回到顶部" class="up-img" v-if="showUp" @click="toTop" /></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: It's 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'})


http://www.ppmy.cn/news/150117.html

相关文章

华为OD机试真题 Java 实现【获得完美走位】【2023Q1 100分】

华为OD机试真题 Java 实现【获得完美走位】【2023Q1 100分】

一、题目描述 在第一人称射击游戏中&#xff0c;玩家通过键盘的 A、S、D、W 四个按键控制游戏人物分别向左、向后、向右、向前进行移动&#xff0c;从而完成走位假设玩家每按动一次键盘&#xff0c;游戏任务会向某个方向移动一步&#xff0c;如果玩家在操作一定次数的键盘并且…
阅读更多...
追寻幸福：探索幸福的关键特征和行为

追寻幸福：探索幸福的关键特征和行为

目录 1. 积极的心态 2. 良好的人际关系 3. 自我接纳和自尊 4. 追求意义和目标 5. 健康的身心状态 6. 感知和实现个人价值 幸福是一个主观的感受&#xff0c;因此不同的人对于幸福的定义和追求方式可能会有所不同。然而&#xff0c;有一些共同的特点和行为模式&#xff0c…
阅读更多...
MyBatis - 高级查询

MyBatis - 高级查询

文章目录 1.一对一映射2.一对多映射3.多对多映射4.自定义类型映射4.1 枚举类型案例4.2 货币类型案例 5.分页插件 当使用 MyBatis 进行对象关系映射&#xff08;ORM&#xff09;时&#xff0c;我们经常需要处理一对一映射、一对多映射和多对多映射的关系。同时还可能遇到需要进行…
阅读更多...
当贝Z1 PRO使用心得

当贝Z1 PRO使用心得

大屏会议需要&#xff0c;采购了1个当贝Z1 PRO电视盒子&#xff0c;据说是目前性能最强的&#xff0c;也是极少数带摄像头的电视盒子。 得益于强大的处理器&#xff0c;整体比较流畅&#xff0c;但系统太拉跨&#xff0c; 64位处理器&#xff0c;跑着32位的老系统&#xff0c;…
阅读更多...
zuk android os 流量,原生用户最爱 Cyanogen OS版ZUK Z1固件

zuk android os 流量,原生用户最爱 Cyanogen OS版ZUK Z1固件

11月16日消息&#xff0c;Cyanogen通过官方网站发布了ZUK Z1的Cyanogen OS 12.1固件&#xff0c;喜欢原生安卓风格的ZUK Z1用户可以通过刷新固件的方式&#xff0c;将ZUI变更为Cyanogen OS 12.1系统。 ZUK Z1是国产新晋品牌ZUK于今年8月推出的首款智能手机产品&#xff0c;在国…
阅读更多...
sony z1 android 6.0,索尼最强旗舰Xperia Z1升级版初体验

sony z1 android 6.0,索尼最强旗舰Xperia Z1升级版初体验

索尼最强旗舰Xperia Z1升级版初体验 出处&#xff1a;快科技 2014-01-03 16:16:21 作者&#xff1a;雪花 编辑&#xff1a;雪花[爆料] 收藏文章 目前索尼智能手机阵营中最强的当属Xperia Z1&#xff0c;而前不久他们携手中国移动推出了这款手机的小幅升级版&#xff0c;其最…
阅读更多...
iqooz1手机能搭载鸿蒙吗,iQOOZ1有NFC功能吗?iQOO Z1支持NFC刷公交卡与门禁卡吗

iqooz1手机能搭载鸿蒙吗,iQOOZ1有NFC功能吗?iQOO Z1支持NFC刷公交卡与门禁卡吗

iQOOZ1有NFC功能吗?随着NFC实现了对于公交卡、门禁卡、银行卡等功能的支持&#xff0c;它已经成为了手机中必不可少的功能之一。作为iQOO Z系列的第一款产品&#xff0c;iQOO Z1在硬件创新、交互变革方面有着很大的突破。如此优秀的一款iQOO Z1&#xff0c;它有没有全功能NFC功…
阅读更多...
HBuilderX踩坑记录 —— vivo iqoo z1或者iqooz1x开启adb调试

HBuilderX踩坑记录 —— vivo iqoo z1或者iqooz1x开启adb调试

在打包运行APP的基座的时候&#xff0c;HBuilder X连接手机显示 未检测到手机或模拟器 按住shift右键&#xff0c;运行出此弹窗 输入.\adb devices&#xff0c; .\adb deviceslist of devices attached下无设备&#xff0c;表示未找到手机。 在手机拨号界面输入*#558#&#xff…
阅读更多...
最新文章

Copyright @ 2022~2023