当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 微信小程序页面滑动屏幕加载数据效果

微信小程序页面滑动屏幕加载数据效果

2017年12月12日  | 移动技术网IT编程  | 我要评论

滑动屏幕加载数据是任何小程序中都会用到的功能，本文我就将这个功能整理给大家，希望对大家有意。我们先看看效果图：

创建目录

首先我们现在项目中创建资讯目录，以下是我自己创建的目录，大家可以根据自己的需求创建。如图所示：

创建lists.js文件

以下是lists.js代码

var app = getapp()
page({
 data: {
  newslist: [],
  lastid: 0,
  toasthidden: true,
  confirmhidden: true,
  isfrist: 1,
  loadhidden: true,
  morehidden: 'none',
  msg: '没有更多文章了'
 },
 loaddata: function (lastid) {
  //显示出加载中的提示
  this.setdata({ loadhidden: false })
  var limit = 10
  var that = this
  wx.request({
   url: 'http://127.0.0.1:9090/hpm_bill_web/news/getnewslist', //数据接口
   data: { lastid: lastid, limit: limit },
   header: {
    'content-type': 'application/json'
   },
   success: function (res) {
    if (!res.data) {
     that.setdata({ toasthidden: false })
     that.setdata({ morehidden: 'none' })
     return false
    }
    var len = res.data.length
    var oldlastid = lastid
    if(len != 0) {
     that.setdata({ lastid: res.data[len - 1].id })
    } else {
     that.setdata({ toasthidden: false})
    }
    var dataarr = that.data.newslist
    var newdata = dataarr.concat(res.data);
     if (oldlastid == 0) {
      wx.setstoragesync('cmslist', newdata)
     }
    that.setdata({ newslist: newdata })
    that.setdata({ morehidden: '' })
   },
   fail: function (res) {
    if (lastid == 0) {
     var newdata = wx.getstoragesync('cmslist')
     if(newdata) {
      that.setdata({ newslist: newdata })
      that.setdata({ morehidden: '' })
      var len = newdata.length
      if (len != 0) {
       that.setdata({ lastid: newdata[len - 1].id })
      } else {
       that.setdata({ toasthidden: false })
      }
      console.log('data from cache');
     }
     } else {
      that.setdata({ toasthidden: false, morehidden: 'none', msg: '当前网格异常，请稍后再试' })
     }
   },
   complete: function () {
    //显示出加载中的提示
    that.setdata({ loadhidden: true })
   }
  })
 },
 loadmore: function (event) {
  var id = event.currenttarget.dataset.lastid
  var isfrist = event.currenttarget.dataset.isfrist
  var that = this
  wx.getnetworktype({
   success: function (res) {
    var networktype = res.networktype // 返回网络类型2g，3g，4g，wifi
    if (networktype != 'wifi' && isfrist == '1') {
     that.setdata({ confirmhidden: false })
    }
   }
  })
  this.setdata({ isfrist: 0 })
  this.loaddata(id);
 },
 onload: function () {
  var that = this
  this.loaddata(0);
 },
 toastchange: function () {
  this.setdata({ toasthidden: true })
 },
 modalchange: function () {
  this.setdata({ confirmhidden: true })
 }
})

创建页面文件（lists.wxml）

<view class="warp">
 <!-- 文章列表模板 begin -->
 <template name="items">
  <navigator url="../../pages/detail/detail?id={{id}}" hover-class="navigator-hover">
   <view class="imgs">
    <image src="{{image}}" class="in-img" background-size="cover" model="scaletofill"></image>
   </view>
   <view class="infos">
    <view class="title">{{name}}</view>
    <view class="dates">{{createtime}}</view>
   </view>
  </navigator>
 </template>
 <!-- 文章列表模板 end -->
 <!-- 循环输出列表 begin -->
 <view wx:for="{{newslist}}" class="list">
  <template is="items" data="{{...item}}" />
 </view>
 <!-- 循环输出列表 end -->
<loading hidden="{{loadhidden}}" bindchange="loadchange">
  数据加载中...
</loading>
 <view bindtap="loadmore" data-lastid="{{lastid}}" data-isfrist="{{isfrist}}" class="loadmore" style="display:{{morehidden}}">加载更多</view>
 <toast hidden="{{toasthidden}}" bindchange="toastchange" duration="3000">{{msg}}</toast>
 <modal title="温馨提示" no-cancel confirm-text="明确" cancel-text="关闭" hidden="{{confirmhidden}}" bindconfirm="modalchange" bindcancel="modalchange">你当前不在在wifi网格下下，会产生流量费用</modal>
</view>

创建页面样式（lists.wxss）

.warp {height:100%;display:flex;flex-direction: column;padding:20rpx;}
navigator {overflow: hidden;}
.list {margin-bottom:20rpx;height:200rpx;position:relative;}
.imgs{float:left;}
.imgs image {display:block;width:200rpx;height:200rpx;}
.infos {float:left;width:480rpx;height:200rpx;padding:20rpx 0 0 20rpx}
.title {font-size:20px; font-family: microsoft yahei}
.dates {font-size:16px;color: #aaa; position: absolute;bottom:0;}
.loadmore {text-align: center; margin:30px;color:#aaa;font-size:16px;}

通过以上代码就能实现在屏幕上滑动显示数据的功能。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网