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

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

• 🚀 個人簡介：一個正在努力學(xué)技術(shù)的CV工程師，專注基礎(chǔ)和實(shí)戰(zhàn)分享 ，歡迎咨詢！

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

文章目錄

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

---

前言

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

---

一、上拉觸底事件

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

1、上拉觸底的概念

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

2、監(jiān)聽頁面的上拉觸底事件

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

home.wxml

??首先創(chuàng)建比較長的 view 組件，用于滑動。

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

home.wxss

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

home.js

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

??來看一下演示效果：

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

3、配置上拉觸底距

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

home.json

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

??當(dāng)上拉到距離 200px 的時(shí)候，就觸發(fā)上拉觸底監(jiān)聽，可以來看下實(shí)際運(yùn)行效果：

二、自定義編譯模式

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

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

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

---

總結(jié)

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

??也歡迎你，關(guān)注我。👍 👍 👍

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

更多專欄訂閱:

• 😀 【LeetCode題解（持續(xù)更新中）】
• 🚝 【Java Web項(xiàng)目構(gòu)建過程】
• 💛 【微信小程序開發(fā)教程】
• ? 【JavaScript隨手筆記】
• 🤩 【大數(shù)據(jù)學(xué)習(xí)筆記（華為云）】
• 🦄 【程序錯誤解決方法（建議收藏）】
• 🚀 【軟件安裝教程】

訂閱更多，你們將會看到更多的優(yōu)質(zhì)內(nèi)容！！

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。