vue 移动端项目切换页面,页面置顶
之前项目是pc端是使用router的方式实现置顶的
//main.js
router.afterEach((to, from, next) => {
window.scrollTo(0, 0)
})
但是改了移动端就没有效果了,稍微查了一下,好像说是要body里才有用。
可能与我使用了vux-ui有关
在深究router方式还是找新方法的选择上,我选了后者,
//自定义的common.js
// 这个方法通过递归找到滚动的元素,用于置顶页面
function getScrollParent (node) {
if (node == null) {
return null
}
if (node.scrollHeight > node.clientHeight) {
return node
} else {
return getScrollParent(node.parentNode)
}
}
export {getScrollParent}
// 页面文件,例如hello.vue
// 引入
import {isEmptyObj, getScrollParent} from '@/common/utils/common' //在mounted钩子函数调用
mounted () {
const element = getScrollParent(this.$el)
element.scrollTop = 0
this.initCanvas()
},
用以上方法,解决问题
vue 移动端项目切换页面,页面置顶的更多相关文章
- 从零开始搭建vue移动端项目到上线的步骤
初始化项目 1.在安装了node.js的前提下,使用以下命令 npm install --g vue-cli 2.在将要构建项目的目录下 vue init webpack myproject(项目目录 ...
- 从零开始搭建vue移动端项目到上线
先来看一波效果图 初始化项目 1.在安装了node.js的前提下,使用以下命令 npm install --g vue-cli 2.在将要构建项目的目录下 vue init webpack mypro ...
- Vue移动端项目总结
使用Vue项目写了一个移动端项目,然后又把项目硬生生的抽离了组件,一直忙着写RN项目没有时间总结心得,今天上午终于下定决心,写点总结. 1.position:absolute: 定位的时候不同手机的浏 ...
- Javascript笔记----实现Page页面右下角置顶按钮.
从用博客开始,发现博客园中很多博友的博客中在Page右下角都有个图标,不论屏幕怎么拉伸,都始终停留在右下角.点击后页面置顶.后面想想写一个Demo来实现这种效果吧. 一. 图标右下角固定. 1.SS ...
- Vue移动端项目模板
一个集成移动端开发插件的Vue移动端模板包含1.css: 使用stylus开发css 集成reset样式文件 修改UI组件文件 统一样式处理(如主题色等)2.UI组件 使用热门的vant与mint-u ...
- Vue中解决路由切换,页面不更新的实用方法
前言:vue-router的切换不同于传统的页面的切换.路由之间的切换,其实就是组件之间的切换,不是真正的页面切换.这也会导致一个问题,就是引用相同组件的时候,会导致该组件无法更新,也就是我们口中的页 ...
- Vue nodejs商城项目-商品列表页面组件
data(){ return { goodsList:[], // 商品列表 priceFilter:[ // 价格区间数组 ...
- vue 移动端项目总结(mint-ui)
跨域解决方案 config/dev.env.js 'use strict' const merge = require('webpack-merge') const prodEnv = require ...
- vue PC端项目中解决userinfo问题
在vue2 中用脚手架建立的项目,后端提供接口获取数据.在公司做第一个项目的时候不清楚公司里的对接流程,结果后续代码被一个接口整的乱七八糟,这个接口是获取用户信息的接口——'usre/info'. 如 ...
随机推荐
- 线程间协作的两种方式:wait、notify、notifyAll和Condition
转载自海子: 在前面我们将了很多关于同步的问题,然而在现实中,需要线程之间的协作.比如说最经典的生产者-消费者模型:当队列满时,生产者需要等待队列有空间才能继续往里面放入商品,而在等待的期间内,生产者 ...
- 从eclipse转idea不适记录【持续更新】
使用eclipse和idea时,快捷键对比 从一些最扎心的开始: 关于print一类的打印输出:System.out.println()补全 idea中可以sout.souf.serr:分别对应out ...
- opencv入门系列教学(二)图像入门:读取、展示并保存视频
一.从相机读取视频 通常情况下,我们必须用摄像机捕捉实时画面.让我们从摄像头捕捉一段视频(我使用的是我笔记本电脑内置的网络摄像头) ,将其转换成灰度视频并显示出来. 要捕获视频,我们需要 ...
- centos6.10下安装mysql8.0.16root密码修改的坑
上图截取别人的自己懒得弄,检查自己的linux是否有安装就按上图做就行了 接下来是我的干货 mysql8.0安群策略对密码设置很严格规则:大小写加数字和特殊字符串 使用yum安装mysql 后 my. ...
- TypeScript 中枚举类型的理解?应用场景?
一.是什么 枚举是一个被命名的整型常数的集合,用于声明一组命名的常数,当一个变量有几种可能的取值时,可以将它定义为枚举类型 通俗来说,枚举就是一个对象的所有可能取值的集合 在日常生活中也很常见,例如表 ...
- centos7 修改时间
2021-07-28 查看日志时发现系统时间不正确,故修改时间 # 查看当前系统时间 date # 修改当前系统时间 date -s "2021-7-28 17:03:00" # ...
- 图解最长回文子串「Manacher 算法」,基础思路感性上的解析
问题描述: 给你一个字符串 s,找到 s 中最长的回文子串. 链接:https://leetcode-cn.com/problems/longest-palindromic-substring 「Ma ...
- Linux下SSH以及SSH秘钥
一.基于秘钥方式实现远程连接 第一步:创建密钥对(在管理端服务器上操作) 中间的输入项可以直接回车 ssh-keygen -t dsa 第二步:分发公钥(在管理端服务器执行) 这个步骤需要输入一个ye ...
- TCP超时重传、序列号、滑动窗口简介
文章目录 12 TCP:传输控制协议(初步) 12.1 引言 12.1.1 ARQ和重传 12.1.2 分组窗口和滑动窗口 12.1.3 变量窗口:流量控制和拥塞控制 12.1.4 变量窗口:设置重传 ...
- Lua io.lines()
前言# 从文章的题目可以看出,今天的内容是和文件的行相关的,其实这个函可以看成是一个文件读取函数,只不过文件读取的形式固定了,就是只能一行一行的读,接下来我们就一起来看看这个函数究竟要怎么使用. 内容 ...