微信小程序，使用scroll-view实现下拉加载更多（下一页）源码

共14个文件

js：4个

wxss：3个

json：3个

1星需积分: 50 119 浏览量 2017-08-05 16:10:13 上传评论 1 收藏 57KB ZIP 举报

在微信小程序开发中，"下拉加载更多"功能是一个常见的需求，它允许用户滚动到页面底部时自动加载新的数据，提供了更好的用户体验。本教程将详细解释如何使用`scroll-view`组件来实现这一功能。我们需要理解`scroll-view`组件在微信小程序中的作用。`scroll-view`是一个可滚动的视图容器，它支持水平和垂直滚动，适用于显示大量数据的场景。在实现下拉加载更多功能时，我们通常将其设置为垂直滚动，并监听`bindscrolltolower`事件，当用户滚动到内容区的底部时，该事件会被触发。以下是使用`scroll-view`实现下拉加载更多的步骤： 1. **布局设置**：在页面的`.wxml`文件中，添加`scroll-view`组件，并设置其属性`scroll-y`为`true`，表示允许垂直滚动。同时，可以设置`width`和`height`以适应内容区域。 ```html <scroll-view scroll-y="true" bindscrolltolower="loadMore">  </scroll-view> ``` 2. **事件处理**：在`.js`文件中，我们需要定义`loadMore`方法来处理`bindscrolltolower`事件。这个方法通常包括获取新数据的网络请求，以及将新数据添加到已有数据列表中。 ```javascript Page({ data: { items: [], // 存储加载的数据 }, onLoad: function() { // 初始化数据 }, loadMore: function() { // 模拟网络请求 wx.request({ url: 'https://api.example.com/getMoreData', // 替换为实际接口地址 method: 'GET', success: (res) => { if (res.statusCode === 200) { const newData = res.data; // 假设返回的新数据 this.setData({ items: [...this.data.items, ...newData], // 将新数据追加到旧数据列表 }); } }, }); }, }); ``` 3. **数据分页**：为了确保每次加载的是新的一批数据，你需要在服务器端实现分页逻辑。通常，通过传递页码或偏移量参数来实现。例如，请求参数可以包含`page`或`offset`字段，服务器根据这些参数返回对应页的数据。 4. **加载状态提示**：在实际应用中，加载过程中应显示加载状态，防止用户频繁触发加载。可以使用`wx.showLoading`和`wx.hideLoading`来控制加载提示的显示与隐藏。 5. **防止无限加载**：当没有更多数据可供加载时，需要停止`bindscrolltolower`事件的触发。可以通过设置一个标志变量，当数据达到一定数量或者服务器返回无更多数据的信号时，禁用`loadMore`方法。 6. **优化性能**：对于大量数据，可以使用虚拟列表（`virtual-list`组件）来提高性能。虚拟列表只渲染当前可视区域内的项，从而减少内存占用和渲染时间。利用微信小程序的`scroll-view`组件结合适当的事件监听和数据管理，可以轻松实现下拉加载更多功能。通过不断学习和实践，开发者可以更好地理解和运用这些技术，提升小程序的用户体验。

资源详情

资源评论

资源推荐

收起资源包目录

downMore.zip （14个子文件）

downMore

app.js 698B

utils

util.js 481B

image

oreder-desc.png 1KB

zhutu.jpg 70KB

pages

index

index.wxml 3KB

index.js 6KB

index.wxss 2KB

index.json 2B

logs

logs.wxml 194B

logs.js 280B

logs.wxss 114B

logs.json 56B

app.json 256B

app.wxss 81B

//index.js var app = getApp() Page({ /** * 页面的初始数据 */ data: { chooseGoods: {}, startDate: "", endDate: "", orderList: [],//订单列表 //假数据 dataList: { "count": 2,//总页数 "list": [ { "goods": [{ "number": 1, "flowers": [{ "flower_name": "花花" }], "order_good_id": "0e96b13e39ea49bcbce6c5ccee32ab4e", "good_id": "1585b32f67e04106b4c685dcec1aa556", "order_id": "5892d23092ec48b5976e80c71031f788", "good": { "good_display_img": "../../image/zhutu.jpg", "good_name": "小明", "good_price": 10, } }], "order_id": "5892d23092ec48b5976e80c71031f788", "totalprice": 120.00 }, { "goods": [ { "number": 1, "flowers": [{ "flower_name": "蓝" }], "order_good_id": "0caf434a5d1147838263c0fbcefcc2ef", "good_id": "b7b698cd4bde4e20915177de4367e75e", "order_id": "f3e4652572cb4ac59e29e53e3bbfb33f", "good": { "good_display_img": "../../image/zhutu.jpg", "good_price": 10, "good_name": "小炮", } }, { "number": 1, "flowers": [{ "flower_name": "ee" }], "order_good_id": "753313f00c6247a2982b654b3de97bd0", "good_id": "1585b32f67e04106b4c685dcec1aa556", "order_id": "f3e4652572cb4ac59e29e53e3bbfb33f", "good": { "good_display_img": "../../image/zhutu.jpg", "good_name": "小明", "good_price": 20, } }, { "number": 1, "flowers": [{ "flower_name": "绿" }], "order_good_id": "797ecaf6ec0241a1bce5b21443faff21", "good_id": "c32d93ea90f34ad2b458d3e5f2a9152f", "order_id": "f3e4652572cb4ac59e29e53e3bbfb33f", "good": { "good_display_img": "../../image/zhutu.jpg", "good_name": "德莱文", "good_price": 20, } }], "order_id": "f3e4652572cb4ac59e29e53e3bbfb33f", "totalprice": 120.00 }, { "goods": [ { "number": 3, "flowers": [{ "flower_name": "绿" }], "order_good_id": "358f6615483a440fa4c00001664aac1c", "good_id": "c32d93ea90f34ad2b458d3e5f2a9152f", "order_id": "01448473609247f894e2de4215124262", "good": { "good_display_img": "../../image/zhutu.jpg", "good_price": 20, "good_name": "德莱文", } }, { "number": 1, "flowers": [{ "flower_name": "花花" }], "order_good_id": "adf0d5d5c7bd480e9b26f21e7e869a45", "good_id": "1585b32f67e04106b4c685dcec1aa556", "order_id": "01448473609247f894e2de4215124262", "good": { "good_display_img": "../../image/zhutu.jpg", "good_price": 20, "good_name": "小明", } }], "order_id": "01448473609247f894e2de4215124262" , "totalprice": 120.00 } ] }, resultShow: false,//显示列表 orderCon: 0,//0表示商品 1表示用户 conId: '',//传过来的id windowHeight: '',//屏幕高度 scrollPd: false,//是否可滑动 scrollTop: 0,//设置srcoll-view距离顶部位置 top: 0,//当前滑块位置 page: 1,//当前页数 row: 3,//一页数量 showLoadding: false,//显示加载 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this; //获得屏幕高度 wx.getSystemInfo({ success: function (res) { that.setData({ windowHeight: res.windowHeight }) }, }) //动画 var animation = wx.createAnimation({ duration: 1000, timingFunction: "ease", delay: 0 }) animation.translateY(5).step(); this.setData({ animationData: animation.export() }) wx.setNavigationBarTitle({ title: '商品订单记录' }) //行数死数据、只有3行 var row=that.data.row; //获得数据默认第一页 that.queryOrdersByGood(1, row) }, /** * 操作数据 * * 由于是死数据，page只为判断是否还有下一页 */ queryOrdersByGood: function (page, row) { var that = this; var dataList = that.data.dataList;//假数据 var count = dataList.count;//总页数 var myList = dataList.list;//列 that.setData({ orderList: myList.concat(that.data.orderList),//拼接列表 resultShow: true,//显示数据 showLoadding: false,//去除加载提示 page: page,//存储当前页数，为是否有下一页做判断 }) //判断是否还有数据当前页小于总页数则可以下拉加载 if (parseInt(count) > parseInt(that.data.page)) { that.setData({ scrollPd: true,//显示滑块、允许下拉 }) } }, /** * 加载更多下一页 * */ loadMore: function () { var that = this; var thatData = this.data; var pd = thatData.scrollPd; if (pd) { //显示加载 wx.showToast({ title: '加载中...', duration: 100, icon: 'loading', }) //防止多次触发滑动到底部事件 that.setData({ scrollPd: false//禁止下拉 }) var page = thatData.page;//当前页数 var row = thatData.row;//数量 var pageAdd = parseInt(page) + 1;//下一页 that.setData({ showLoadding: true,//显示加载 }) that.queryOrdersByGood(pageAdd, row); } }, /** * 滑动事件 * */ scroll: function (e) { var that = this; that.setData({ top: e.detail.scrollTop }) }, })