文档章节

了解微信小程序下拉刷新功能

oixxan__
 oixxan__
发布于 06/20 02:04
字数 579
阅读 13
收藏 0

小程序提供了这个事件。

onPullDownRefresh()

监听用户下拉刷新事件。

如果要开启下拉刷新功能,要先到json配置:

"enablePullDownRefresh":true

配置后下拉有反应了但是没有加载效果,在onPullDownRefresh()事件介绍那里没有提到,在全局配置那里提到。

backgroundTextStyle

在json内加

"backgroundTextStyle": "dark"

下拉就有加载效果了。

 

现在做一个例子。

直接在js的Page上面定义一个数据当外部数据。


var mydata=[
      {name:'苹果'},
      { name: '香蕉' },
      { name: '菠萝' },
      { name: '雪梨' },
      { name: '葡萄' },
      { name: '荔枝' },
      { name: '芒果' },
      { name: '哈密瓜' },
      { name: '西瓜' },
      { name: '橙子' },
      ]

Page的data里面;


data: {
    fruits: [],
  },

在onload里面选取5个数据,即是页面显示5个数据。到时下拉再显示剩下的数据。

let f = []
    for (let i = 0; i < 5; i++){
      f[i]= mydata[i].name
  }
   this.setData({
      fruits:f,
    })

在wxml页面里,支持for循环。


<view wx:for='{{fruits}}' wx:key='index' class="fruit">
{{item}}
</view>

wxss定义一下显示样式,加边框字体框内居中;

.fruit{
  display: flex;
  margin: 10rpx;
  padding:10rpx 10rpx;
  align-content: center;
  justify-content: center;
  width: 150rpx;
  border: 1px solid #000
}

保存如图;

现在到xx.js找到
onPullDownRefresh事件
在里面写上下拉刷新显示剩下的数据。取到剩下的数据加到原数据上。

let f = []
    let d=0
    for (let i = 5; i < mydata.length; i++) {
      f[d] = mydata[i].name
      d++
    }
    
    this.setData({
      fruits: this.data.fruits.concat(f),
    })

这样一点下拉就将剩下的数据显示出来了,但是没有开始加载效果,和结束加载效果(在模拟器可能看不到明显效果,用手机测试效果就明显了)。加上如下代码。

wx.showNavigationBarLoading()//开始加载效果
wx.hideNavigationBarLoading()//完成停止加载
wx.stopPullDownRefresh() //停止下拉刷新

onPullDownRefresh内完整代码;

wx.showNavigationBarLoading();
    let f = []
    let d=0
    for (let i = 5; i < mydata.length; i++) {
      f[d] = mydata[i].name
      d++
    }
    
    this.setData({
      fruits: this.data.fruits.concat(f),
    })
    wx.hideNavigationBarLoading()//完成停止加载
    wx.stopPullDownRefresh() //停止下拉刷新

如图;

这样完成了下拉刷新加载效果。

最近了解了一下微信小程序开发,能力有限,顺便做了个简易画板小程序

 

 

© 著作权归作者所有

oixxan__
粉丝 3
博文 62
码字总数 32139
作品 0
广州
私信 提问
wx-jq:一套完全原创的微信小程序插件集合库

wx-jq (一套完全原创的微信小程序插件集合库) 微信小程序插件,微信小程序组件,微信小程序插件集合,微信小程序组件集合,微信小程序插件学习,微信小程序插件开发, 在线演示: 下载地址...

透笔度
2018/01/25
644
2
微信小程序之下拉刷新,上拉更多列表实现

代码地址如下: http://www.demodashi.com/demo/11110.html 一、准备工作 首先需要下载小程序开发工具 官方下载地址: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 目...

demo大师
2018/10/05
0
0
浅谈微信小程序中的下拉刷新和上拉加载

下拉刷新和上拉加载是业务上一个很常见的需求,在微信小程序里,提供了下拉刷新的方法 。而实现上拉加载相对来说就比较不方便了。 下拉刷新 虽然微信的官方文档有很多坑,但下拉刷新介绍的还...

2018/02/05
0
0
uni-app跨端开发框架介绍

uni-app 一套代码,多端运行 使用vue的语法 + 微信小程序的标签和API的跨平台前端框架 框架简介: 可编译到iOS、Android、H5、微信/支付宝/百度/小程序 将常用的组件和API进行了跨平台的封装...

tenyiyi
04/18
0
0
微信小程序之上拉加载与下拉刷新

在移动端,随着手指不断向上滑动,当内容将要到达屏幕底部的时候,页面会随之不断的加载后续内容,直到没有新内容为止(我们是有底线的-o-),我们称之为上拉加载,从技术角度来说,也可以称...

一斤代码
2018/03/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

拥有有趣灵魂的程序员们,程序员访谈(一)

点击上方关注我们,让小care关爱你! 程序员群体一直都是低调多金的代表,而近段时间以来,程序员在网络上除了高薪之外,总是会和屌丝、苦逼、格子衫、没情趣...联系在一起。黑程序员的段子也...

ITCare
今天
29
0
Linux输入法fcitx的安装问题

Fcitx 总共要安装的包如下 fcitxfcitx-binfcitx-config-commonfcitx-config-gtk | fcitx-config-gtk2fcitx-datafcitx-frontend-allfcitx-frontend-gtk2fcitx-frontend-gtk3......

CHONGCHEN
今天
18
0
网络基础

前言: 最近整理一些以前的学习笔记(有部分缺失,会有些乱,日后再补)。 过去都是存储在本地,此次传到网络留待备用。 计算机网络的功能: 1.数据通信; 2.资源共享; 3.增加数据可靠性; 4....

迷失De挣扎
今天
14
0
spring boot升级到spring cloud

1、先升级spring boot 版本到2.1.3 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-dependencies</artifactId> <version>2.1.3.RELEAS......

moon888
今天
30
0
从蓝鲸视角谈DevOps

DevOps源于Development和Operations的组合 常见的定义 DevOps是一种重视“软件开发人员(Dev)”和“IT运维技术人员(Ops)”之间沟通合作的文化、运动或惯例。透过自动化“软件交付”和“架构变...

嘉为科技
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部