對應本地生活案例：

https://www.bilibili.com/video/BV1834y1676P?p=52

HTML程式碼部分：

就是普通的wx-for指令遍歷

<!--pages/classPage/classPage.wxml-->
<!-- <text>pages/classPage/classPage.wxml</text> -->
<!-- <text> id: {{query.id}} | 分類: {{query.name}} </text> -->
<view
  class="item"
  wx:for="{{list}}"
  wx:key="id"
  wx:for-index="idx"
  wx:for-item="item"
>
  <!-- 左邊展示圖片 -->
  <view class="thumb">
    <image src="{{item.images[0]}}"></image>
  </view>
  <!-- 右邊展示文字 -->
  <view class="content">
    <text class="title">{{item.name}}</text>
    <text>電話：{{tools.phoneNoHandle(item.phone)}}</text>
    <text>地址：{{item.address}}</text>
    <text>營業時間：{{item.businessHours}}</text>
  </view>
</view>

<!-- 匯入wxs指令碼 -->
<wxs src="../../utils/tools.wxs" module="tools"></wxs>

CSS樣式程式碼：

/* pages/classPage/classPage.wxss */

/* 左右佈局 */
.item {
  display: flex;
  justify-content: space-around;

  padding: 15rpx;
  border: 1rpx solid #efefef;
  border-radius: 8rpx;
  margin: 15rpx;

  /* 盒子陰影 */
  box-shadow: 1rpx 1rpx 15rpx #ddd;
}

/* 圖片控制 */
.thumb image  {
  width: 250rpx;
  height: 250rpx;
  display: block;

  margin-right: 15rpx;
  border-radius: 8rpx;
}
/* 文字佈局 */
.content {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  /* 字型拉小 */
  font-size: 24rpx;
}

.title {
  font-weight: bolder;
}

JS程式碼部分：

1、完成介面請求初始化資料列表載入

2、配置上拉觸底功能開啟，在上拉載入的鉤子函式中編寫翻頁請求，

　　- 1、注意是疊加資料列表，而不是重置

　　- 2、配置微信載入提示彈窗

3、如何判斷翻到了最後一頁，資料全部查完的狀態

4、設定節流閥變數，控制請求載入的時候不能重複請求

5、配置下拉重新整理功能開啟

　　- 1、重置翻頁變數

　　- 2、將停止下拉效果入參到請求方法中實現呼叫

// pages/classPage/classPage.js
Page({

  /**
   * 頁面的初始資料
   * 小程式的data 不能使用巢狀物件，this.setData方法會覆蓋data屬性
   */
  data: {
    query: {}, // 導航接參
    list:[], // 列表容器
    pageIndex: 1, // 翻頁引數
    pageSize: 10, // 每次請求10條資料
    total: 0, // 總記錄數

    isLoading: false // 請求閥門
  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad(options) {
    // 導航接參
    this.setData({ query: options})

    // 請求介面
    this.getListData()
  },
  /**
   * 獲取每個具體分類的資料列表
   * GET請求
   * https://www.escook.cn/categories/:cate_id/shops
   * _page 表示請求第幾頁的資料
   * _limit 表示每頁請求幾條資料
   * 
   */
  getListData(callBack) {
    // 開啟閥門
    this.setData({ isLoading: true })
    // 開啟載入提示
    wx.showLoading({ title: '資料載入中' })

    // 請求資料
    wx.request({
      url: `https://www.escook.cn/categories/${this.data.query.id}/shops`,
      method: 'GET',
      data: {
        _page: this.data.pageIndex,
        _limit: this.data.pageSize
      },
      success: ( { data: res, header }) => {
        console.log(res)
        // 儲存載入的資料
        this.setData({
          list: [
            ...this.data.list,
            ...res
          ],
          total: parseInt(header['X-Total-Count']),

          //  內部物件不會儲存起來
          pageIndex: this.data.pageIndex,
          pageSize: this.data.pageSize
        })

        console.log(this.data.total)
      },
      complete: () => {
        // 關閉載入提示
        wx.hideLoading()
        // 關閉閥門
        this.setData({ isLoading: false })

        // 停止下拉重新整理的操作也放在這裡
        // wx.stopPullDownRefresh()
        callBack && callBack()
      }
    })
  },

  /**
   * 生命週期函式--監聽頁面初次渲染完成
   * 頁面初次渲染完成時觸發。
   * 一個頁面只會呼叫一次，代表頁面已經準備妥當，可以和檢視層進行互動。
   * 注意:對介面內容進行設定的API如wx. setNavigationBarTitle,請在onReady之後進行。
   */
  onReady() {
    // 從onLoad函式載入到query引數後 改變導航標題
    wx.setNavigationBarTitle({
      title: this.data.query.name
    })
  },

  /**
   * 生命週期函式--監聽頁面顯示
   */
  onShow() {

  },

  /**
   * 生命週期函式--監聽頁面隱藏
   */
  onHide() {

  },

  /**
   * 生命週期函式--監聽頁面解除安裝
   */
  onUnload() {

  },

  /**
   * 頁面相關事件處理函式--監聽使用者下拉動作
   */
  onPullDownRefresh() {
    // 重置頁數、總記錄數、和容器
    this.setData({
      pageIndex: 1,
      total: 0,
      list: []
    })
    // 重新請求 並且請求完成停止重新整理效果
    this.getListData(() => {
      wx.stopPullDownRefresh()
    })
  },

  /**
   * 頁面上拉觸底事件的處理函式
   */
  onReachBottom() {
    /**
     * 判斷翻頁是否超過總資料
     * 3.判斷是否還有下一頁資料，如果下面的公式成立，則證明沒有下一頁資料了:
     *  頁碼值 * 每頁顯示多少條資料 >= 總資料條數
     *  page * pageSize >= total
     * 
     */
    let pageCount = 
      this.data.pageIndex * this.data.pageSize
    if (pageCount >= this.data.total) {
      wx.showToast({
        icon: 'none', // 不設定任何圖示
        title: '已經到底了', // 提示文字
        duration: 3000, // 持續3秒
      })
      return 
    }

    // 根據閥門狀態判斷是否繼續請求
    if (this.data.isLoading) return 
    // 上拉載入翻一頁
    this.setData({ pageIndex: this.data.pageIndex + 1 })
    this.getListData()
  },

  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage() {

  },
})

頁面JSON配置：

{
  "usingComponents": {},
  "onReachBottomDistance": 200,

  "enablePullDownRefresh": true,
  "backgroundColor": "#efefef",
  "backgroundTextStyle": "dark"
}

WXS模組：

將電話號碼加入橫槓分隔符的方法

13888888888 -> 138-8888-8888

// utils/tools.wxs
/**
 * 手機號處理
 * @param {} phone 
 */
function phoneNoHandle(phone) {
  if (11 !== phone.length) return phone
  var arr = phone.split('')
  
  // 插入減號
  arr.splice(3, 0, '-')
  arr.splice(8, 0, '-')
  return arr.join('')
}

/**
 * 匯出wxs模組
 */
module.exports = {
  phoneNoHandle: phoneNoHandle
}