• 💌 所属专栏：【微信小程序开发教程】

• 😀 作  者：我是夜阑的狗🐶

• 🚀 个人简介：一个正在努力学技术的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随手笔记】
• 🤩 【大数据学习笔记（华为云）】
• 🦄 【程序错误解决方法（建议收藏）】
• 🚀 【软件安装教程】

订阅更多，你们将会看到更多的优质内容！！

总结

以上是生活随笔为你收集整理的【微信小程序】-- 页面事件 - 上拉触底（二十六）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。