VUE中用原生JS实现触底加载数据

VUE中用原生JS实现触底加载数据

在vue开发过程中使用第三方组件是不可避免的,但是第三方样式的css样式属实头痛,所以我选择原生JS的写法完成了触底加载

1:定义data

page: 1, //页数
limit: 10, //每页数据条数
flag: true //开关,
featureList:[]//渲染数据

2:封装函数

  mounted() {
    window.addEventListener("scroll", this.getMore);//监听滚动
  },
getMore() {
      	// 判断开关的属性,如果为false 则return false
      if (this.flag == false) {
        return false;
      }
      let clientHeight = document.documentElement.clientHeight;//获取html的可视高度
      let scrollTop = document.documentElement.scrollTop;//获取html的滚动高度
      let scrollHeight = document.documentElement.scrollHeight;//获取文档的实际高度
      console.log(clientHeight, scrollTop, scrollHeight);//输出三个值
      //判断如果html的可视高度加上滚动高度等于文档的实际高度的话,就关闭开关,否则会造成数据混乱
      if (clientHeight + scrollTop=== scrollHeight) {
        this.flag = false;//关闭开关
        this.$axios({
          url: "https://www.????????.com/????/????/??????",
          params: {
            page: this.page,
            limit: this.limit
          }
        }).then(res => {
          if (res.data.code == 200) {
            this.featureList.push(...res.data.data.list);
            this.page++;
            this.flag = true;
          }
        });
      }
    },

3:当滚动时监听三个值的变化

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7UcXbRJx-1597936673995)(C:\Users\HE\Desktop\微信截图_20200820230442.png)]

4:当clientHeight + scrollTop=== scrollHeight时候将请求回来的数据推进数组

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k9WRLfsv-1597936673998)(C:\Users\HE\Desktop\000.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iMsVSxHJ-1597936674001)(C:\Users\HE\Desktop\002.png)]

5:算然JS可以解决但是我还是研究了stylus的样式穿透,来改变第三方组件的样式

// /deep/+第三方组件的类名
/deep/.van-dropdown-menu__bar {
  height: 80px;
}
/deep/.van-dropdown-menu__title::after {
  border-width: 8px;
  right: -30px;
  top: 40%;
}

6:如图