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

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

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

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

文章目錄

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

---

前言

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

---

一、上拉觸底事件

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

1、上拉觸底的概念

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

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

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

home.wxml

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

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

home.wxss

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

home.js

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

??來看一下演示效果：

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

3、配置上拉觸底距

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

home.json

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

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

二、自定義編譯模式

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

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

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

---

總結(jié)

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

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

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

更多專欄訂閱:

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

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

總結(jié)

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

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