vue怎么给dom元素添加静止滑动的事件

vue怎么给dom元素添加静止滑动的事件,第1张

vue给dom元素添加静止滑动的事件方法:

1、直接利用mousewheel事件替代scroll事件缓谈。

2、鼠标滚轮,显而歼哪源易见动动鼠标滚轮就能触发事件,用光氏态标拖拽滚动条就能触发事件。

译文: https://alligator.io/vuejs/implementing-infinite-scroll/

本文将使用 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: 此文核心就在【判断是否滚动到页面底部的逻辑上】,在此提供一个兼容性更好的写法,参考此文 滚动到底部加载更多 。

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()

                    }

                })

            },

}


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11992195.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存