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

學(xué)無(wú)先后,達(dá)者為師

網(wǎng)站首頁(yè) 編程語(yǔ)言 正文

小程序監(jiān)聽(tīng)屏幕滾動(dòng) 判斷滾動(dòng)方向上下滾動(dòng)且滾動(dòng)到一定位置

作者:Zan^Z 更新時(shí)間: 2022-02-19 編程語(yǔ)言

1.單獨(dú)寫(xiě)

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

2.寫(xiě)在util里成公共的類(lèi)

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

util里

module.exports = {
	scrollFloatwindow:scrollFloatwindow
}
//滾動(dòng)方向判斷方法
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('向上滾動(dòng)');  
    }     
    setTimeout(function () {
      that.setData({
        scrollTop: ev.scrollTop
      })
    }, 0)
}

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

欄目分類(lèi)
最近更新