小程序开发之列表的上拉加载和下拉刷新效果实现教程

微信小程序可谓是9月21号之后最火的一个名词了，一经出现真是轰炸了整个开发人员，当然很多App开发人员有了一个担心，微信小程序的到来会不会让移动端App颠覆，让移动端的程序员失业，身为一个Android开发者我是不相信的，即使有，那也是需要个一两年的过度和打磨才能实现的吧。不管微信小程序是否能颠覆当今的移动开发格局，我们都要积极向上的心态去接收，去学习。不排斥新技术，所以，心动不如行动，赶紧先搭建一个微信小程序开发工具。那么接下来就让我们来开始学习列表的上拉加载和下拉刷新的实现吧（通过聚合数据平台获取微信新闻）。1.介绍几个组件1.1 scroll-view 组件图片：1.jpg注意：使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height。1.2 image组件图片：2.jpg注意：mode有12种模式，其中3种是缩放模式，9种是裁剪模式。1.3 Icon组件图片：3.jpgiconType: [ ‘success', ‘info', ‘warn', ‘waiting', ‘safe_success', ‘safe_warn', ‘success_circle', ‘success_no_circle', ‘waiting_circle', ‘circle', ‘download', ‘info_circle', ‘cancel', ‘search', ‘clear' ]2.列表的上拉加载和下拉刷新的实现2.1先来张效果图图片：4.gif2.2逻辑很简单，直接上代码2.2.1 detail.wxml 布局文件<loading hidden="pw_hidden" bindchange="loadingChange"> 加载中... </loading><scroll-view scroll-y="true" style="height: 100%;" bindscrolltolower="loadMore" bindscrolltoupper="refesh"> <view wx:if="pw_hasRefesh" style="display: flex;flex-direction: row;align-items: center;align-self: center;justify-content: center;"> <icon type="waiting" size="45"/><text>刷新中...</text></view> <view wx:else style="display:none" ><text></text></view> <view>图片：5.jpg以上就是小程序开发之列表的上拉加载和下拉刷新效果实现教程 的详细内容，更多请关注小潘博客其它相关文章！