您现在的位置是:网站首页> 编程资料编程资料
微信小程序实现触底加载_javascript技巧_
2023-05-24
419人已围观
简介 微信小程序实现触底加载_javascript技巧_
现在来看小程序还没有使用pc端的那种分页格式,现在微信小程序上分页一般使用触底加载来实现分页的,下面就来分享一个触底加载的实现方式。
1.首先要从后端也就是服务器上获取分页的数据,如:每页多少条数据,一共分了多少页,大致内容如下图

既然有了数据,那就要在微信端去获取数据了
2.先不考虑分页,把获取到的数据直接显示到微信端
// pages/test/test.js //引入封装请求路径的模块 const orderApi = require('../../api/order') //设置当前页数和总页数 var nowPage = 2; var totalPage; Page({ /** * 页面的初始数据 */ data: { waitOrder:[] }, tapPaying: function (options) { //初始化 nowPage = 2 //查询的方法把查询路径统一封装在orderApi,userOrder是封装的路径名 //status: "wait", merchant: wx.getStorageSync('user').mId 是参数 orderApi.userOrder({ status: "wait", merchant: wx.getStorageSync('user').mId }).then((res) => { console.log(res) //获取总页数 totalPage = res.data.totalPages this.setData({ //把查询到的值赋给数组 waitOrder: res.data }) }).catch((err) => { console.log(err) }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.tapPaying() }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, })3.wxml文件
{{ev.customerName}} {{waitOrder.length}}
xcss样式就省略
4.前端显示如下:

5.写触底函数的方法
loadOtherWaitOrder() { if(nowPage <= totalPage){ orderApi.userOrder({ status: "wait", merchant: wx.getStorageSync('user').mId, page:nowPage, }).then((res) => { //每次执行自加1 nowPage += 1 let waitOrder = res.data.content let oldWaitOrder = this.data.waitOrder //把获取的新数组和旧的数组合并在一起 oldWaitOrder = oldWaitOrder.concat(waitOrder) this.setData({ waitOrder: oldWaitOrder }) }).catch((err) => { console.log(err) }) } },6.把写的触底函数的方法放入到onReachBottom: function () {} 页面上拉触底事件的处理函数中。
/** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { this.loadOtherWaitOrder() },7.现在在触底显示

到此微信小程序触底加载实现完成。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
您可能感兴趣的文章:
相关内容
- 微信小程序实现吸顶盒效果_javascript技巧_
- vue 动态添加el-input的实现逻辑_vue.js_
- 微信小程序scroll-view实现自定义滚动条_javascript技巧_
- React Native中实现动态导入的示例代码_React_
- vue elementui 实现搜索栏子组件封装的示例代码_vue.js_
- Navigator sendBeacon页面关闭也能发送请求方法示例_javascript技巧_
- 微信小程序左右滑动删除事件详解_javascript技巧_
- preload对比prefetch的功能区别详解_vue.js_
- vue单页面SEO优化的实现_vue.js_
- js实现让某个动作延迟几秒执行_javascript技巧_
