小程序 使用scroll-view实现上拉加载,下拉刷新

现在人工智能非常火爆,很多朋友都想学,但是一般的教程都是为博硕生准备的,太难看懂了。最近发现了一个非常适合小白入门的教程,不仅通俗易懂而且还很风趣幽默。所以忍不住分享一下给大家。点这里可以跳转到教程。​​​​​​​

 

如图,使用小程序的scroll-view实现的上拉加载数据,下拉刷新数据,试下代码如下:

js文件代码:

 

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
        },
        success: 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
    },
    onLoad: function () {
        var that = 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("下拉")
    },
    onReachBottom: function () {
        console.log("上拉");
    }
})


json文件代码

 

 

{
    "navigationBarTitleText": "下拉刷新",
    "enablePullDownRefresh": true,
    "backgroundTextStyle": "dark"
}

wxml文件代码:

 

 

<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>
    </view>
</view>


wxss文件代码

 

 

.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;
}


注意,

http://192.168.30.4:8080/gtxcx/carrier/getCarrier.action这个接口就是更具传入的页数,每次返回不同数据。

 

 

 

 

 

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页