扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序实现本地分页加载
  • 930

0
分享到

微信小程序实现本地分页加载

2024-04-02 19:04:59 930人浏览 薄情痞子
摘要

本文实例为大家分享了微信小程序实现本地分页加载的具体代码，供大家参考，具体内容如下 先看看效果图： 下面附上代码：（这些图片的地址记得改成自己的） 1、js文件： // pages

本文实例为大家分享了微信小程序实现本地分页加载的具体代码，供大家参考，具体内容如下

先看看效果图：

下面附上代码：（这些图片的地址记得改成自己的）

1、js文件：

// pages/shoplist/shoplist.js
Page({
 
  
  data:{
 
    query:{},
    "list":[
      {
        "id":"1",
        "name":"apple",
        "image":"/shoplist_images/apple.png",
        "address":"砖井村",
        "tel":"18601416781"
      },
      {
        "id":"2",
        "name":"avocado",
        "image":"/shoplist_images/avocado.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"3",
        "name":"avocado_1",
        "image":"/shoplist_images/avocado_1.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"4",
        "name":"banana",
        "image":"/shoplist_images/banana.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"5",
        "name":"barbecue",
        "image":"/shoplist_images/barbecue.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"6",
        "name":"beer",
        "image":"/shoplist_images/beer.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"7",
        "name":"beer_mug",
        "image":"/shoplist_images/beer_mug.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"8",
        "name":"birthday_cake",
        "image":"/shoplist_images/birthday_cake.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"9",
        "name":"bone",
        "image":"/shoplist_images/bone.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"10",
        "name":"bottle",
        "image":"/shoplist_images/bottle.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"11",
        "name":"bowl",
        "image":"/shoplist_images/bowl.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"12",
        "name":"bread",
        "image":"/shoplist_images/bread.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"13",
        "name":"bread_2",
        "image":"/shoplist_images/bread_2.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"14",
        "name":"cake_1",
        "image":"/shoplist_images/cake_1.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"15",
        "name":"cake_2",
        "image":"/shoplist_images/cake_2.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"16",
        "name":"cake_3",
        "image":"/shoplist_images/cake_3.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"17",
        "name":"cake_4",
        "image":"/shoplist_images/cake_4.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"18",
        "name":"cake_5",
        "image":"/shoplist_images/cake_5.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"19",
        "name":"candy",
        "image":"/shoplist_images/candy.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"20",
        "name":"canned_fruit",
        "image":"/shoplist_images/canned_fruit.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"21",
        "name":"carrot",
        "image":"/shoplist_images/carrot.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"22",
        "name":"chafing_dish_2",
        "image":"/shoplist_images/chafing_dish_2.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"23",
        "name":"chafing_dish",
        "image":"/shoplist_images/chafing_dish.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"24",
        "name":"cheese",
        "image":"/shoplist_images/cheese.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"25",
        "name":"chef_hat",
        "image":"/shoplist_images/chef_hat.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"26",
        "name":"cherry",
        "image":"/shoplist_images/cherry.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"27",
        "name":"chicken",
        "image":"/shoplist_images/chicken.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"28",
        "name":"chicken_leg",
        "image":"/shoplist_images/chicken_leg.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"29",
        "name":"crab",
        "image":"/shoplist_images/crab.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"30",
        "name":"fish",
        "image":"/shoplist_images/fish.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"31",
        "name":"hamburger",
        "image":"/shoplist_images/hamburger.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"32",
        "name":"hot_pot",
        "image":"/shoplist_images/hot_pot.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"33",
        "name":"lemon",
        "image":"/shoplist_images/lemon.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"34",
        "name":"popcorn",
        "image":"/shoplist_images/popcorn.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"35",
        "name":"popcorn_2",
        "image":"/shoplist_images/popcorn_2.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"36",
        "name":"snacks",
        "image":"/shoplist_images/snacks.png",
        "address":"砖井村",
        "tel":"186"}],   
      i:0,//表示当前item项个数
      shoplist:[],
      result:[],
      isloading:false
    },
  
  onLoad(options) {
    this.setData
    ({
      query:options
    })
    this.getshoplist()
    
  },
  getshoplist()
  {
    //当页面加载完毕时停止继续发出请求
    if(this.data.i>this.data.result.length)
    {
      return wx.showToast({
        title: '数据加载完毕！',
        icon:'none'
      })
    }
    //防止多次下滑触底从而发出多次请求
    this.setData({isloading:true}),
    wx.showLoading({
      title: '数据加载中...',
    })
    this.data.shoplist=this.data.list.slice(this.data.i,this.data.i+10)
      this.setData({
        i:this.data.i + 10
        })
        this.data.result=this.data.result.concat(this.data.shoplist)
        this.setData({
          result:this.data.result
        })
        wx.hideLoading()
        this.setData({isloading:false})
  },
 
  
  onReady() {
    wx.setNavigationBarTitle({
      title: this.data.query.title,
    })
  },
 
  
  onShow() {
 
  },
 
  
  onHide() {
 
  },
 
  
  onUnload() {
 
  },
 
  
  onPullDownRefresh() {
 
  },
 
  
  onReachBottom() {
    if(this.data.isloading) return
    this.getshoplist()
  },
 
  
  onShareAppMessage() {
 
  }
})

2、JSON文件

{
  "usinGComponents": {},
  "onReachBottomDistance": 200
}

3、wxml文件

<!--pages/shoplist/shoplist.wxml-->
<view wx:for="{{result}}" wx:key="id" class="shop-item">
     <image src="{{item.image}}" class="thumb"></image>
  <view class="shop-item-item">
     <view class="shop-title">商品名:{{item.name}}</view>
     <view>店铺地址:{{item.address}}</view>
     <view>联系电话:{{item.tel}}</view>
  </view>
</view>

4、wxss文件


.shop-item{
  display:flex;
  border: 1rpx solid rgb(216, 194, 194);
  border-radius: 50rpx;
  margin: 15rpx;
  box-shadow: 1rpx 1rpx 15rpx rgb(146, 102, 102);
}
.thumb
{
  width: 320rpx;
  height: 320rpx;
  display: block;
  margin-right: 15rpx;
  padding: 15rpx;
}
.shop-item-item
{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 30rpx;
}
.shop-title
{
  font-weight: bold;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

--结束END--

本文标题: 微信小程序实现本地分页加载

本文链接: https://lsjlt.com/news/165913.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 微信小程序实现本地分页加载
    本文实例为大家分享了微信小程序实现本地分页加载的具体代码，供大家参考，具体内容如下 先看看效果图： 下面附上代码：（这些图片的地址记得改成自己的） 1、js文件： // pages...
    99+
    2024-04-02
  • 微信小程序实现瀑布流分页滚动加载
    本文实例为大家分享了微信小程序实现瀑布流分页滚动加载的具体代码，供大家参考，具体内容如下 两种分页方式 普通的分页效果会在页面底部提供点击下一页和上一页的按钮，在点击了按钮之后才会触...
    99+
    2024-04-02
  • 微信小程序如何加载分包页面
    小程序分包加载实例{"pages": ["pages/index", "pages/shopcart"],"subpackages":&nb...
    99+
    2024-04-02
  • 微信小程序加载本地图片的方法
    微信小程序加载本地图片的方法:1、在微信开发工具中打开项目。2、新建一个文件夹并将图片放到这个目录下。3、用style样式的方式或image标签的相对路径去访问图片，实现加载本地图片。具体操作步骤:首先，打开微信开发工具，再打开项目。如下图...
    99+
    2024-04-02
  • 微信小程序实现触底加载
    现在来看小程序还没有使用pc端的那种分页格式，现在微信小程序上分页一般使用触底加载来实现分页的，下面就来分享一个触底加载的实现方式。 1.首先要从后端也就是服务器上获取分页的数据，如...
    99+
    2024-04-02
  • 微信小程序实现分页功能
    本文实例为大家分享了微信小程序实现分页的具体代码，供大家参考，具体内容如下 今天被提了个需求，需要小程序上实现分页，搜索能力不行，没找到demo，自己想了一下逻辑然后，就自己写了，不...
    99+
    2024-04-02
  • 微信小程序开发使用onreachBottom实现页面触底加载及分页
    目录 一 简要介绍一下onreachBottom事件  二  实例展示  三 遇到的一些问题 一 简要介绍一下onreachBottom事件         onreachBottom和onLoad以及onShow一样，都属于小程序的生...
    99+
    2023-10-09
    微信小程序 前端 小程序
  • 微信小程序使用onreachBottom实现页面触底加载及分页效果
    目录一 简要介绍一下onreachBottom事件二  实例展示三 遇到的一些问题总结一 简要介绍一下onreachBottom事件 onreachBottom和onLoa...
    99+
    2022-11-13
    小程序页面触底加载及分页显示 小程序分页加载 微信小程序触底加载
  • 微信小程序怎么实现触底加载
    这篇文章主要介绍“微信小程序怎么实现触底加载”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“微信小程序怎么实现触底加载”文章能帮助大家解决问题。首先要从后端也就是服务器上获取分页的数据，如：每页多少条...
    99+
    2023-07-02
  • 微信小程序如何重新加载页面
    微信小程序有提供一个下拉刷新的功能，操作步骤如下：打开小程序。点击右上角的“···”。会弹出一些功能信息，选择“刷新”即可。...
    99+
    2024-04-02
  • 微信小程序实现分页查询详解
    目录创建自定义连接器云开发介绍分页实现思路使用连接器为什么要自定义分页功能日常小程序经常需要分页查询的功能，本篇我们讲解一下低代码中如何实现分页查询的功能。要自己开发分页功能，可以先...
    99+
    2022-11-13
    微信小程序分页查询 小程序分页功能
  • 微信小程序实现列表分页功能
    微信小程序列表分页功能（未使用API），供大家参考，具体内容如下 概述 主要实现功能： 1.列表展示2.上下页点击 效果图： 知识点：wx:for、bindtap、生命周期函数&n...
    99+
    2024-04-02
  • 微信小程序中如何实现上拉加载
    这篇文章主要为大家展示了“微信小程序中如何实现上拉加载”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“微信小程序中如何实现上拉加载”这篇文章吧。上拉加载（分页加载...
    99+
    2024-04-02
  • 微信小程序图片懒加载如何实现
    这篇文章主要介绍“微信小程序图片懒加载如何实现”，在日常操作中，相信很多人在微信小程序图片懒加载如何实现问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”微信小程序图片懒加载如何实现”的疑惑有所帮助！接下来，请跟...
    99+
    2023-06-26
  • 微信小程序实现表格前后台分页
    微信小程序前台分页（样式可以根据自己实际需要调整），供大家参考，具体内容如下 直接上代码，这个其实也可以调整为后台分页,但是后面会写一个后台分页的例子，根据实际需要选择吧数据是写在d...
    99+
    2024-04-02
  • 微信小程序如何使用JS加载esmap地图
    小编给大家分享一下微信小程序如何使用JS加载esmap地图，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！一、在微信小程序里显示室...
    99+
    2024-04-02
  • 微信小程序如何实现本地数据存储
    这篇文章给大家分享的是有关微信小程序如何实现本地数据存储的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。微信小程序 本地数据存储实例详解前言如果您在看此文章之前有过其他程序的开发经...
    99+
    2024-04-02
  • 微信小程序实现登录页面
    本文实例为大家分享了微信小程序实现登录页面的具体代码，供大家参考，具体内容如下 实现在进入微信小程序首页前的登录验证页面，这里有两种方法，但其实原理都是一样的。 1. 在首页中加入一...
    99+
    2024-04-02
  • 微信小程序实现商品分类页过程结束
    首先我们来分析下UI小妹发来的产品原型图： 微信小程序商品分类页需要实现 1.单击左边的商品类目，右侧实现联动跳转到对应商品类目标题； 2.触屏拖动右侧商品列表，右侧跳转到对应商品类...
    99+
    2023-05-20
    微信小程序商品分类页 小程序商品分类
  • 微信小程序如何实现图片预加载组件
    这篇文章主要为大家展示了“微信小程序如何实现图片预加载组件”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“微信小程序如何实现图片预加载组件”这篇文章吧。网页中的图...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作