欢迎光临，了解微信小程序开发，就上易用通！

当前位置： 易用通 > 开发文档 > 入门

小程序 使用view实现下拉刷新，上拉加载数据//加载三点实现

发布：2018-01-25 09:54浏览： 次来源：网络 作者：tianshu

小程序 使用view实现下拉刷新，上拉加载数据//加载三点实现(图1)

 


如图,微信小程序实现上拉加载，下拉刷新。代码如下

js文件代码

  1. // pages/loading/loading.js  
  2. var p = 1  
  3. var url = "https://192.168.30.4:8080/gtxcx/carrier/getCarrier.action";  
  4. var GetList = function (that) {  
  5.   that.setData({  
  6.     hidden: false  
  7.   });  
  8.   wx.request({  
  9.     url: url,  
  10.     data: {  
  11.       pageSize: 10,  
  12.       pageNo: p  
  13.     },  
  14.     success: function (res) {  
  15.       var l = that.data.list  
  16.       for (var i = 0; i < res.data.length; i++) {  
  17.         l.push(res.data[i])  
  18.       }  
  19.       that.setData({  
  20.         list: l  
  21.       });  
  22.       p++;  
  23.       that.setData({  
  24.         hidden: true  
  25.       });  
  26.     }  
  27.   });  
  28. }  
  29. Page({  
  30.   data: {  
  31.     list: []  
  32.   },  
  33.   onLoad: function (options) {  
  34.     // 页面初始化 options为页面跳转所带来的参数  
  35.     var that = this  
  36.     GetList(that)  
  37.   },  
  38.   onPullDownRefresh: function () {  
  39.     //下拉  
  40.     console.log("下拉");  
  41.     p = 1;  
  42.     this.setData({  
  43.       list: [],  
  44.     });  
  45.     var that = this  
  46.     GetList(that)  
  47.   },  
  48.   onReachBottom: function () {  
  49.     //上拉  
  50.     console.log("上拉")  
  51.     var that = this  
  52.     GetList(that)  
  53.   }  
  54. })  
复制代码

json文件代码

  1. {  
  2.     "enablePullDownRefresh": true,  
  3.     "backgroundTextStyle": "dark"  
  4. }  

wxml文件代码

  1. <view class="item" wx:for="{{list}}" wx:for-item="item" for:key="item.carrierId">  
  2.     <image class="img" src="https://cdn.kuaidi100.com/images/all/56/zhongtong.png"></image>  
  3.     <text calss="txt" >{{item.carrierName}}</text>  
  4.     <text class="txt">{{item.carrierId}}</text>  
  5. </view>

wxss文件代码

  1. .img{  
  2.     border-radius: 50%;  
  3.     height: 100rpx;  
  4.     width: 100rpx;  
  5. }  
  6. .txt{  
  7.     margin: 10rpx 10rps 10rpx 10rpx;  
  8.     font-family: "微软雅黑";  
  9.     font-size: 50rpx;  
  10.     height: 50rpx;  
  11. }  

说明：这个接口返回的就是   分页的数据，根据传入的参数，每次返回不同的数据

  1. https://192.168.30.4:8080/gtxcx/carrier/getCarrier.action  
复制代码

其中有网友提问：怎么实现下拉,上面三个点的动画？

解决办法：josn中添加 "enablePullDownRefresh": true,

"backgroundTextStyle": "dark"



免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

相关文章
最新文章
推荐文章
随机文章
热门小程序
开发文档 | 运营教程 小程序模板 | 小程序应用 | 标签大全
Copyright © 2017 https://www.yiyongtong.com 易用通 版权所有