欢迎访问 如意编程网!

如意编程网

当前位置: 首页 > 编程资源 > 编程问答 >内容正文

编程问答

【微信小程序】-- 页面事件 - 上拉触底(二十六)

发布时间:2024/5/15 编程问答 1 豆豆
如意编程网 收集整理的这篇文章主要介绍了 【微信小程序】-- 页面事件 - 上拉触底(二十六) 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

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

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

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



订阅更多,你们将会看到更多的优质内容!!

总结

以上是如意编程网为你收集整理的【微信小程序】-- 页面事件 - 上拉触底(二十六)的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得如意编程网网站内容还不错,欢迎将如意编程网推荐给好友。