微信小程序如何實(shí)現(xiàn)頁(yè)面滑動(dòng)屏幕加載數(shù)據(jù)效果

小編給大家分享一下微信小程序如何實(shí)現(xiàn)頁(yè)面滑動(dòng)屏幕加載數(shù)據(jù)效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

我們先看看效果圖：

創(chuàng)建目錄

首先我們現(xiàn)在項(xiàng)目中創(chuàng)建資訊目錄，以下是我自己創(chuàng)建的目錄，大家可以根據(jù)自己的需求創(chuàng)建。如圖所示：

創(chuàng)建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', //數(shù)據(jù)接口
   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: '當(dāng)前網(wǎng)格異常，請(qǐng)稍后再試' })
     }
   },
   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 // 返回網(wǎng)絡(luò)類型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 })
 }
})

創(chuàng)建頁(yè)面文件（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 -->
 <!-- 循環(huán)輸出列表 begin -->
 <view wx:for="{{newsList}}" class="list">
  <template is="items" data="{{...item}}" />
 </view>
 <!-- 循環(huán)輸出列表 end -->
<loading hidden="{{loadHidden}}" bindchange="loadChange">
  數(shù)據(jù)加載中...
</loading>
 <view bindtap="loadMore" data-lastid="{{lastid}}" data-isfrist="{{isfrist}}" class="loadMore" >加載更多</view>
 <toast hidden="{{toastHidden}}" bindchange="toastChange" duration="3000">{{msg}}</toast>
 <modal title="溫馨提示" no-cancel confirm-text="明確" cancel-text="關(guān)閉" hidden="{{confirmHidden}}" bindconfirm="modalChange" bindcancel="modalChange">你當(dāng)前不在在WIFI網(wǎng)格下下，會(huì)產(chǎn)生流量費(fèi)用</modal>
</view>

創(chuàng)建頁(yè)面樣式（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;}

通過以上代碼就能實(shí)現(xiàn)在屏幕上滑動(dòng)顯示數(shù)據(jù)的功能。

以上是“微信小程序如何實(shí)現(xiàn)頁(yè)面滑動(dòng)屏幕加載數(shù)據(jù)效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！