【移动应用开发技术】小程序开发之页面上拉加载数据的实现方法_第1页
【移动应用开发技术】小程序开发之页面上拉加载数据的实现方法_第2页
【移动应用开发技术】小程序开发之页面上拉加载数据的实现方法_第3页
全文预览已结束

付费下载

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

【移动应用开发技术】小程序开发之页面上拉加载数据的实现方法

在下给大家分享一下小程序开发之页面上拉加载数据的实现方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！小程序页面涉及到数据循环，下面是简单的实例

<view

wx:for="{{array}}">

<view

>{{}}</view>

<view

>{{item.age}}</view>

</view>MVVM的开发模式(例如React,Vue)，提倡把渲染和逻辑分离。简单来说就是不要再让JS直接操控DOM，JS只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。小程序JS部分JS部分负责的是获取数据，以及拼接数据Page({

/**

*

页面的初始数据

*/

data:

{

array:

[],

page:

1,

isReachBottom:

true

//

是否上拉加载

},

//

获取数据

getList:

function

()

{

var

that

=

this;

wx.request({

url:

'https://xxx',

data:

{

p:

that.data.page

},

success:

function

(res)

{

if

(res.data.message

==

'success')

{

//

获取成功，数据追加

var

list

=

[];

var

count

=

res.data.data.length

for

(var

i

=

0;

i

<

count;

i++)

{

var

data

=

{name:

'',

age:

''};

=

res.data.data[i].name;

data.age

=

res.data.data[i].age;

list.push(data);

}

Atotype.push.apply(that.data.array,

list);

that.setData({

array:

that.data.array

})

}

else

if

(res.data.message

==

'finish')

{

//

没有数据，禁止再次上拉加载

that.setData({

isReachBottom:

false

})

}

}

})

},

/**

*

页面上拉触底事件的处理函数

*/

onReachBottom:

function

()

{

if

(this.data.isReachBottom

==

true)

{

this.setData({

page:

t

人人文库> 全部分类> 专业文献 > IT计算机

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论