日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

小程序監聽屏幕滾動 判斷滾動方向上下滾動且滾動到一定位置

作者:Zan^Z 更新時間: 2022-02-19 編程語言

1.單獨寫

page({
	data:{
		scrollTop:0
	},
   //監聽屏幕滾動 判斷上下滾動 
   onPageScroll: function (ev) {
    var _this = this;
    //當滾動的top值最大或者最小時,為什么要做這一步是由于在手機實測小程序的時候會發生滾動條回彈。防止發生回彈,設置默認最大最小值   
    if (ev.scrollTop <= 0) {
      ev.scrollTop = 0;
    } else if (ev.scrollTop > wx.getSystemInfoSync().windowHeight) {
      ev.scrollTop = wx.getSystemInfoSync().windowHeight;
    }
    //判斷瀏覽器滾動條上下滾動   
    if (ev.scrollTop > this.data.scrollTop || ev.scrollTop == wx.getSystemInfoSync().windowHeight) {
        this.setData({
          istrue_scroll:true  //控制頁面顯示
        })   
    } else {
      this.setData({
        istrue_scroll:false   //控制頁面隱藏
      }) 
      console.log('向上滾動');  
    }  
    //給scrollTop重新賦值    
    setTimeout(function () {
      _this.setData({
        scrollTop: ev.scrollTop
      })
    }, 0)
  },
})

2.寫在util里成公共的類

var util = require('../../../utils/util.js');
page({
	data:{
		scrollTop:0
	},
	//監聽屏幕滾動 判斷上下滾動
   	onPageScroll: function (ev) {
    	var that=this;
    	var data_scrollTop=this.data.scrollTop;
    	util.scrollFloatwindow(ev,data_scrollTop,that);
  	},
  ))

util里

module.exports = {
	scrollFloatwindow:scrollFloatwindow
}
//滾動方向判斷方法
function scrollFloatwindow(ev,data_scrollTop,that){
    if (ev.scrollTop <= 0) {
      ev.scrollTop = 0;
    } else if (ev.scrollTop > wx.getSystemInfoSync().windowHeight) {
      ev.scrollTop = wx.getSystemInfoSync().windowHeight;
    }
    if (ev.scrollTop > data_scrollTop || ev.scrollTop == wx.getSystemInfoSync().windowHeight) {
      that.setData({
          istrue_scroll:true
        })   
    } else {
      that.setData({
        istrue_scroll:false
      }) 
      console.log('向上滾動');  
    }     
    setTimeout(function () {
      that.setData({
        scrollTop: ev.scrollTop
      })
    }, 0)
}

原文鏈接:https://blog.csdn.net/Zan_Z/article/details/106814495

欄目分類
最近更新