微信小程序下拉加载更多 小程序下拉刷新与加载更多-手机电子游戏网址

小程序开发

2021-06-09

  我们平时在浏览手机网页或者小程序内容的时候,经常会遇到内容很多时,需要通过下拉刷新或者上拉加载更多,来显示更多的内容,因此对于小程序项目的开发人员来说,这个功能是少不了的,因为能极大的提高用户的浏览体验,今天厦门在乎科技为大家带来小程序下拉刷新与加载更多功能介绍,一起来了解一下吧。

微信小程序下拉加载更多 小程序下拉刷新与加载更多


  小程序下拉刷新与加载更多:

  下拉刷新

  实现下拉刷新目前能想到的有两种方式

  1. 调用系统的api,系统有提供下拉刷新的api接口

  2. 监听scroll-view,自定义下拉刷新,还记得scroll-view里面有一个bindscrolltoupper属性吗?当滚动到顶部/左边,会触发 scrolltoupper 事件,所以我们可以利用这个属性,来实现下拉刷新功能。

  两种方法都可以,第一种比较简单,易上手,毕竟一些逻辑系统已经给你处理好了,第二种适合那种想要自定义下拉刷新样式的小程序,初识就用第一种,系统提供的就好。以手机电子游戏网址首页为例

  1. home.json 参数配置

  "enablepulldownrefresh": true

  我们哪个页面需要下拉刷新,就在哪个页面对应的xxx.json文件配置上面属性,这个属性从字面意思也可以知道,是否允许下拉刷新,当然,如何你不想一个个配置允许下拉刷新,你可以直接在全局变量app.json的window里面配置上面这个属性,这样整个项目都允许下拉刷新了,这个一定要加的,因为系统默认是不具备下拉刷新功能的

  2. home.js

  //下拉刷新

  onpulldownrefresh:function()

  {

  wx.shownavigationbarloading() //在标题栏中显示加载

  //模拟加载

  settimeout(function()

  {

  // complete

  wx.hidenavigationbarloading() //完成停止加载

  wx.stoppulldownrefresh() //停止下拉刷新

  },1500);

  },

  代码中的onpulldownrefresh 方法用于下拉刷新事件的监听,具体看一下里面的代码,wx.shownavigationbarloading() 与wx.hidenavigationbarloading() 这两句话是用来控制小菊花的显示和隐藏,由于我们现在还没有讲解网络请求,所以我就模拟了一下网络加载,通过settimeout方法,写一个时间延迟的方法,这个方法可以模拟网络加载所消耗的时间,还有就是当网络加载完成我们要停止下拉刷新wx.stoppulldownrefresh()

  这个到目前为止下拉刷新的功能已经完成了,但是还不够完美,还是有点怪怪的,就是下拉刷新没有动画,有木有~我那时也感到奇怪,微信封装的下拉刷新怎么可能这样呐,后来我参考别人写的代码,发现一个小坑,其实很简单,只需要一句话代码在app.json中window里配置下面属性,这个是配置整个系统的背景颜色,为什么我配置系统颜色就会出现下拉刷新了呐,原因就在下拉刷新的动画本身就有,只不过当我们没配置背景颜色,系统默认就为白色,动画也是白色,所以我们就看不到动画效果。

  "backgroundcolor": "#f0145a"


微信小程序下拉加载更多 小程序下拉刷新与加载更多


  加载更多

  实现加载更多也同理有两种方式

  1. 调用系统的api

  2. 监听scroll-view,bindscrolltolower滑动到底部的监听

  我还是拿第一种实现方式讲解,处理方式和下拉刷新略有不同,不过也大同小异吧,还是以手机电子游戏网址首页为例

  1. home.js

  //加载更多

  onreachbottom: function () {

  console.log('加载更多')

  settimeout(() => {

  this.setdata({

  ishideloadmore: true,

  recommends: [

  {

  goodid: 7,

  name: 'olay玉兰油精油沐浴露玫瑰滋养二合一450ml',

  url: 'bill',

  imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161213/148162245074.jpg',

  newprice: "¥36.60",

  oldprice: "¥40.00",

  },

  {

  goodid: 10,

  name: '兰蔻玫瑰清滢保湿柔肤水嫩肤水化妆水400ml补水保湿温和不刺激',

  url: 'bill',

  imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148057937593.jpg',

  newprice: "¥30.00",

  oldprice: "¥80.00",

  }, {

  goodid: 11,

  name: 'lancome/兰蔻清莹柔肤爽肤水/粉水400ml补水保湿玫瑰水化妆水',

  url: 'bill',

  imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148057953326.jpg',

  newprice: "¥30.00",

  oldprice: "¥80.00",

  },

  {

  goodid: 12,

  name: '美国clinique倩碧黄油无油/特效润肤露125ml',

  url: 'bill',

  imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/14805828016.jpg',

  newprice: "¥239.00",

  oldprice: "¥320.00",

  },

  {

  goodid: 13,

  name: '法国lancome兰蔻柔皙轻透隔离防晒乳霜50ml2017年3月到期',

  url: 'bill',

  imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148058014894.jpg',

  newprice: "¥130.00",

  oldprice: "¥180.00",

  },

  ],

  })

  }, 1000)

  }

  onreachbottom系统提供的触底事件的监听,和下拉刷新一样,我们也是模拟一些数据,加了一个时间延迟的事件,ishideloadmore,一个自定义的值,用来控制显示和隐藏加载控件

  2. home.wxml

        

            

            正在加载

          

  在home.wxml底部加入上面的代码,这是加载更多的控件,加载更多待遇就没下拉刷新待遇好,系统并没有提供加载更多的控件动画,所以我们需要自己制作

微信小程序下拉加载更多 小程序下拉刷新与加载更多


  以上就是今天为大家带来的关于“微信小程序下拉加载更多 小程序下拉刷新与加载更多”全部内容,下拉刷新和加载更多都是作为开发者需要掌握的内容,同时也是每个小程序和app都必须具备的功能,想要了解更多关于小程序开发的内容,欢迎关注厦门在乎科技-专注小程序、app、网站开发

即刻联系「在乎科技」专业项目经理为您提供产品咨询和项目报价!

contact us

联系手机电子游戏网址

联系电话:

131-6399-9993

电子邮箱:

公司地址:

厦门市思明区湖滨南路388号国贸大厦34d单元

公司地址