小程序頁面指定區域局部滾動,做上拉和觸底刷新

業務需求:在頁面某個固定區域滑動

思路:滑動高度 = 頁面高度 - 自定義導航高度(不是自己自定義的導航可以省略)- 按鈕高度 - 單詞數高度

實現 : ???1.數據展示區內使用scroll-view,設置y軸滾動(給固定高度=滑動高度)
????????????????2.計算展示區盒子的高度,僅在范圍內允許滾動
????????????????3.保持頁面固定,下拉觸底時不能帶動頁面滾動

  getScrollHeight() {const that = this;wx.getSystemInfo({success: (res) => {let systemInfo = wx.getSystemInfoSync();//頁面高度let windowHeight = systemInfo.windowHeight;// that.statusBarHeight = systemInfo.statusBarHeight;// 膠囊位置信息let rect = wx.getMenuButtonBoundingClientRect();// that.menuButtonRect = JSON.parse(JSON.stringify(rect));let navBarHeight =(rect.top - systemInfo.statusBarHeight) * 2 + rect.height;// this.navBarHeight = navBarHeight;// 自定義導航欄的高度let height = systemInfo.statusBarHeight + navBarHeight;let query = wx.createSelectorQuery().in(that);query.select(".nav-btn").boundingClientRect();query.select(".collect-btn").boundingClientRect();query.select(".nav-bg").boundingClientRect();query.exec((res) => {let h1 = res[0].height;let h2 = res[1].height;let h3 = res[2].height;that.navBgHeight = h3;let scrollHeight = windowHeight - h1 - h2 - height;that.scrollHeight = scrollHeight;});},});},//HTML<scroll-viewscroll-yscroll-with-animation@scrolltolower="handleScrolltolower"class="bs scroll-view":style="{ maxHeight: `${scrollHeight}px` }"><viewstyle="padding: 0 30rpx 30rpx 30rpx"v-if="navList[0].isActivation"><collect-list @toTranslate="toTranslate" ref="collectList" /></view><sign-list@cancelSign="cancelSign"v-if="navList[2].isActivation || navList[1].isActivation"/></scroll-view>

scroll-view的事件。

bindscrolltoupper 觸頂事件,放入下拉刷新處理方法
bindscrolltolower 觸底事件,放入觸底加載處理方法
根據自己的需要添加


觸底之后可能會出現父盒子會下拉,導致出現頁面空白bug
解決方法==>在pages.json文件夾加上"disableScroll":true 屬性

        {"path": "pages/tabbar/collect","style": {"navigationBarTitleText": "收藏","navigationStyle": "custom","disableScroll":true}},

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/715611.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/715611.shtml
英文地址,請注明出處:http://en.pswp.cn/news/715611.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

swoole

php是單線程。php是靠多進程來處理任務&#xff0c;任何后端語言都可以采用多進程處理方式。如我們常用的php-fpm進程管理器。線程與協程,大小的關系是進程>線程>協程,而我們所說的swoole讓php實現了多線程,其實在這里來說,就是好比讓php創建了多個進程,每個進程執行一條…

初階數據結構:二叉樹

目錄 1. 樹的相關概念1.1 簡述&#xff1a;樹1.2 樹的概念補充 2. 二叉樹2.1 二叉樹的概念2.2 二叉樹的性質2.3 二叉樹的存儲結構與堆2.3.1 存儲結構2.3.2 堆的概念2.3.3 堆的實現2.3.3.1 堆的向上調整法2.3.3.2 堆的向下調整算法2.3.3.3 堆的實現 1. 樹的相關概念 1.1 簡述&a…

域名及地址正確外,若依后臺無法正常加載頁面和退出報404問題

寫小程序退出的時候&#xff0c;另外寫了一個自定義退出處理類&#xff0c;里面的響應瀏覽器的代碼每次都走。因為原來也有個退出處理類&#xff0c;所以先后走了2次&#xff0c;因為就出現了問題。 LogoutSuccessHandlerImpl類里的&#xff1a; ServletUtils.renderString(r…

【C++ AVL樹】

文章目錄 AVL樹AVL樹的概念AVL樹節點的定義AVL樹的插入AVL樹的旋轉右單旋左單旋左右雙旋右左雙旋 代碼實現 總結 AVL樹 AVL樹的概念 二叉搜索樹在順序有序或接近有序的情況下&#xff0c;而插入搜索樹將退化為單叉樹&#xff0c;此時查找的時間復雜度為O(n)&#xff0c;效率低…

鴻蒙Harmony應用開發—ArkTS聲明式開發(通用屬性:顏色漸變)

設置組件的顏色漸變效果。 說明&#xff1a; 從API Version 7開始支持。后續版本如有新增內容&#xff0c;則采用上角標單獨標記該內容的起始版本。 linearGradient linearGradient(value: { angle?: number | string; direction?: GradientDirection; colors: Array; repea…

mamba-ssm安裝building wheel卡著不動后error...避坑解決方法

文章目錄 方法1、下載whl文件到本地后pip install安裝成功后驗證&#xff1a; 方法2、拉取Docker鏡像 對于項目中用到MambaIR的小伙伴&#xff0c;需要pip安裝 causal_conv1d和 mamba-ssm兩個包及其依賴&#xff1a; torch packing transformersMambaIR-Github主頁&#xff0…

【C++】vector的使用及其模擬實現

這里寫目錄標題 一、vector的介紹及使用1. vector的介紹2. 構造函數3. 遍歷方式4. 容量操作及空間增長問題5. 增刪查改6. vector二維數組 二、vector的模擬實現1. 構造函數2. 迭代器和基本接口3. reserve和resize4. push_back和pop_back5. insert和erase5. 迭代器失效問題5. 淺…

【Java】基礎算法練習題

個人簡介&#xff1a;Java領域新星創作者&#xff1b;阿里云技術博主、星級博主、專家博主&#xff1b;正在Java學習的路上摸爬滾打&#xff0c;記錄學習的過程~ 個人主頁&#xff1a;.29.的博客 學習社區&#xff1a;進去逛一逛~ 目錄 基礎算法練習題&#x1f680;1. 兩數之和…

Django 管網項目 三

Django 官網文檔 ??Writing your first Django app, part 2 | Django documentation | Django 本文內容涉及創建視圖 View&#xff0c;路由&#xff0c;和模版。并對內容進行渲染。 創建視圖 在我們的投票應用中&#xff0c;我們需要下列幾個視圖&#xff1a; 問題索引頁—…

ChatGPT支持下的PyTorch機器學習與深度學習技術應用

近年來&#xff0c;隨著AlphaGo、無人駕駛汽車、醫學影像智慧輔助診療、ImageNet競賽等熱點事件的發生&#xff0c;人工智能迎來了新一輪的發展浪潮。尤其是深度學習技術&#xff0c;在許多行業都取得了顛覆性的成果。另外&#xff0c;近年來&#xff0c;Pytorch深度學習框架受…

相關知識1111

一、 店鋪編號和相關負責人 1、天貓兄弟、錦格 京東凡越 福林哥 如萍姐 2、京東錦格 天貓凡越 林森 雷佳華 3、天貓從簡 京東從簡 孔哥 4、抖音錦格 拼多多凡越 鴻哥 不知道哪個店鋪編號&#xff1a;0 二、天貓京東聊天界面快捷搜索商品 1、 天貓只能根據標題搜索 2、京東是…

神經網絡之萬能定理python-pytorch實現,可以擬合任意曲線

神經網絡之萬能定理python-pytorch實現&#xff0c;可以擬合任意曲線 博主&#xff0c;這幾天一直在做這個曲線擬合的實驗&#xff0c;講道理&#xff0c;網上可能也有很多這方面的資料&#xff0c;但是博主其實試了很多&#xff0c;效果只能對一般的曲線還行&#xff0c;稍微…

java之抽象類

什么是抽象類&#xff1f; 抽象就是不能具體化&#xff0c;不能實例化 作為父類&#xff0c;讓子類去實現 abstract修飾類就是抽象類 abstract修飾方法就是抽象方法修飾符 abstract class 類名{修飾符 abstract 返回值類型 方法名(形參列表); }public abstract class A {//不…

CTFHUB--文件包含漏洞--RCE

文件包含漏洞 文件包含漏洞也是一種注入型漏洞&#xff0c;其本質就是輸入一段用戶能夠控制的腳本或者代碼&#xff0c;并讓服務端執行。有時候由于網站功能需求&#xff0c;會讓前端用戶選擇要包含的文件&#xff0c;而開發人員又沒有對要包含的文件進行安全考慮&#xff0c;…

CSS【詳解】居中對齊 (水平居中 vs 垂直居中)

水平居中 內部塊級元素的寬度要小于容器(父元素) 方案一&#xff1a;文本居中對齊&#xff08;內聯元素&#xff09; 限制條件&#xff1a;僅用于內聯元素 display:inline 和 display: inline-block; 給容器添加樣式 text-align:center<!DOCTYPE html> <html lang&q…

裴蜀定理(Bézout’s identity)

裴蜀定理&#xff08;Bzout’s identity&#xff09;是一個數論定理&#xff0c;也稱為貝祖等式。它表明&#xff0c;對于任意給定的兩個整數 a a a 和 b b b&#xff0c;存在整數 x x x 和 y y y&#xff0c;使得它們滿足以下方程&#xff1a; a x b y gcd ? ( a , b )…

【簡略知識】項目開發中,VO,BO,PO,DO,DTO究竟是何方妖怪?

前言 在項目開發中&#xff0c;是否需要定義VO&#xff08;視圖對象&#xff09;&#xff0c;BO&#xff08;業務對象&#xff09;&#xff0c;PO&#xff08;持久化對象&#xff09;&#xff0c;DO&#xff08;領域對象&#xff09;&#xff0c;DTO&#xff08;數據傳輸對象&…

CKKS EXPLAINED, PART 3: ENCRYPTION AND DECRYPTION

CKKS EXPLAINED, PART 3: ENCRYPTION AND DECRYPTION Introduction 在之前的文章中&#xff0c;CKKS解釋了第二部分&#xff1a;完整的編碼和解碼&#xff0c;我們看到了如何實現CKKS的編碼器和解碼器&#xff0c;這使我們能夠將向量轉換為多項式&#xff0c;反之亦然。這一步…

笨辦法學 Python3 第五版(預覽)(三)

原文&#xff1a;Learn Python the Hard Way, 5th Edition (Early Release) 譯者&#xff1a;飛龍 協議&#xff1a;CC BY-NC-SA 4.0 練習 30&#xff1a;假如 這是你將要輸入的下一個 Python 腳本&#xff0c;它向你介紹了if語句。輸入這個代碼&#xff0c;確保它能夠完美運行…

怎么快速編輯視頻

背景&#xff1a;怎么簡單快速編輯視頻 利用FFmpeg功能&#xff0c;簡單快速編輯視頻&#xff0c;如按9:16提前剪切視頻、替換背景音樂。 下載FFmpeg&#xff1a;https://ffmpeg.org/download.html 將FFmpeg的路徑添加到環境變量中&#xff1a; Windows&#xff1a;在系統的環…