vue的H5项目中使用@scroll滚动加载数据

news/2024/7/10 0:54:16 标签: vue

<div ref="list" @scroll="handleScroll"></div>

 created()

created() {

    //判断是手机端和pc端

    this.device()

    if(this.isPc == true){

      this.clientHeight = document.documentElement.clientHeight;

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

    }

    this.getData();

  }

 methods: {}

methods: {

 //判断是手机端还是PC端

    isMobile() {

      let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)

      return flag;

    },

    device(){

      if (this.isMobile()) {

        console.log("移动端");

        this.isPc = false

      } else {

        console.log("pc端");

        this.isPc = true

      }

   }

// 鼠标滚动加载数据

    handleScroll(){

      let a = this.$refs.list.getBoundingClientRect().bottom;

      a = Math.ceil(a);

      if (a == this.clientHeight || a-1 == this.clientHeight) {

        this.page++

        this.getData();

      }

},

destroyed() 

destroyed() {

  window.removeEventListener("scroll",  this.handleScroll);

  },

 


http://www.niftyadmin.cn/n/1866785.html

相关文章

vue 点击按钮div input focus问题解决

<div click"clickFocus"></div> <input ref"inputbox" v-model"inputText" type"text" > methods: { clickFocus(){ this.$nextTick(() > this.$refs.inputbox.focus()); }, }

uni-app开发安卓app的封装get和post及页面使用

request.js页面如下 const baseUrl = "请求地址" //get请求 //get请求封装 export function getRequest(url,params){return new Promise((resolve, reject) => {uni.request({url: baseUrl + url,data: params,method:"GET",dataType:json,header:{…

uni-app自定义底部tabbar实现某个tab的显示和隐藏

自定义的tabbar可用v-if实现某个tab的显示和隐藏 页面 <view class"tab-box row acenter"><navigator class"grow1 column acenter jcenter" hover-class"none" url"" open-type"switchTab"><image class&…

uni-app修改swiper里dot的样式

注意&#xff1a;必须写在App.vue页面 <style>/* 首页的banner dot效果 */.home uni-swiper .uni-swiper-dot {width:6rpx;height:6rpx;}.home uni-swiper .uni-swiper-dot-active {width: 34rpx;border-radius: 20rpx;} </style>

uni-app修改checkbox样式

注意&#xff1a;必须写在App.vue页面 <style>uni-checkbox .uni-checkbox-input {border-radius: 50% !important;color: #ffffff !important; }uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {color: #fff;background: #1953ed;} </style>

uni-app swiper实现通知上下循环滚动

swiper实现通知上下循环滚动 <template> <view><swiper circular"true" vertical"true" autoplay"true" interval"3000" duration"1000" ><swiper-item v-for"(item,index) in noticeList"…

uni-app点击复制文本

<view><text>{{copyText}}</text><view tap"copyClick">点击复制</view> </view>//适用小程序和app的点击复制 copyClick() {uni.setClipboardData({data:this.copyText,success: function (res) {uni.getClipboardData({succes…

matlab矩阵鞍点,最大熵模型(matlab应用).ppt

非线性规划中的对偶问题 拉格朗日函数&#xff1a; 于是&#xff1a; 因此&#xff0c;为了尽量大&#xff0c;p的选取必须保证 考虑&#xff1a; 只要令lambda(i)负无穷大就行了 对偶问题与拉格朗日函数&#xff1a; 同时&#xff1a; 等价于&#xff1a; 而 可以证明&#xf…