• 💌 所屬專欄：【微信小程序開發教程】

• 😀 作??者：我是夜闌的狗🐶

• 🚀 個人簡介：一個正在努力學技術的CV工程師，專注基礎和實戰分享 ，歡迎咨詢！

• 💖 歡迎大家：這里是CSDN，我總結知識的地方，喜歡的話請三連，有問題請私信 😘 😘 😘

文章目錄

• 前言
• 一、上拉觸底事件
• • • 1、上拉觸底的概念
    • 2、監聽頁面的上拉觸底事件
    • 3、配置上拉觸底距
• 二、自定義編譯模式
• 總結

---

前言

??大家好，又見面了，我是夜闌的狗🐶，本文是專欄【微信小程序開發教程】專欄的第26篇文章;
??今天開始學習微信小程序的第14天💖💖💖，開啟新的征程，記錄最美好的時刻🎉，每天進步一點點。
??專欄地址：【微信小程序開發教程】， 此專欄是我是夜闌的狗微信小程序開發過程的總結，希望能夠加深自己的印象，以及幫助到其他的小伙伴😉😉。
??如果文章有什么需要改進的地方還請大佬不吝賜教👏👏。

---

一、上拉觸底事件

??前面已經學習了頁面事件-下拉刷新，通過栗子學習了開啟下拉刷新效果的兩種方式，以及下拉監聽函數和停止下拉效果，在模擬器上會自動停止下拉效果，而真機上不會，所以在下拉監聽函數要記得加上停止下拉效果。接下來就來學習一下另外一個頁面事件–上拉觸底。話不多說，讓我們原文再續，書接上回吧。

1、上拉觸底的概念

??不用說了，肯定是移動端的專有名詞，指的就是通過手指在屏幕上的下拉滑動操作，從而重新加載頁面數據的行為。在實際開發過程中，上拉觸底更多的是為了實現數據的分頁。

2、監聽頁面的上拉觸底事件

??在頁面的 .js 文件中，通過 onReachBottom() 函數即可監聽當前頁面的上拉觸底事件。老樣子，開始敲吧。

home.wxml

??首先創建比較長的 view 組件，用于滑動。

<view class="box"></view>

home.wxss

.box {height: 2000rpx;background-color: antiquewhite; }

home.js

/*** 頁面上拉觸底事件的處理函數*/onReachBottom() {console.dir("你打了夜闌的狗一巴掌，完了你，現在就搖人");},

??來看一下演示效果：

??快到頁面底部的時候，就觸發上拉觸底監聽，打印log。同時還有這么個情況，當反復在頁面底部進行滑動時，這個log會一直反復打印。在實際開發過程中，這是不應該出現的，所以需要做截流處理。
??同一時間只允許發起一個請求來獲取下一個的數據，當上一個請求沒有完成的時候，是不允許下一個請求發起的。

3、配置上拉觸底距

??前面也學習過上拉觸底距離，這里再來回顧一下吧，指的是觸發上拉觸底事件時，滾動條距離頁面底部的距離。
??可以在全局或頁面的 .json 配置文件中，通過 onReachBottomDistance 屬性來配置上拉觸底的距離。小程序默認的觸底距離是 50px，在實際開發中，可以根據自己的需求修改這個默認值。通過栗子來學習一下，具體代碼如下：

home.json

{"usingComponents": {},"onReachBottomDistance": 200 }

??當上拉到距離 200px 的時候，就觸發上拉觸底監聽，可以來看下實際運行效果：

二、自定義編譯模式

??在實際開發過程中，當對 contact 頁面（非首頁）改動時，點擊編譯會先彈到首頁，然后在點擊跳轉到 contact 頁面，這個過程十分麻煩。這里就可以通過自定義編譯模式來選擇編譯后第一個顯示的頁面。
??首先打開普通編譯，選擇添加編譯模式。

??在自定義編譯模式中，還可以選擇頁面的啟動參數，啟動頁面選擇想要的頁面即可。

??這樣基本上就設置好，每次編譯的時候就自動跳轉到 contact 頁面，并且還會帶有啟動參數。

---

總結

??感謝觀看，這里就是頁面事件 - 上拉觸底的介紹使用，如果覺得有幫助，請給文章點個贊吧，讓更多的人看到。🌹 🌹 🌹

??也歡迎你，關注我。👍 👍 👍

??原創不易，還希望各位大佬支持一下，你們的點贊、收藏和留言對我真的很重要！！！💕 💕 💕 最后，本文仍有許多不足之處，歡迎各位認真讀完文章的小伙伴們隨時私信交流、批評指正！下期再見。🎉

更多專欄訂閱:

• 😀 【LeetCode題解（持續更新中）】
• 🚝 【Java Web項目構建過程】
• 💛 【微信小程序開發教程】
• ? 【JavaScript隨手筆記】
• 🤩 【大數據學習筆記（華為云）】
• 🦄 【程序錯誤解決方法（建議收藏）】
• 🚀 【軟件安裝教程】

訂閱更多，你們將會看到更多的優質內容！！

總結

以上是生活随笔為你收集整理的【微信小程序】-- 页面事件 - 上拉触底（二十六）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。