关于vue跳转后页面置顶的问题

目录
  • vue跳转后页面置顶
  • vue如何实现置顶

vue跳转后页面置顶

今天测试指出我的项目跳转页面时未置顶，嗯，这个太影响用户体验了。

但是办法总会有哒！No Problem!

只需在路径上匹配一段关于scroll方法即可，

我简单截取一段我的代码以作演示：

或者使用这段代码：

afterEach (to, from, next) {
    window.scrollTo(0, 0)
}

但是还有个问题依旧没有彻底克服！

比如，如果当前页面是首页，点击页面中的"首页"选项后，却依然不置顶，那么只能老老实实的增加个回到顶部了。

 toYpWebsite () {
      // this.$router.push('/ypWebsite')
      document.body.scrollTop = document.documentElement.scrollTop = 0
 },

即

document.body.scrollTop = document.documentElement.scrollTop = 0

这两条就可以解决关于页面置顶的问题，哈哈，测试没辙了！

vue如何实现置顶

new.json 数据代码：

[
  {"id": "G11111","title": "手机","price": 2999},
  {"id": "G22222","title": "平板电脑","price": 1999},
  {"id": "G33333","title": "笔记本电脑","price": 5999},
  {"id": "G44444","title": "树莓派电脑","price": 999},
  {"id": "G55555","title": "超级计算机","price": 9999999}
]

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>
<div id="app">
    <ul >
        <li v-for="(pr,index) in info" :key="index">{{ pr.id }} {{pr.title}} ￥{{pr.price}}
            <button @click="aaa(pr,index)">{{hello}}</button>
        </li>
    </ul>
</div>
<script type = "text/javascript">

    new Vue({
        el: '#app',
        data () {
            return {
                info: null,
                hello:"置顶",
                new:"new.json"
            }
        },
        mounted () {
            axios.get(this.new)
                .then(response => {
                    this.info = response.data;
                    console.log(response.data);
                    for (let i=0;i<this.info.length;i++){
                        console.log(this.info[i].title);
                        if (this.info[i].id == "G33333" || this.info[i].id == "G44444"){
                            this.info.unshift(this.info[i]); //把查找到的数据复制添加到数组的首位
                            this.info.splice(i+1,1); //数据复制添加到数组的首位后，原本查找的数据位置会发生改变，所以要往后加一位（i+1）,然后删除它
                        }
                    }
                })
                .catch(error=> {
                    console.log(error);
                    console.log("%c404:"+this.new+"数据请求失败！！！", "color:red;font-size:30px;");
                })
        },
        methods:{
            aaa:function (pr,index) {
                this.info.splice(index,1);
                this.info.unshift(pr);
            }
        }
    })
</script>
</body>
</html>

效果图如下：

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue页面切换到滚动页面显示顶部的实例

    在用mint ui写移动端从'listview'跳转到详情页时,详情页面由于大于手机高度可以滚动,当点击'listview'滚动list进入详情页面时发现详情页面不是从顶部开始显示. 一.目标: 'listview'进入详情页面时详情页面从页面顶部开始显示. 二.让首先查了下两个页面的scrollY,每次都是不一样的,也没有发现listview与详情页面之间的scrollY之间的规律 三.解决思路:进入详情页面的时候固定滚动页面的位置在顶部 四.代码实现:vue里面写法如下,至于updated生

  • 解决vue单页路由跳转后scrollTop的问题

    作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部. 最开始我使用了一个很笨的方法,每个页面上都加上window.scrollTop(0,0);来解决问题,但是这个太繁琐了.最后和小伙伴们商量了一下,在main.js页面上加了这么一段代码 router.afterEach(function (to) { window.scrollTo(0, 0) }) 路由跳

  • vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法

    这里是本小白使用时遇到的问题及个人使用的方法可能并不完美. 1.监测浏览器滚动条滚动事件及滚动距离 dmounted() { window.addEventListener("scroll", this.gundong); }, destroyed() { window.removeEventListener("scroll", this.gundong); }, methods: { gundong() { var dis = document.documentE

  • vue router 跳转后回到顶部的实例

    在main.js中加上这段代码 // 跳转后返回顶部 router.afterEach((to,from,next) => { window.scrollTo(0,0); }) 以上这篇vue router 跳转后回到顶部的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 关于vue跳转后页面置顶的问题

    关于vue跳转后页面置顶的问题

    目录 vue跳转后页面置顶 vue如何实现置顶 vue跳转后页面置顶 今天测试指出我的项目跳转页面时未置顶,嗯,这个太影响用户体验了. 但是办法总会有哒!No Problem! 只需在路径上匹配一段关于scroll方法即可, 我简单截取一段我的代码以作演示: 或者使用这段代码: afterEach (to, from, next) { window.scrollTo(0, 0) } 但是还有个问题依旧没有彻底克服! 比如,如果当前页面是首页,点击页面中的"首页"选项后,却依然不置顶,那

  • vue跳转后不记录历史记录的问题

    目录 vue跳转后不记录历史记录 vue-router回退不记录历史 场景说明 处理方案 其他api跳转 vue跳转后不记录历史记录 vue路由跳转一般情况下是使用push,  this.$router.push({                 path: "/testTeam/testTeam",                              }); 若是特殊需求,页面跳转后不记录到历史记录中,将push改为replace即可 this.$router.replace

  • Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例

    解决方法有两种:一种是直接给当前页面添加特殊样式,当网页刷新或者跳转到下一页后,样式消失:另一种情况是即使刷新页面后样式仍然有效. 直接上代码: 第一种情况: <script type="text/javascript" src="templets/js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function

  • Vue数据变化后页面更新详细介绍

    首先会通过module.hot.accept监听文件变化,并传入该文件的渲染函数: module.hot.accept(/*! ./App.vue?vue&type=template&id=472cff63&scoped=true& */ "./App.vue?vue&type=template&id=472cff63&scoped=true&", __WEBPACK_OUTDATED_DEPENDENCIES__ =&g

  • Vue如何实现table表格置顶

    Vue如何实现table表格置顶

    目录 如何实现table表格置顶 置顶前 置顶后 点击table表格某一行让其置顶 如何实现table表格置顶 老大让做vue项目,可是我对vue还不熟,抓紧时间学习,记录 此处省略css <table id="toptable" > <thead> <tr> <th>序号</th> <th>显示顺序</th> <th>景区名称</th> <th>景区地址</t

  • vue实现登录后页面跳转到之前页面

    在开发中我们经常遇到这样的需求,需要用户直接点击一个链接进入到一个页面,用户点击后链接后会触发401拦截返回登录界面,登录后又跳转到链接的页面而不是首页,这种问题该如何去做呢? 先说一下我们需要用到的几个API: 1.router.currentRoute:当前的路由信息对象,我们可以通过router.currentRoute.fullPath获得解析后的 URL,包含查询参数和 hash 的完整路径,如果要访问的页面的路由有命名(name)的话,可以通过router.currentRoute.

  • PHP curl实现抓取302跳转后页面的示例

    PHP的CURL正常抓取页面程序如下: $url = 'http://www.baidu.com'; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_VERBOSE, true); curl_setopt($ch, CURLOPT_HEADER, true); curl_setopt($ch, CURLOPT_NOBODY, true); curl_setopt($ch, CURLO

  • vue页面跳转后返回原页面初始位置方法

    vue页面跳转到新页面之后,再由新页面返回到原页面时候若想返回调出原页面的初始位置,怎么来解决这个问题呢?首先我们应该在跳出页面时候记录下跳出的scrollY,返回原页面的时候在设置返回位置为记录下的scrolly即可,scrolly我用的是vuex状态管理器来保存的.整个环境是基于vue-cli搭建的 一.main.js里面配置vuex //引用vuex import Vuex from 'vuex' Vue.use(Vuex) 二.main.js里面vuex状态管理 var store =

  • vue跳转页面的几种方法(推荐)

    vue跳转不同页面的多种方法 1:router-link跳转 <!-- 直接跳转 --> <router-link to='/testDemo'> <button>点击跳转2</button> </router-link> <!-- 带参数跳转 --> <router-link :to="{path:'testDemo',query:{setid:123456}}"> <button>点击跳

  • react 跳转后路由变了页面没刷新的解决方案

    react 跳转后路由变了页面没刷新的解决方案

    目录 问题 解决方案 问题 这样的问题貌似原因还挺多的,我的问题是带参数的url不能刷新,router 5.0版本 ,使用withRouter关联组件进行页面跳转 如下所示 路由代码 解决方案 在路由组件上最上层元素上加一个key增加路由的识别度,因为普通的跳转是根据path来识别的,但是path带上参数时,路由无法精确识别.不过,在跳转页面的时候,每个地址都会在localtion对象里添加一个key.如下打印 // 组件挂载 componentDidMount() { console.log(

随机推荐