vue移动端项目 , 解决页面打开不是显示顶部 , 而是显示页面的中部或底部

最新推荐文章于 2024-07-21 14:33:09 发布
最新推荐文章于 2024-07-21 14:33:09 发布
阅读量1.3k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_49577940/article/details/119325460
本文介绍了一种常见的移动端页面加载时出现的位置偏移问题及其解决方案。通过在页面的.vue文件中加入特定代码，可以确保页面加载时总是从顶部开始显示，从而改善用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

   之前碰到一个奇怪的bug , 就是移动端项目再手机上打开时, 不是显示的页面的顶部 ,而是中部或底部 , 还得手指往上滑才能滑到顶部 , 用户体验很不好 , 于是上网各种查 , 终于解决了这个bug ,就是在页面的.vue文件中加上这行代码 , 就可以了 

   mounted() {
      window.scrollTo(0, 0)
    },

Vue全家桶
QQ418579986的博客
08-02 288
实战总结
新鲜出炉的 Vue3 实现移动端 Table 表格，支持固定头部、固定列、上拉加载等~
JackChan
04-30 1330
新鲜出炉的 Vue3 实现移动端 Table 表格，支持固定头部、固定列、上拉加载等~
解决Vue页面跳转后，位置不在顶部
just
04-10 5833
背景 Vue页面路由跳转后，页面的位置是和上个页面位置一致的，没有自动定位到顶部。 解决 我是使用Vue CLI3，所以在main.js中定义scrollBehavior即可解决： const router = new VueRouter({ // history模式，去除URL中# mode: 'history', routes, // 解决路由跳转后，不显示在首...
vue跳转页面之后跳转的页面不置顶
zhanglongle_的博客
03-18 798
vue跳转页面之后跳转的页面不置顶的问题，解决办法在路由文件中添加下面代码。注意事项：如果路由模式是哈希模式，需要把x和y改成left和top，如果是history模式就不用动还是x和y。
Vue路由跳转新页面，新页面不在顶端问题
weixin_43732080的博客
05-26 682
设置"滚动条高度"解决 滚动条高度设置方法：window.scrollTo(p1, p2) window.scrollTo(param1, param2) param1: x轴坐标，距离屏幕左上角x轴距离 param2: y轴坐标，距离屏幕左上角y轴距离 结合此方法，实现Vue跳转新页面，新页面置顶 新页面mounted()中： （mounted()是Vue生命周期函数，在页面渲染前执行） mounted() { this._loadNewPage(); }, 新页面methods.
vue3实现在浏览器之外打开新窗口，新窗口只有原来的一半并且居中显示
青莳的博客
01-24 1375
vue3实现在浏览器之外打开新窗口，新窗口只有原来的一半并且居中显示
实战Vue：基于Vue的移动端购物商城
2401_85124130的博客
06-25 875
首先在mutations.js中定义将商品移出购物车的方法——即商品数量为1仍然减得操作在Cart.vue中配置删除商品的方法。
vue实现按字母选择城市，点击字母跳转对应项目demo(含修改滚动条样式)代码全
boy火巨的博客
08-12 1180
先上图如下： 按字母获取城市 json ：链接：https://pan.baidu.com/s/1FgkftNLfFLvx9_xNdFU6RQ 提取码：mwqd 需求：顶部接口获取热门城市及城市Id，中部通过点击哪个字母底部自动跳转到哪个字母那一项获取城市id！只能点击二级城市！ 上代码↓↓↓↓ 请自动略过多余代码 <template> <div clas...
平台打车待支付页面,vue前端使用<template>布局
最新发布
06-21
以下是打车平台待支付页面的 Vue 模板布局实现，采用 Flex 布局并遵循移动端设计规范： ```vue <!-- 顶部行程信息 --> <text class="dot start"></text> <text class="address">{{ startAddress }} ...
解决vue路由跳转到新页面时，默认展示最下面内容的问题
欢迎观看我的前端知识合集~
10-23 719
解决vue路由跳转到新页面时，默认展示最下面内容的问题
新建的Vue项目，自己写的内容没有在左上角，内容都是居中
2202_75368024的博客
07-21 1378
新建的Vue项目，自己写的内容没有在左上角，内容都是居中
Vue3.0入门 + Vant3.0移动端实践（一）环境搭建及首页底部导航栏设计
猫哥 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS，AIOT)
02-03 5670
Vue3.0出来了，感觉Vue3.0比2.0好用多啦，且据说性能也有不少的提升，那么今后拥抱Vue3.0吧，会是个趋势。 以下记录下Vue3.0的入门和一个移动端的项目工程模板实战。 纸上得来终觉浅，直接给自己假想个项目实战，是最好的学习锻炼。 先发下原型图，最终达到的效果是这样的： 轮播图模块，快捷入口模块，列表模块，底部的导航栏 ...
页面使用组件，只显示组件的部分内容vue
m0_68428581的博客
10-20 700
1.在组件中找到要隐藏或显示的部分代码，加上 v-show="xxx" ，然后在props中传值。2.在调用组件的页面设置 :xxx="true" 或者 :xxx="false"
vue项目显示问题
seaskym的博客
07-22 687
vue项目在谷歌浏览器上显示时，均为100%的情况下，有的电脑显示正常，有的则被放大显示？ 解决方法：在电脑设置中，进入显示设置，调整下图标记处为100%即可。 ...
解决VUE路由跳转到第二页位置不在顶部问题
M_SSY的博客
09-26 3086
scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 } }
vue 按钮固定在屏幕下方中间位置
Havanao的博客
09-24 4184
style .css{ position: fixed; left: 0; right: 0; bottom: 10px; }
Vue3 移动端网页下拉，造成页面刷新，影响用户体验的修改
weixin_44076777的博客
09-22 1620
艺幻聊天室功能：移动端的一个聊天室，上滑会加载更多的历史消息，这样能够保存更多的用户历史数据，也能优化用户的聊天体验，不用进来就全部加载历史消息导致页面卡顿或者白屏。
VUE 在iphone上页面切换不置顶解决方案
黑星
01-12 1060
背景 近期在使用vue构建移动端项目，采用vue+vue-router+vuex+mint-ui等…在测试iphone系列手机过程中发现路由切换后，页面不置顶，必须触摸滑动屏幕重新定位后才恢复正常。 解决方案 vue-router在官方文档提供有解决方案 当创建一个 Router 实例，你可以提供一个 scrollBehavior 方法： const router = new VueRouter(...
vue中只在页面循环显示列表中的一部分数据
月兒~圓
12-17 5006
开始是这样写的，但是v-if和v-for不可以同时使用，v-for的优先级更高，会遍历列表中所有数据，降低性能 // 不建议使用这种方法 <li class="li li1" v-for="(item,index) in searchList" :key="index" v-if="index >6"> </li> 使用计算属性处理需要的列表 <li class="li li1" v-for="(item,index) in secondList1" :key="ind
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值