微信小程序下拉刷新和上拉加载（PHP后端）

作者：周起，来自原文地址 
Wxml文件

1. <scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;" bindscrolltolower="bindDownLoad" bindscroll="scroll">
2. <block wx:for="{{goodsList}}" wx:key="item" >
3. <view>
4. <image src="{{item.goods_img}}" alt=""></image>
5. </view>
6. <view>{{item.name}}</view>
7. <view><text>￥<text>{{item.price}}</text></text><text>￥{{item.oldprice}}</text></view>
8. </block>
9. </scroll-view>

根据官方文档得知，scroll-view就是里面内容有各种滑动触发事件的DIV容器，比如滚动条滚动、触底、触顶着三个事件。

其中的三个属性  scroll-top：设置滚动条的位置

scroll-y：是否允许竖向滑动，height:是组件的高度

Bindscrolltolower是绑定触底触发的事件

Bindscroll 是滚动触发的时间

Bindscrolltoupper 触顶触发的事件,由于是触顶触发事件，所以不合适用来当做下拉刷新

一般来说 对于组件的属性，都是通过JS来动态控制的。

js

1. //获取应用实例
2. var app = getApp()
3. //首页上拉加载功能函数
4. var page = 0;
5. var url = 'https:www.shop.com/home/index/index
6.  
7. ';
8. var GetList = function(that){
9. wx.request({
10. url: url,
11. data: {
12. page:page,
13. },
14. success: function(res){
15. var goodsList = that.data.goodsList;
16. for(var i = 0;i<res.data.info.length;i++){
17. goodsList.push(res.data.info[i]);
18. }
19. that.setData({
20. goodsList:goodsList
21. });
22. page ++;
23. that.setData({
24. hidden:true
25. });
26. }
27. });
28. }
29. Page({
30. data: {
31. goodsList:[],
32. scrollTop : 0,