实现微信小程序列表的上拉加载和下拉刷新(微信小程序点击刷新页面)

主要介绍微信小程序中列表上拉加载和下拉刷新的方法。具有很好的参考价值。用小编来看看吧

微信小程序是9月21日之后最火的名词。一旦出现，真的炸了整个开发商。当然，很多app开发者有一个担心。微信小程序的到来会颠覆移动app，让移动程序员失业吗？作为一个安卓开发者，我不信。就算有，也要一两年才能实现。

不管微信小程序能否颠覆目前的移动开发格局，我们都要以积极的态度去接收和学习。不要排斥新技术，行动不如行动，先快速搭建一个微信小程序开发工具。然后我们开始学习列表的上拉加载和下拉刷新的实现(通过聚合数据平台获取微信新闻)。

1.介绍几个组件。

1.1 scroll -视图组件

注意:使用垂直滚动时，需要给定一个固定的高度，通过WXSS设置高度。

1.2图像组件

注意:mode有12种模式，其中3种是缩放模式，9种是裁剪模式。

1.3图标组件

图标类型:

2.2逻辑很简单，直接上代码。

detail.wxml布局文件

& lt正在加载hidden = & quot{ { hidden } } & quotbindchange = & quot加载更改& quot& gt装货...</loading & gt；& ltscroll -view scroll -y = & quot；true & quotstyle = & quot身高:100%；"bindscrolltolower = & quotloadMore & quotbindscrolltoupper = & quotrefesh & quot& gt& ltview wx:if = & quot；{ { hasRefesh } } & quotstyle = & quot显示器:flexflex -方向:rowalign -项:居中；align -自我:中心；justify -内容:居中；"& gt& lt图标类型= & quot等待& quotsize = & quot45 & quot/& gt；& lttext & gt恢复精神...</text & gt；& lt/view & gt；& ltview wx:else style = & quot；显示:无& quot& gt& lttext & gt& lt/text & gt；& lt/view & gt；& ltview class = & quotlll & quotwx:for = & quot；{ { list } } & quotwx:for -item = & quot；item & quotbindtap = & quotbindViewTap & quotdata -title = & quot；{ { item.title } } & quot& gt& lt图像样式= & quot宽度:50px高度:50px保证金:20rpx"src = & quot{ { item.firstImg } } & quot& gt& lt/image & gt；& ltview class = & quoteee & quot& gt& lt视图样式= & quot保证金:5pxfont -size:8px & quot；& gt标题:{ { item . title } } </view & gt；& lt视图样式= & quot保证金:5px颜色:红色；font -size:6px & quot；& gtsource:{ { item . source } } </view & gt；& lt/view & gt；& lt/view & gt；& ltview class = & quot提示& quot& gt& ltview wx:if = & quot；{ { hasMore } } & quotstyle = & quot显示器:flexflex -方向:rowalign -项:居中；align -自我:中心；justify -内容:居中；"& gt& lt图标类型= & quot等待& quotsize = & quot45 & quot/& gt；& lttext & gt为生活而装载...

detail.js逻辑代码文件

var network _ util = require(& # 039；../../utils/network _ util . js & # 039；);var JSON _ util = require(& # 039；../../utils/JSON _ util . js & # 039；);page({ data:{//text:& quot；这是一页“列表:

新闻的细节实现了，后者实现了。