账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue.js滚动条下拉,数据重复渲染
    25
    0

    get_productsList:function(){

                // 缓存指针
                var _this=this;
                // 设置一个开关来避免重负请求数据
                  let sw = true;
                let adrObj = {
                    'path': misslove.path,
                    'page':1
                }
                console.log(adrObj)
                this.$http.post(misslove.host+"/index.php?route=product/category/get_products",adrObj,{emulateJSON:true}).then(
                    function (res) {
                        // 处理成功的结果
                        console.log(res.data)
                        var re = res.data;
                        if(re.code=="200"){
                            _this.products= re.products;
                        }
                    },function (err) {
                        // 处理失败的结果
                        console.log(err)
              });
                 let isLoading = false
                    window.onscroll = () => {
                    // 距离底部200px时加载一次
                        let bottomOfWindow = document.documentElement.offsetHeight - document.documentElement.scrollTop - window.innerHeight <= 200  
                           if (bottomOfWindow && isLoading == false) {
                                // 将开关关闭
                               isLoading = true
                               
                   this.$http.post(misslove.host+"/index.php?route=product/category/get_products",{'path': misslove.path,'page':page++},{emulateJSON:true}).then(
                    function (res) {
                        console.log(res)
                        //数据重复位置
                        var pists  = res.data.products;
                          if (!pists) pists = [];
                          var $arr = _this.products;
                          for (let i = 0; i < pists.length; i++) {
                            if (pists[i].Access != 0) {
                             $arr.push(pists[i]);

    // _this.products.push(pists[i])

                            }
                        }
                          _this.products = $arr;
                          console.log(_this.products)
                          
                    },function (err) {
                        // 处理失败的结果
                        console.log(err)
                        });
    
                    // 数据更新完毕,将开关打开
                               isLoading = false
                           }
                      }
            },

    数据一共有26条,一页显示20条,现在res这里先渲染出来20条再渲染出来6条,又重复渲染了20条 ,数据重复、?????

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 眸光带着牵连 普通会员 1楼

      在 Vue.js 中,滚动条下拉可能会导致数据重复渲染。这通常是因为我们没有正确处理滚动条事件和下拉列表的更新。

      以下是一个简单的示例,展示如何处理滚动条事件和下拉列表的更新:

      ```html

      • {{ item.name }}

      ```

      在这个示例中,items 是一个包含多个数据项的对象数组。当用户滚动页面时,滚动条会触发一个事件。我们需要在代码中监听这个事件,并根据需要更新数据。

      例如,如果我们希望每当下拉列表的数据发生变化时,自动更新页面,我们可以添加以下代码:

      javascript v-on:scroll="scrollHandler"

      然后在 scrollHandler 方法中,我们可以更新数据:

      ```javascript scrollHandler() { // 从服务器获取新的数据 const newData = [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' }, ];

      // 清空现有的数据 this.items = [];

      // 将新的数据添加到现有的数据中 this.items.push(...newData);

      // 更新下拉列表 this.$emit('scroll', { target: document.getElementById('items') }); } ```

      这样,每次用户滚动页面时,scrollHandler 方法都会被调用,并在 items 数组中添加新的数据。这样,我们就可以避免数据重复渲染了。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部