首页 > 编程语言 >[小程序]上划显示隐藏底部按钮

[小程序]上划显示隐藏底部按钮

时间:2023-06-04 15:11:33浏览次数:43  
标签:log isSwipDown 底部 按钮 scrollTop ev 隐藏 setData

需求:手指往上划隐藏按钮, 手指往下滑显示按钮
效果如下:

页面 pages/pageIntro/pageIntro
提交记录:
(January 31st, 2023 10:07am)
底部按钮显示隐藏
关键代码:


  onPageScroll(ev){
    if(ev.scrollTop > this.data.scrollTop || ev.scrollTop == wx.getSystemInfoSync().windowHeight){
      console.log('上上')
      this.setData({
        isSwipDown:false
      })
    }else {
      console.log('下下')
      this.setData({
        isSwipDown:true
      })
    }

    if(ev.scrollTop <= 0){
      this.setData({
        isSwipDown:true
      })
    }

    setTimeout(() => {
      this.setData({
        scrollTop:ev.scrollTop
      })
    }, 0);
  },
  onPageScroll(ev){
    if(ev.scrollTop > this.data.scrollTop || ev.scrollTop == wx.getSystemInfoSync().windowHeight){
      console.log('上上')
      this.setData({
        isSwipDown:false
      })
    }else {
      console.log('下下')
      this.setData({
        isSwipDown:true
      })
    }

    if(ev.scrollTop <= 0){
      this.setData({
        isSwipDown:true
      })
    }

    setTimeout(() => {
      this.setData({
        scrollTop:ev.scrollTop
      })
    }, 0);
  },

就是在滚动的时候,记录一个scrollTop变量,跟当前的滚动距离比较,判断出是向上滚还是向下滚。知道上下的区别,就可以根据这个区别设置底部按钮的隐藏和显示了

标签:log,isSwipDown,底部,按钮,scrollTop,ev,隐藏,setData
From: https://www.cnblogs.com/tufei7/p/17455712.html

相关文章

  • 文件夹隐藏属性为灰色,无法修改的解决方案
    【关于U盘中毒,隐藏属性无法取消的解决办法】attrib命令:网上那些用法,看得我内分泌失调,到现在都不知道attrib的正确用法。网上找到一个批处理,很方便,可以批量设置或取消隐藏属性和系统属性。1、新建一个.txt文档2、把下面的代码复制进去3、保存4、把.txt后缀改成.bat5、不要双......
  • 盖瑞特发动机增压器大揭秘!隐藏在汽车引擎盖下的飞机发动机技术
    ......
  • fastadmin隐藏搜索按钮
     设置showSearch:false即可 ......
  • fastadmin隐藏右上角的搜索按钮及其导出等
     想要隐藏这些按钮,有两种方式一、直接html文件里修改data-show-export="false"data-show-toggle="false"data-show-columns="false"data-search="false"data-common-Search="false" 二、在bootstarpTable初始化的时候设定//初始化表格......
  • vue多行文本显示省略号加展开收起按钮
    getClientRects()获取文本的行数和宽高等信息,只能获取行内元素的 nextTick(()=>{    constlineRows=document.querySelector('.abc').getClientRects();    //如果行数超出2||行数是2&&最后一行宽度超过dom宽度-展开收起按钮的width就是多了,要显示展开......
  • 项目场景:uniapp多个输入框弹出软键盘后无法滚动到底部
    项目场景:uniapp多个输入框弹出软键盘后无法滚动到底部|遮挡底部input在做uniapp的时候遇到多个输入框的情况,用官方demo做个演示adjustPan模式问题描述uniapp多个输入框无法拉到最下面原因分析:1.adjustPan模式下软键盘弹出时,webview窗体高度不变,但窗体上推,以保证输入框不被软......
  • Allegro隐藏铺铜或显示铺铜
    在我们在PCB完成后,我们会进行DRC检查,在铺铜网络存在显示时,找DRC标志符号不容易发现,如果要是把铺铜隐藏,PCB中只显示导线,焊盘,过孔。大大的减少了我们的检查DRC的困难。下面我们来进行铺铜隐藏或显示操作,执行Setup> Preferences…如下图所示,只要把对应的命令勾上,铜片将会隐藏。......
  • AI智能安监平台EasyCVR多级分组展开按钮无法操作的问题优化
    EasyCVR基于云边端协同,可支持海量视频的轻量化接入与汇聚管理。平台既具备传统安防视频监控的能力,比如:视频监控直播、云端录像、云存储、录像检索与回看、智能告警、平台级联、云台控制、语音对讲等,也能接入AI智能分析的能力,包括人脸检测、车辆检测、烟火检测、安全帽检测、区域入......
  • react 实现聊天界面,发送消息自动到底部
    <divstyle={{float:"left",clear:"both"}}ref={(el)=>{this.messagesEnd=el;}}></div>scrollToBottom=()=>{this.messagesEnd.scrollIntoView({behavior:"auto"......
  • react项目,或者vue项目。手动隐藏warning。保持控制台的清晰
    非常感谢您的指正和提醒,我的回答中使用了arguments对象,而这不是一个好的实践。可以使用ES6的剩余参数(restparameters)来代替arguments对象。以下是使用剩余参数替换arguments对象的示例代码:importReactfrom'react';importReactDOMfrom'react-dom';constconsol......