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'. 如 ...
随机推荐
- ARP:地址解析协议
我们假设这样一个场景:你需要和你网络中的一个设备进行通信,这个设备可能是某种服务器.你用来创建这个通信的应用已经得到了这个远程主机的ip地址,也意味着系统已经有了用来构建它想要在第三层到第7层传递数据 ...
- BootStrap Table超好用的表格组件基础入门
右侧导航条有目录哟,看着更方便 快速入门 表格构建 API简单介绍 主要研究功能介绍 快速入门 最好的资源官方文档 官方文档地址****https://bootstrap-table.com/docs ...
- servlet通过响应头Content-Disposition实现文件下载效果
package day08; import java.io.File; import java.io.FileInputStream; import java.io.IOException; impo ...
- CNN的Pytorch实现(LeNet)
CNN的Pytorch实现(LeNet) 上次写了一篇CNN的详解,可是累坏了老僧我.写完后拿给朋友看,朋友说你这Pytorch的实现方式对于新人来讲会很不友好,然后反问我说里面所有的细节你都明白 ...
- 初步测试VS2017+Win10IoT,基于World Map of Makers
测试World Map of Makers Demo,创建一个简单的internet连接应用程序来查询web API的状态(目测是一个延时时间),并使用该信息切换LED. 官方仓库的Solution是 ...
- BUUCTF-[CISCN2019 华北赛区 Day1 Web5]CyberPunk
BUUCTF-[CISCN2019 华北赛区 Day1 Web5]CyberPunk 看题 看源码有提示?file=? 文件包含漏洞,可以利用这个漏洞读取源码. 分析 index.php?file=p ...
- 整型:int
整型:int 整型变量的定义和输出 注意://short<=int<=long<=longlong 代码示例一: #include<stdio.h> int ma ...
- vue2.0与3.0中的provide和inject 用法
1.provide/inject有什么用? 常用的父子组件通信方式都是父组件绑定要传递给子组件的数据,子组件通过props属性接收,一旦组件层级变多时,采用这种方式一级一级传递值非常麻烦,而且代码可读 ...
- 剑指 Offer 14- II. 剪绳子 II
剑指 Offer 14- II. 剪绳子 II 给你一根长度为 n 的绳子,请把绳子剪成整数长度的 m 段(m.n都是整数,n>1并且m>1),每段绳子的长度记为 k[0],k[1]... ...
- Linux下查看哪个网口插了网线
场景: 一台服务器有多个网卡,一个网卡有多个网口,当插了一根网线的时候,不知道网线是插在哪一个网口. 1.查看网口信息 2.查看网口是否插了网线(命令ethtool) 命令:ethtool + 网口名 ...