【微信小程序】 列表查询功能

 

对应本地生活案例：

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
}