【微信小程序】上拉触底事件

上拉触底

手指在屏幕上的上拉滑动操作从而加载更多数据

页面上拉触底事件触发时距页面的距离 默认50px (滚动条距离底部的距离 自动加载更多数据)"onReachBottomDistance" : Number

页面相关事件处理函数

Page({data:{},// 监听上拉触底事件onReachBottom(){console.log('上拉触底');}
})

配置上拉触底距离

{"usingComponents": {},"onReachBottomDistance" : 100
}

上拉触底设置节流

Page({data:{  colorList:[],// 1.在data中设置节流阀 isLoading false(没有请求数据) / true(正在请求数据)isLoding:false},// 2.在监听上拉触底事件中执行的函数里面修改isLoading的值getColors(){// 将节流阀设置为 truethis.setData({isLoding:true})wx.showLoading({title: '加载中。。。。。。'})wx.request({url: 'https://www.escook.cn/api/color',method:"GET",success:({data:res})=>{console.log(res);this.setData({colorList:[...this.data.colorList,...res.data]})},complete:()=>{wx.hideLoading()// 将节流阀设置为 falsethis.setData({isLoding:false})}})},// 3.在onReachBottom中判断节流阀的值 对数据进行控制onReachBottom: function () {// true 阻止请求if(this.data.isLoding){return}else{// false 发起请求this.getColors()}},
})

【微信小程序】上拉触底事件相关推荐

微信小程序上拉触底事件函数onReachBottom不触发的解决方案
造成不触发的原因可能有以下几种情况配置属性问题高度问题滚动条不在顶部需要回到顶部重新计算高度 onReachBottom函数被覆盖 1.配置属性问题在app.json或者本页的json文件中 ...
微信小程序上拉触底案例添加loading效果
在上拉触底的时候如何添加小程序的loading效果呢??就是左边现实的效果.有一个转动的圈圈首先我们打开.js文件在原有的请求颜色的基础上添加wx.showLoading getColors(){ ...
【微信小程序】-—下拉刷新、上拉触底事件详细讲解
1.页面事件–下拉刷新事件 1.1什么是下拉刷新下拉式移动端的专有名词,指的是通过手指子在屏幕上的下拉滑动操作,从而重新加载页面数据 2.启动下拉刷新 (1)方法一:全局开启下拉刷新在app.js ...
微信小程序特殊布局下，页面上拉触底事件onReachBottom无法触发解决方法
一.js import fn from '../../utils/functions.js'; // 你自己封装的方法集 Page({data: {list: [],page: 1,loading: ...
微信小程序分页功能（上拉触底事件）
js核心代码 Page({data: {// 前台显示listshowlist: [],// 当前页pageNumber: 1,// 总页数totalPage: 1,},onLoad: functio ...
微信小程序上拉加载流程
微信小程序上拉加载流程 1.首先需要在微信官方文档把scroll-view这个方法引入进来,然后使用这个方法,在样式里面写scroll-y,代表的是上下滑动,然后给滑动的盒子一个高度,100vh,然后 ...
微信小程序上拉刷新下拉加载
// pages/order/order.js Page({/*** 页面的初始数据*/data: {goods:[],page:1},/*** 生命周期函数--监听页面加载*/ 与端口之间链接,调用 ...
微信小程序---上拉/下拉获取信息组件
1. 前端 1.1 app.json配置(默认不支持下拉) 局部配置,如果想全局都可以下拉,那配置在全局的app.json即可 {"enablePullDownRefresh": ...
微信小程序上拉加载更多
微信小程序上拉加载更多无论是微信小程序还是其他前端框架,都会遇到上拉加载(懒加载)和下拉刷新这种问题.其实理清楚什么时候请求数据.请求返回的几种情况,那么做这个懒加载就很简单了. 一.首先,固定一个 ...

【微信小程序】上拉触底事件

上拉触底

【微信小程序】上拉触底事件相关推荐

最新文章

热门文章

【 微信小程序 】上拉触底事件

上拉触底

【 微信小程序 】上拉触底事件相关推荐

最新文章

热门文章

【微信小程序】上拉触底事件

【微信小程序】上拉触底事件相关推荐