微信小程序加载更多 点击查看更多

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

微信小程序加载更多，是将之前的数据和点击加载后请求的数据用concat拼接在一起并执行setData，下面是一个简单的栗子：

index.wxml代码如下

<view wx:for="{{duanziInfo}}" wx:for-item="name" wx:for-index="id">
 <view class="duanzi-view">
 <view class="duanzi-content">
 <text class="dz-content">{{name.content}}</text>
 </view>
 </view>
</view>
<view class="button-wrapper">
 <button type="default" size="default" loading="{{loading}}" disabled="{{disabled}}" bindtap="setLoading">
 {{loadText}}
 </button>
</view>

加载更多按钮绑定setLoading

index.js文件代码如下

Page({
 data: {
  loadText:'加载更多',
  duanziInfo:[]
 },
 //初始化请求
 onLoad: function (res) {
 var that = this
 //内容
 wx.request({
  url: 'http://xxxxx.com/index.php?m=Industry&a=getDuanziInfo',
  data: {token:token},
  method: 'GET',
  success: function(res){
  console.log(res.data.result) //打印初始化数据
  that.setData({
  duanziInfo:res.data.result
  })
  }
 })
 },
 //加载更多
 setLoading: function(e) {
 var duanziInfoBefore = this.data.duanziInfo
 var that = this
 wx.showToast({ //期间为了显示效果可以添加一个过度的弹出框提示“加载中”
  title: '加载中',
  icon: 'loading',
  duration: 200
  })
 wx.request({
  url: 'http://xxxxx.com/index.php?m=Industry&a=getDuanziInfo',
  data: {token:token},
  method: 'GET',
  success: function(res){
  console.log(duanziInfoBefore.concat(res.data.result)) //打印拼接之后数据
  that.setData({
  loadText:"数据请求中",
  loading:true,
  duanziInfo:duanziInfoBefore.concat(res.data.result),
  loadText:"加载更多",
  loading:false,
  })
  }
 })
 }
})

初始化和加载更多中的打印数据如下

（以上是点击查看更多，还可以根据距离视图区域的距离来加载更多，具体实现是将视图用<scroll-view>标签，并给其一个固定高度，在给定参数中设置距离像素触发事件。具体文档：https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html?t=20161122）

为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。

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

赞 (0)

相关推荐

  • 微信小程序 loading（加载中提示框）实例

    微信小程序 loading（加载中提示框）实例

    微信小程序 加载提示框: loading只有一个属性hidden .wxml <view> <loading hidden="{{hidden}}"> 加载中... </loading> <button bindtap="changeHidden">show/hidden</button> </view> .js Page({ data:{ hidden:true }, changeHidden

  • 微信小程序 scroll-view实现上拉加载与下拉刷新的实例

    微信小程序 scroll-view实现上拉加载与下拉刷新的实例

    微信小程序 scroll-view实现上拉加载与下拉刷新的实例 实现效果图: 如图,使用小程序的scroll-view实现的上拉加载数据,下拉刷新数据,试下代码如下: js文件代码: var url = "http://192.168.30.4:8080/gtxcx/carrier/getCarrier.action"; var page = 1; var GetList = function (that) { that.setData({ hidden: false }); wx.r

  • 微信小程序 图片加载（本地，网路）实例详解

    微信小程序 图片加载（本地，网路）实例详解

    在微信小程序中,要显示一张图片,有两种图片加载方式: 加载本地图片 加载网络图片 加载本地图片 <image class="widget__arrow" src="/image/arrowright.png" mode="aspectFill"> </image> src="/image/arrowright.png" 这句就是加载本地图片资源的.想想iOS中的加载本地图片,imageName:,类似.

  • 微信小程序scroll-view实现横向滚动和上拉加载示例

    微信小程序scroll-view实现横向滚动和上拉加载示例

    今天介绍微信小程序中scroll-view实现横向滚动和上拉加载的实现及需要注意的地方. 先看最终效果. 横向滚动 1.设置滚动项display:inline-block; 2.设置滚动视图容器white-space: nowrap; 3.滚动项不要用float 为什么会有以上三点要求呢? 其实横向滚动官方文档中是没有做太多说明的,只说明需要定义scroll-view滚动方向scroll-x=true允许横向滚动,但是我在实践的时候我发现,你要横向滚动,首先你得是一排吧.所以才发现需要定义滚动项

  • 微信小程序 详解下拉加载与上拉刷新实现方法

    微信小程序 详解下拉加载与上拉刷新实现方法

    微信小程序下拉刷新上拉加载的两种实现方法 实现效果图: 方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性             属性   类型                           描述 enablePullDownRefresh Boolean 是否开启下拉刷新,详见页面相关事件处理函数. 设置js里onPullDownRefresh和onReachBottom方法 属性    类

  • 微信小程序实战之上拉（分页加载）效果（2）

    微信小程序实战之上拉（分页加载）效果（2）

    上拉加载(分页加载) 当用户打开一个页面时,假设后台数据量庞大时,一次性地返回所有数据给客户端,页面的打开速度就会有所下降,而且用户只看上面的内容而不需要看后面的内容时,也浪费用户流量,基于优化的角度来考虑,后台不要一次性返回所有数据,当用户有需要再往下翻的时候,再加载更加数据出来. 业务需求: 列表滚动到底部时,继续往上拉,加载更多内容 必备参数: (1)pageindex: 1 //第几次加载 (2)callbackcount: 15 //需要返回数据的个数 其他参数: 根据接口的所需参数

  • 微信小程序（六）：列表上拉加载下拉刷新示例

    1.列表(本部分内容出入官方文档) 对于这个功能,微信小程序中并没有提供类似于Android中listview性质的控件,所以我们需要使用 wx:for 控制属性绑定一个数组,用数组中各项的数据重复渲染该组件,来达到列表的效果. <view wx:for="{{array}}"> {{index}}: {{item.message}} </view> Page({ data: { array: [{ message: 'foo', }, { message: '

  • 详解微信小程序开发之下拉刷新 上拉加载

    详解微信小程序开发之下拉刷新 上拉加载

    微信小程序中的下拉刷新,上拉加载的功能很常见,目前我知道的有两种可行的方法,一是scroll-view,二是整个页面刷新.今天说说第一种,自己造轮子,难免有些瑕疵,日后慢慢完善. 上gif: 原理: scroll-view中有监听滑动的方法,这个跟Android类似.其中用到了滑动到顶部,滑动到底部的方法. 1.下拉刷新,在滑动到顶部时,bindscrolltoupper被调用,根据自己的业务逻辑请求即可.我的demo只是随机换了个关键字. 2.上拉加载,在滑动到底部时,bindscrollto

  • 微信小程序 加载 app-service.js 错误解决方法

    微信小程序开发过程中出现错误,经过一番思考解决此问题,这里给大家提醒下! 加载 app-service.js 错误 WAService.js:2 不要在 undefined.js 注册多个Page APP-SERVICE-Engine:Please do not register multiple Page in undefined.js 开始新建一个小程序,结果报这么多错误. 但是我点击到编辑页查看的时候,没有pages,utils呀.. 进入app.js没有注册多个page呀. 感觉很奇怪,

  • 微信小程序加载更多 点击查看更多

    微信小程序加载更多 点击查看更多

    本文实例为大家分享了微信小程序加载更多功能实现的具体代码,供大家参考,具体内容如下 微信小程序加载更多,是将之前的数据和点击加载后请求的数据用concat拼接在一起并执行setData,下面是一个简单的栗子: index.wxml代码如下 <view wx:for="{{duanziInfo}}" wx:for-item="name" wx:for-index="id"> <view class="duanzi-vie

  • 微信小程序加载机制及运行机制图解

    微信小程序加载机制及运行机制图解

    这篇文章主要介绍了微信小程序加载机制及运行机制图解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一.运行机制 冷启动指的是重新启动,热启动指的是5分钟内从后台切换到前台,只有冷启动才能加载最新的包. 小程序什么时候会关闭? 5min后台运行,连续收到两次(2s)系统告警. 二.加载机制 三.小程序的应用生命周期 四.小程序页面的生命周期 分类: 小程序以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.

  • 微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能（函数防抖）

    一.函数节流(throttle) **函数节流:一个函数执行一次后,只有大于设定的执行周期后才会执行第二次**.有个需要频繁触发函数,出于优化性能角度,在规定时间内,只让函数触发的第一次生效,后面不生效. ### 1.如何实现 其原理是用时间戳来判断是否已到回调该执行时间,记录上次执行的时间戳,然后每次触发 scroll 事件执行回调,回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段,如果是,则执行,并更新上次执行的时间戳,如此循环: function throttle(fn

  • 微信小程序防止多次点击跳转（函数节流）

    微信小程序防止多次点击跳转（函数节流）

    场景 在使用小程序的时候会出现这样一种情况:当网络条件差或卡顿的情况下,使用者会认为点击无效而进行多次点击,最后出现多次跳转页面的情况,就像下图(快速点击了两次): 解决办法 然后从 轻松理解JS函数节流和函数防抖 中找到了解决办法,就是函数节流(throttle):函数在一段时间内多次触发只会执行第一次,在这段时间结束前,不管触发多少次也不会执行函数. /utils/util.js: function throttle(fn, gapTime) { if (gapTime == null ||

  • 微信小程序地图(map)组件点击(tap)获取经纬度的方法

    微信小程序中使用地图(map)组件,通过点击(tap)获取经纬度,按照官方的回应,暂时是没法做到的,从地图组件API多有残缺判断,怀疑是个实习生干的... 做个变通,适用性有限,请大家参考.基本思路就是在地图上铺满一层marker,从而通过点击marker获得经纬度. 复制代码 代码如下: <map id="map" longitude="102.324520" latitude="40.099994" scale="4"

  • 如何在微信小程序中使用骨架屏的步骤

    本文介绍了微信小程序中使用骨架屏,分享给大家,具体如下: 先上效果图 ​ 骨架屏主要起到占位作用,向用户说明该区域有内容,有一定的心理准备. 聊聊背景:刚上线一款小程序,随着上架的东西越来越多,微信小程序加载越来越慢,会出现一段时间的白屏(大概2-3s),这对用户体验上来讲特别不友好.所以在网上开始找这方面的资料,骨架屏主要分为两种方案,下面来说说这两种方案. 1.为每个需要使用骨架屏的页面定制一套静态页面.这种方法缺点很明显,需要为每个页面单独定制,布局如果修改则需要同时修改两个页面,增加了维

  • 微信小程序如何加载数据库真实数据的实现

    微信小程序要加载网站数据库里面的真实数据,有一个硬性的要求,就是你的网站域名必须是https协议才行,要不然你第一步服务器域名配置你都通过不了,小编我也是前不久申请的https://www.100txy.com,具体申请步骤大家自行去申请吧,这里我就不做过多的介绍.下面我就以加载我博客素材最新的6条数据为案例来分析,下面是详细步骤. 一.进入小程序后台配置https服务器域名 二.程序中写好调用的数据,并返回json格式 //获取素材列表接口,该方法位于Application\Home\Cont

  • 微信小程序实现的点击按钮 弹出底部上拉菜单功能示例

    微信小程序实现的点击按钮 弹出底部上拉菜单功能示例

    本文实例讲述了微信小程序实现的点击按钮 弹出底部上拉菜单功能.分享给大家供大家参考,具体如下: index.wxml <button type="default" bindtap="actionSheetTap">弹出action sheet</button> <action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetbindch

随机推荐