微信小程序頁面滑動屏幕加載數據的實例詳解

    這篇文章主要為大家詳細介紹了微信小程序頁面滑動屏幕加載數據效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下

    滑動屏幕加載數據是任何小程序中都會用到的功能,本文我就將這個功能整理給大家,希望對大家有意。愛掏網 - it200.com我們先看看效果圖:

    創建目錄

    首先我們現在項目中創建資訊目錄,以下是我自己創建的目錄,大家可以根據自己的需求創建。愛掏網 - it200.com如圖所示:

    創建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)

    加載更多
    登錄后復制

    創建頁面樣式(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;}
    登錄后復制

    通過以上代碼就能實現在屏幕上滑動顯示數據的功能。愛掏網 - it200.com

    以上就是微信小程序頁面滑動屏幕加載數據的實例詳解的詳細內容,更多請關注愛掏網 - it200.com其它相關文章!

    聲明:所有內容來自互聯網搜索結果,不保證100%準確性,僅供參考。如若本站內容侵犯了原著者的合法權益,可聯系我們進行處理。
    發表評論
    更多 網友評論0 條評論)
    暫無評論

    返回頂部

    主站蜘蛛池模板: 加勒比精品久久一区二区三区| 中日韩一区二区三区| 亚洲欧洲无码一区二区三区| 影院成人区精品一区二区婷婷丽春院影视 | 国产成人无码精品一区在线观看| 精品人妻少妇一区二区| 无码人妻精品一区二区三区99仓本 | 亚洲国产精品一区| 亚洲AV无码一区东京热久久 | 国产福利一区二区三区在线观看| 四虎精品亚洲一区二区三区| 无码播放一区二区三区| 韩国福利一区二区美女视频| 无码国产精品一区二区免费vr| 日本视频一区二区三区| 国产福利微拍精品一区二区| 少妇无码一区二区三区免费| 人妻无码一区二区三区| 精品国产福利在线观看一区| 无码喷水一区二区浪潮AV | 四虎精品亚洲一区二区三区 | 色窝窝免费一区二区三区| 国模无码人体一区二区| 痴汉中文字幕视频一区| 日本亚洲国产一区二区三区| 久久精品亚洲一区二区三区浴池| 无码乱码av天堂一区二区| 国产主播福利一区二区| 99精品国产高清一区二区三区 | 国产一区韩国女主播| 不卡无码人妻一区三区音频| 亚洲一区二区三区在线| 91视频国产一区| 日本视频一区在线观看免费| 亚洲国产欧美国产综合一区| 成人国产精品一区二区网站公司| 亚洲日韩精品国产一区二区三区| 精品一区二区久久久久久久网精| 波多野结衣一区在线| 亚洲色无码专区一区| 一区二区三区四区精品视频|