微信小程序 scroll-view實(shí)現(xiàn)上拉加載與下拉刷新的實(shí)例
發(fā)布時(shí)間：2018-01-26 10:45 所屬欄目：小程序開發(fā)教程
本文將為關(guān)注易用通小程序的朋友提供的是的微信小程序 scroll-view實(shí)現(xiàn)上拉加載與下拉刷新的實(shí)例相關(guān)教程，具體實(shí)例代碼請(qǐng)看下文:
微信小程序 scroll-view實(shí)現(xiàn)上拉加載與下拉刷新的實(shí)例
實(shí)現(xiàn)效果圖：
如圖，使用小程序的scroll-view實(shí)現(xiàn)的上拉加載數(shù)據(jù)，下拉刷新數(shù)據(jù)，試下代碼如下：
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這個(gè)接口就是更具傳入的頁數(shù)，每次返回不同數(shù)據(jù)。感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源
碼云倉庫:
本文地址：http://www.kknew.com.cn/wxmini/doc/course/20448.html 復(fù)制鏈接
如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢： 點(diǎn)擊咨詢
