위 챗 애플 릿 페이지 슬라이딩 화면 데이터 불 러 오기 효과

미끄럼 화면 에 데 이 터 를 불 러 오 는 것 은 모든 애플 릿 에서 사용 할 수 있 는 기능 입 니 다.본 고 는 이 기능 을 여러분 에 게 정리 하고 여러분 에 게 관심 이 있 기 를 바 랍 니 다.우리 먼저 효과 도 를 보 자.

디 렉 터 리 만 들 기
우선,우 리 는 현재 프로젝트 에서 정보 디 렉 터 리 를 만 들 고 있 습 니 다.다음은 제 가 만 든 디 렉 터 리 입 니 다.여러분 은 자신의 수요 에 따라 만 들 수 있 습 니 다.그림 에서 보 듯 이:

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 })
 }
})

페이지 파일 만 들 기(list.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;}

상기 코드 를 통 해 화면 에 데 이 터 를 슬라이딩 하여 표시 하 는 기능 을 실현 할 수 있다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.