之前项目是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 移动端项目切换页面,页面置顶的更多相关文章

  1. 从零开始搭建vue移动端项目到上线的步骤

    初始化项目 1.在安装了node.js的前提下,使用以下命令 npm install --g vue-cli 2.在将要构建项目的目录下 vue init webpack myproject(项目目录 ...

  2. 从零开始搭建vue移动端项目到上线

    先来看一波效果图 初始化项目 1.在安装了node.js的前提下,使用以下命令 npm install --g vue-cli 2.在将要构建项目的目录下 vue init webpack mypro ...

  3. Vue移动端项目总结

    使用Vue项目写了一个移动端项目,然后又把项目硬生生的抽离了组件,一直忙着写RN项目没有时间总结心得,今天上午终于下定决心,写点总结. 1.position:absolute: 定位的时候不同手机的浏 ...

  4. Javascript笔记----实现Page页面右下角置顶按钮.

    从用博客开始,发现博客园中很多博友的博客中在Page右下角都有个图标,不论屏幕怎么拉伸,都始终停留在右下角.点击后页面置顶.后面想想写一个Demo来实现这种效果吧. 一. 图标右下角固定. 1.SS ...

  5. Vue移动端项目模板

    一个集成移动端开发插件的Vue移动端模板包含1.css: 使用stylus开发css 集成reset样式文件 修改UI组件文件 统一样式处理(如主题色等)2.UI组件 使用热门的vant与mint-u ...

  6. Vue中解决路由切换,页面不更新的实用方法

    前言:vue-router的切换不同于传统的页面的切换.路由之间的切换,其实就是组件之间的切换,不是真正的页面切换.这也会导致一个问题,就是引用相同组件的时候,会导致该组件无法更新,也就是我们口中的页 ...

  7. Vue nodejs商城项目-商品列表页面组件

    data(){        return {            goodsList:[], // 商品列表            priceFilter:[ // 价格区间数组          ...

  8. vue 移动端项目总结(mint-ui)

    跨域解决方案 config/dev.env.js 'use strict' const merge = require('webpack-merge') const prodEnv = require ...

  9. vue PC端项目中解决userinfo问题

    在vue2 中用脚手架建立的项目,后端提供接口获取数据.在公司做第一个项目的时候不清楚公司里的对接流程,结果后续代码被一个接口整的乱七八糟,这个接口是获取用户信息的接口——'usre/info'. 如 ...

随机推荐

  1. SpringBoot2.0整合Quartz定时任务(持久化到数据库,更为简单的方式)

    1. pom文件添加依赖 <dependencies> <dependency> <groupId>org.springframework.boot</gro ...

  2. 【转】新说Mysql事务隔离级别

    作者:孤独烟 转自:https://www.cnblogs.com/rjzheng/p/9955395.html 引言 大家在面试中一定碰到过 说说事务的隔离级别吧? 老实说,事务隔离级别这个问题,无 ...

  3. JS对象创建的几种方法

    最近一直在看JS高级程序设计这本书,有空来梳理一下几种创建对象的方式.话不多说,直接步入正题. 第一种:Object构造函数创建 var Person = new Object(); Person.n ...

  4. 学ant(2)——path

    1.path是ant内置的一种datatype,作用是声明路径之类的东西,在官方的manual中也叫做Path-like Structures,一般是这样声明的 <pathelement loc ...

  5. Android开发,缺少权限导致无法修改原文件,获取所有文件访问权限的方法

    在Android 11开发中,app会遇到使用绝对路径无法打开某文件的情况(文件存在根目录下,获取到的路径为:/storage/emulated/0/XXX.txt),而使用相对路径打开文件后(获取到 ...

  6. ASP截取字符 截取字符之间的字符

    ASP截取字符:MID函数Mid(变量或字串符,开始字节, 结尾字节(可不填)) InStrRev(变量, "字串符")  最后出现位置InStr(变量, "字串符&qu ...

  7. centos7 权限更改,所属用户及用户组更改

    2021-08-03 # 查看文件的权限 ll 第一个字符, "-" 表示是文件, "d" 表示是目录(directory) 后面 9 个字符每 3 个字符又作 ...

  8. 假期作业02:安装JDK与文本编辑器并编写第一个Java程序

    假期作业02:安装JDK与文本编辑器并编写第一个Java程序 一.安装JDK与文本编辑器并编写第一个java程序 首先在oracle官网(需要创建账号,进行登录后方可使用)按照自己的需求下载JDK(h ...

  9. Python - 通过PyYaml库操作YAML文件

    PyYaml简单介绍 Python的PyYAML模块是Python的YAML解析器和生成器 它有个版本分水岭,就是5.1 读取YAML5.1之前的读取方法 def read_yaml(self, pa ...

  10. Linux常用命令 - less命令详解

    21篇测试必备的Linux常用命令,每天敲一篇,每次敲三遍,每月一循环,全都可记住!! https://www.cnblogs.com/poloyy/category/1672457.html 查看文 ...