小程序模板網(wǎng)

微信小程序 scroll-view實(shí)現(xiàn)上拉加載與下拉刷新的實(shí)例

發(fā)布時間：2018-01-26 10:45 所屬欄目：小程序開發(fā)教程

本文將為關(guān)注易用通小程序的朋友提供的是的微信小程序 scroll-view實(shí)現(xiàn)上拉加載與下拉刷新的實(shí)例相關(guān)教程，具體實(shí)例代碼請看下文:

微信小程序 scroll-view實(shí)現(xiàn)上拉加載與下拉刷新的實(shí)例

實(shí)現(xiàn)效果圖：

微信小程序 scroll-view實(shí)現(xiàn)上拉加載與下拉刷新的實(shí)例

如圖，使用小程序的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這個接口就是更具傳入的頁數(shù)，每次返回不同數(shù)據(jù)。

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！


易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址：http://22321a.com/wxmini/doc/course/20448.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢：800182392 點(diǎn)擊咨詢
QQ在線咨詢