wepy小程序實現列表分頁上拉加載（1）

 

使用wepy開發微信小程序商城第一篇：項目初始化

使用wepy開發微信小程序商城第二篇：路由配置和頁面結構

 

列表頁效果圖：

 

1.新建列表頁

（1）在pages里面新建一個list.wpy文件

初始代碼結構如下：

<style lang="less">

</style>

<template>
  <view>

  </view>
</template>

<script>
import wepy from 'wepy'

export default class List extends wepy.page {
  config = {
    navigationBarTitleText: '演示上拉加載列表'
  }
}
</script>

（2）配置列表頁路由

打開app.wpy

在config里面的pages里添加'pages/list'

export default class extends wepy.app {
  config = {
    pages: [
      'pages/home', // 首頁
      'pages/category', // 分類
      'pages/cart', // 購物車
      'pages/member', // 會員中心
      'pages/list' // 列表頁
    ],
    //此處代碼省略...
  }
}

（3）在首頁放一個列表頁入口

打開首頁home.wpy，添加一個導航，代碼如下：

<template>
  <view class="container">
    <view class="nav"><navigator url="/pages/list">演示上拉加載列表</navigator></view>
  </view>
</template>

記得執行npm run dev，再在微信開發者工具里預覽

效果圖如下：

點“演示上拉加載列表”即可進入列表頁，當然現在是空的。接下來給它添加內容

 

 

2.制作一個列表

（1）打開list.wpy，樣式和結構代碼如下：

<style lang="less">
.list-wrapper {
  .list {
    .item {
      text-align: center;
      font-size: 36rpx;
      line-height: 120rpx;
      border-bottom: 2rpx solid #ddd;
      &:nth-child(even) {
        background-color: #f5f5f5;
      }
    }
  }
}
</style>

<template>
  <view class="list-wrapper">
    <view class="list">
      <view class="item">1 演示上拉加載列表測試內容</view>
      <view class="item">2 演示上拉加載列表測試內容</view>
      <view class="item">3 演示上拉加載列表測試內容</view>
      <view class="item">4 演示上拉加載列表測試內容</view>
      <view class="item">5 演示上拉加載列表測試內容</view>
      <view class="item">6 演示上拉加載列表測試內容</view>
      <view class="item">7 演示上拉加載列表測試內容</view>
      <view class="item">8 演示上拉加載列表測試內容</view>
    </view>
  </view>
</template>

js部分不動，所以不貼了

列表頁效果如下：

現在是一個內容固定也不能滾動的頁面。接下來要造點假數據

（2）為了看到效果，方便演示，建一個數據文件，我想造點假數據

在src下面新建一個文件夾data,在里面新建一個listData.js文件用來寫一些數據

src/data/listData.js 代碼如下：

const listData = [
  '演示上拉加載列表測試內容',
  '演示上拉加載列表測試內容',
  '演示上拉加載列表測試內容'
    // 更多內容自行復制粘貼，我本地有100條，這里為了避免太長省略了...
]

export default listData

在list.wpy引入數據listData.js

list.wpy <script>代碼如下：

import wepy from 'wepy'
import listData from '@/data/listData' // 引入數據listData

export default class List extends wepy.page {
  config = {
    navigationBarTitleText: '演示上拉加載列表'
  }

  data = {
    list: listData // 引用數據
  }
}

list.wpy列表結構代碼改成循環

<template>
  <view class="list-wrapper">
    <view class="list">
      <view wx:for="{{list}}" wx:key="index" item="item" class="item">
        {{index + ' ' + item}}
      </view>
    </view>
  </view>
</template>

css不動

（2）把列表改成垂直滾動的效果

這里用到小程序組件-試圖容器-scroll-view 

詳細看官方文檔 https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

list.wpy結構代碼如下：

<template>
  <view class="list-wrapper">
    <scroll-view scroll-y="true" style="height: 480px;" class="list">
      <view wx:for="{{list}}" wx:key="index" item="item" class="item">
        {{index + ' ' + item}}
      </view>
    </scroll-view>
  </view>
</template>

style="height: 480px;" 為了演示初步效果，先將高度寫死。
這里注意：scroll-view里面的內容高度必須大於容器本身的高度才能出發滾動效果

在實際項目中，scroll-view的高度是不能寫死的，是需要自適應各種設備屏幕高度的。回頭再詳說。

效果如下：

 

 

3.實現上拉加載

為了實現上拉加載，首先我們要模擬分頁，把數據分段顯示。在實際項目中，通過請求接口數據，這里為了方便演示，只能用死數據了。

（1）數據分段（分頁）顯示

在onLoad()方法里面先處理下數據，取10條數據，賦值給list

list.wpy js代碼如下：

export default class List extends wepy.page {
  config = {
    navigationBarTitleText: '演示上拉加載列表'
  }

  data = {
    list: []
  }

  onLoad () {
    const listChunk = listData.slice(0, 10)
    this.list = listChunk
  }
}

（2）在scroll-view標簽上添加bindscrolltolower事件，綁定loadMore方法

<scroll-view scroll-y="true" style="height: 480px;" bindscrolltolower="loadMore" class="list">
  <view wx:for="{{list}}" wx:key="index" item="item" class="item">
    {{index + ' ' + item}}
  </view>
</scroll-view>

（3）添加loadMore方法，跟onLoad方法平級，不是在methods里面

onLoad () {
  // 此處代碼省略...
}
loadMore() {
  // 加載下一頁代碼
}

（4）分頁加載的思路：在data對象里添加2個成員，用來記錄當前頁碼，每次加載10條

data = {
  list: [],
  currentPage: 1, // 頁碼
  pageSize: 8 // 一頁條數
}

每觸發一次上拉動作，currentPage就要加1，listData數組截取的位置就要往后推，所以我封裝了一個方法來截取數組

（5）添加數組截取方法listSlice

listSlice方法跟onLoad方法平級，不是methods里面

listSlice(cur) {
  // cur參數表示當前頁碼
  let start = (cur - 1) * this.page // 開始位置
  let end = cur * this.pageSize // 結束位置
  let listChunk = listData.slice(start, end) // 截取數據數組
  this.list = [...this.list, ...listChunk] // 擴展this.list
}

（6）在loadMore方法里調用listSlice

loadMore() {
  console.log('頁數：', this.currentPage) // console打印頁數
  this.currentPage++ // 每執行一次loadMore,頁碼自增
  this.listSlice(this.currentPage) // 調用截取方法
}

初次加載跟后面的加載略有不同，slice()方法的開始位置不同，所以就直接寫在onLoad里，就不去改了。

（7）至此，滾動加載分頁完成

 

 

4.優化-添加加載動畫

見下一篇：wepy小程序實現列表分頁上拉加載（2）