国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

微信小程序 scroll-view實現上拉加載與下拉刷新的實例

2019-11-19 17:50:07
字體:
來源:轉載
供稿:網友

微信小程序 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這個接口就是更具傳入的頁數,每次返回不同數據。

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

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 宜宾县| 江北区| 红安县| 龙海市| 阜阳市| 云霄县| 青河县| 阿拉善左旗| 高邮市| 沙坪坝区| 龙岩市| 花莲县| 塔河县| 桃源县| 汉中市| 鄂托克前旗| 江津市| 会昌县| 大名县| 金川县| 罗山县| 高雄市| 奉节县| 留坝县| 昌吉市| 正阳县| 尉犁县| 寻甸| 平南县| 绍兴县| 乐山市| 禹城市| 溆浦县| 枣强县| 商城县| 潜山县| 尼木县| 栾城县| 安多县| 芦溪县| 岳阳市|