vue滚动（vue滚动到指定位置）

本篇文章给大家谈谈vue滚动，以及vue滚动到指定位置对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、VUE实现页面滚动加载
• 2、用vue实现无限滚动
• 3、VUE开发-- 滚动行为
• 4、vue中获取滚动高度或指定滚动到某位置
• 5、vue怎么加滚动的字幕

VUE实现页面滚动加载

vm = new Vue({

        el: '#app',

        data: {

            items:[],

            finished:false,

            loading:false

        },

        mounted:function(){

                window.addEventListener('scroll',this.handleScroll,true);

          },

         created: function () {

             var that = this;

             that.isApp = Utils.isAppTop();

         袜陆    that.getHouseList(); // 获取房源列表

         },

computed: {

     last_id: function(){

    var $this = this;

            var lastId = 0;

            $.each($this.houseList,function (index,value) {

                lastId = value.zf_id;

            });

            return lastId;

    }

    },

methods: {

        handleScroll:function(e){

        var $this = this;

        console.log('handleScroll')

        if ($this.getBottomOfWindow()) {

          $this.getHouseList();

        }

    },

    getBottomOfWindow:function () {

            var viewH =$("#g-scrollview").height();//可见高度

            var contentH =$("#g-scrollview").get(0).scrollHeight;//内容高度

            var scrollTop =$("#g-scrollview").scrollTop();//滚动高度

            return viewH + scrollTop + 200 = contentH;

        },

            getHouseList: function(){

                var $this = this;

                console.log('getHouseList')

                console.log($this.finished)

                if($this.finished){

                return false;

                }

                if($this.loading){

                return;

                }

                $this.loading = true;

                $.ajax({

                    url: api

                    data: {

                            last_id:$this.last_id

                    },

                 粗好胡   dataType: 'json',

                    method: 'GET',

                   岩拦 success: function (res) {

                        var houseList = $this.houseList;

                        if (res.error_code == 0) {

                            var count = 0;

                            $.each(res.data,function (index,value) {

                                houseList.push(value);

                                count++;

                            });

                            console.log(houseList)

                            $this.houseList = houseList;

                            $this.$forceUpdate();

                            if (count == 0) {

                                $this.finished = true;

                            }

                            $this.loading = false;

                        }

                        YDUI.dialog.loading.close();

                    },

                    error: function () {

                    $this.loading = false;

                    YDUI.dialog.loading.close();

                    }

                });

            },

}

[img]

用vue实现无限滚动

译文：

本文将使用 Random User API (模拟后端返回数据)。该API将自己形容为“像Lorem Ipsum，但是对于人”。它不仅适用于此实现，模键而且对于模仿未来项目的用户配置文件也非常有用。

在你开始前，用 Vue CLI webpack-simple 项目模板创建一个新的 Vue.js 项目。此例子将分别用 Axios 和 MomentJS 来获取数据和日期格式。

$ vue init webpack-simple infinite-scroll-vuejs

有各种实现无限滚动的 npm 包，你可以使用你的 Vue 应用程序，但其中一些可能是太繁琐了。此文中，我们将不用那些插件或包，仅仅编写一个简单的 JavaScript 函数来实现无限滚动功能（当滚动到浏览器窗口底部时，获取一组新数据）。

在我们开始集成无限滚动之前，让我们在页面加载中获取并设置一些初始数据：

App.vue

注意：

Random User API 一次只会返回一个随机用户数据，为了获得5个用户数据，需要发起五次请求。

如果您在 console 看到了五个用户数据，那就OK了！让我们通过模板中的这些数据进行迭代，然后继续：

App.vue

现在你在此的目的......无限祥答的滚动！ 在组件的方法中，您需要创旦宴巧建一个名为 scroll() 的新函数，并将其加载到 mounted() 生命周期方法中。

这个 scroll() 方法应该有一个简单的条件来计算页面的底部，判断它为true或false，并执行一些操作。我们将利用文档对象的 documentElement.scrollTop ， documentElement.offsetHeight 属性和窗口的 innerHeight 属性来确定是否滚动到底部：

在这种情况下，让我们添加一个GET方法，使用Axios从随机用户API中获取另一个随机用户。

此功能只会在用户滚动到页面底部时发起服务请求，并向人员数组添加一个新的随机“用户”。此时，您应该可以无限滚动...并每次看到新的“用户”。

无限滚动听起来吓人，但如所证明的那样，它非常简单。每次滚动到页面的底部时，我们都会使用 Axios 获取新数据，然后将这些数据推送到数组中。要延迟加载图像，只需将图像源推送到数据数组，在模板中遍历它，然后将 img：src ="" 绑定到数组。

ps： 此文核心就在【判断是否滚动到页面底部的逻辑上】，在此提供一个兼容性更好的写法，参考此文 滚动到底部加载更多 。

VUE开发-- 滚动行为

测试中Google浏览器不存在该问题。

通常我们很少会对页面回退或前进进行操作，在浏览器用户界面上提供有前进、回退按钮，页面跳转到离开页面之前的位置，而不是重新刷新页面，这个功能是由浏览器引擎(与渲染引擎、解析引擎概念不同)来完成的。当用户进入一个页面的时候，会往 history 栈中放入当前的记录，对页面级别的操作通过操作旁手模内置对象 history 可以满足一些需求。

vue 路由跳转就是通过对 history.pushState() 和 history.replaceState() 方法的模拟来实现，会往 history 栈中存放一条记录，这也是为什么 vue 的 router.push 方法只能在支持 history.pushState() 方法的浏览器中使用，当调用 router.go() 或者 router.back() 方法的时候就和 history.go()、history.back() 效果一样，都是对 history 栈中的记录进行访问，上述行为与通过浏览器的回退和前进效果也是一样。

但是，在不加处理的情况下，组件的滚动行为会跟我们想象的不同。

2）主页：

3）列表：

4）关于我们;

回退功能与浏览器的回退功能相同。

4）给Home组件与List组件添加内容。

请注意，现在开始滚动首页位置至第 5 屏的位置，当切换到列表以及关于页面的时候，会发现这两个运缓页面的滚动行为和浏览前滚动行为一致。

添加回到顶部功能：

在route后面加上scrollBehavior这个函薯卜数。该scrollBehavior函数接收to和from路由对象。第三个参数savedPosition仅在这是popstate导航（由浏览器的后退/前进按钮触发）时才可用该函数可以返回滚动位置对象。

如果返回假值或空对象，则不会进行滚动。

vue中获取滚动高度或指定滚动到某位置

1.点击某个标签，滚动到某个具体位置

    switchHeight(num) {

        this.selectNum = num;

 者滑       if (num == 0) {

          document.getElementById("identifer_one").scrollIntoView();

        } else {

          document.getElementById("hotel_two").scrollIntoView();

        }

      },

2.获取滚动高度，

 首先要先写监听事件：

  mounted() {

      window.addEventListener("scroll", this.handleScroll, true); //监听滚动事件

    },

处理监听事件：e.target.scrollTop是目标对象贺返的滚动高度首拍腊

handleScroll(e) {

        let serviceTop = 44;

        let hotelTop = 344;

        if (e.target.scrollTop 44 e.target.scrollTop 344) {

          this.selectNum = 0;

        }

        if (e.target.scrollTop 344) {

          this.selectNum = 1;

        }

      }

    },

vue怎么加滚动的字幕

vue添加滚动字幕的方法如下：

1、进入vue，点击创作视频选项上传视频素材。

2、滑动页面右侧的列表，选择前改编辑的功能即可添加滚动字幕。

VUE是iOS和Android平台上的一款Vlog社区与编辑工具。允许用户通过简单的操作实现Vlog的拍摄、剪辑、细调、和发布，记录与分享生活。还可以在社区直接浏览他人发布的Vlog，与Vloggers互动。随着手机摄像头的发展，越来越多的人开始使用手机拍照和摄像。摄像一般来说要比拍照门槛高，但是视频传播的信息量又远大于照片。VUE就诞生在这样的背景下，希望用拍照一样简单的操作，帮助用户在手机上拍摄精美的短视频。成立三枝并年的VUE给人的印象是低调而缓慢。2016年3月成立，VUE一直安安静静扮演着一个视频工具的角色，一路拿到了真格基金、贝塔斯曼、九合创投、慧搭判愉悦资本等机构的投资，到2019年，总安装用户突破1亿。

关于vue滚动和vue滚动到指定位置的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。