Small program uses Scroll-view to implement pull load, drop down Refresh __ Applet

As shown in the diagram, use the Scroll-view implementation of the applet to load the data, Drop-down refresh the data, try the following code:

JS File code:

var url = "Http://192.168.30.4:8080/gtxcx/carrier/getCarrier.action";

var page = 1;
    var getlist = function (that) {That.setdata ({hidden:false}); Wx.request ({url:url, data: {pagesize:10, pageno:page}, Succe
                Ss:function (res) {var L = That.data.list for (var i = 0; i < res.data.length; i++) {
            L.push (Res.data[i])} that.setdata ({list:l});
            page++;
        That.setdata ({hidden:true});
}
    }); Page ({data: {hidden:true, List: [], scrolltop:0, scrollheight:0}, Onlo
        Ad:function () {var = this;
                Wx.getsysteminfo ({success:function (res) {console.info (res.windowheight);
      That.setdata ({scrollHeight:res.windowHeight          });
    }
        });
        }, Onshow:function () {var that = this;
    GetList (that);
        }, Binddownload:function () {var that = this;
    GetList (that);
    }, Scroll:function (event) {This.setdata ({scrollTop:event.detail.scrollTop});
        }, Refresh:function (event) {page = 1;
        This.setdata ({list: [], scrolltop:0}); GetList (This)}, Onpulldownrefresh:function () {Console.log ("dropdown")}, Onreachbottom:function ()
    {Console.log ("pull Up"); }
})

JSON file code

{
    "Navigationbartitletext": "Drop-down Refresh",
    "Enablepulldownrefresh": True,
    "Backgroundtextstyle": "Dark"
}

Wxml File Code:

<view class= "Container" >
    <scroll-view scroll-top= ' {{scrolltop}} ' scroll-y= ' true ' style= ' height:{{ scrollheight}}px; " 
        class= "List" bindscrolltolower= "Binddownload" bindscroll= "scroll" bindscrolltoupper= "Refresh" >
        <view Class= "Item" wx:for= "{{list}}" ">
            <image class=" img "src=" https://cdn.kuaidi100.com/images/all/56/ Zhongtong.png "></image>
            <view class=" text ">
                <text class=" title ">{{item.carriername} }</text>
                <text class= "description" >{{item.carrierTelphone}}</text>
                <text class= " Description ">{{item.carrierId}}</text>
            </view>
        </view>
    </scroll-view>
    <view class= "Body-view" >
        <loading hidden= "{{hidden}}" bindchange= "Loadingchange" >
            loading ...
        </loading>
    </view>
</view>

WXSS File Code

. container{
    height:100%;
    Padding:20rpx
}

. item{
    Display:flex;
    MARGIN-BOTTOM:50RPX;
width:100%;
Background: #f0f0f0;
Overflow:hidden
}

. img{
    height:100rpx;
    WIDTH:100RPX;
    border-radius:50%
}

. text{
    Display:flex;
    flex-shrink:1;
    flex-grow:1;
    PADDING:10RPX;
    Flex-wrap:wrap;
    Font-size:50rpx
}

. title{
    font-size:50rpx;
    Margin:10rpx 100rpx 10rpx 100rpx;
description{
    font-size:50rpx;
    Align-self:flex-end;
}

Attention

Http://192.168.30.4:8080/gtxcx/carrier/getCarrier.action This interface is more than the number of incoming pages, each return different data.