微信小程序本地生活（列表页面）_生活宝小程序信息列表页面

作者：煮酒与君饮 | 2024-07-01 05:08:32

踩

生活宝小程序信息列表页面

一、实现效果

在这里插入图片描述

二、实现步骤

主要实现功能：

页面导航并传参
上拉触底时加载下一页数据
下拉刷新列表数据

实现步骤

创建列表页面
动态设置页面标题
定义数据，发起请求获取数据
渲染数据并美化样式
实现上拉加载数据效果
对上拉触底进行节流处理
上拉触底请求数据前，判断数据是否加载完毕
下拉刷新处理数据
使用WXS处理手机号

三、具体代码

创建列表页面：在app.json的pages配置项新增shopList

"pages":[
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact",
    "pages/shopList/shopList"
  ],
1
2
3
4
5
6

动态设置页面标题
query 用来接收点击页面传递给shopList页面的参数，包括id和title。

/**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.setData({
      query: options
    });
    this.getShoplist();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    wx.setNavigationBarTitle({
      title: this.data.query.title,
    })
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

定义数据，发起请求获取数据

data: {
    query: {},
    shoplist: [],
    page: 1, // 当前是第几页
    pageSize: 10, // 每一页数据条数
    total: 0, // 所有数据条数
    isLoading: false
  },
  getShoplist(a) {
    wx.request({
      url: `https://applet-base-api-t.itheima.net/categories/${this.data.query.id}/shops`,
      method: 'GET',
      data: {
        _page: this.data.page,
        _limit: this.data.pageSize
      },
      success: (res) =>{
        this.setData({
          shoplist: [...this.data.shoplist, ...res.data],
          total: res.header['X-Total-Count'] - 0
        });
      },
    })
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

渲染数据并美化样式

// WXML 文件
<view wx:for="{{shoplist}}" wx:key="id" class="shop-item">
  <view class="thumb">
    <image src="{{item.images[0]}}" />
  </view>
  <view class="info">
    <text>{{item.name}}</text>
    <text>电话：{{item.phone}}</text>
    <!-- <text>电话：{{item.phone}}</text> -->
    <text>地址：{{item.address}}</text>
    <text>营业时间：{{item.businessHours}}</text>
  </view>
</view>

// WXSS 文件
.shop-item {
  display: flex;
  padding: 15rpx;
  border: 1rpx solid #efefef;
  margin: 15rpx;
  box-shadow: 1rpx 1rpx 20rpx #ddd;
}
.thumb image {
  width: 250rpx;
  height: 250rpx;
  vertical-align: middle;
  margin-right: 15rpx;
}
.info {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 24rpx;
}
.info text:nth-child(1) {
  font-weight: bolder;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

实现上拉加载数据效果
通过wx.showLoading(Object object)实现，当数据没有加载出来，显示“数据加载中”，数据请求完成隐藏该效果。

  getShoplist(a) {
    // 展示loading效果
    wx.showLoading({
      title: '数据加载中...',
    });
    wx.request({
      url: `https://applet-base-api-t.itheima.net/categories/${this.data.query.id}/shops`,
      method: 'GET',
      data: {
        _page: this.data.page,
        _limit: this.data.pageSize
      },
      success: (res) =>{
        this.setData({
          shoplist: [...this.data.shoplist, ...res.data],
          total: res.header['X-Total-Count'] - 0
        });
      },
      complete: ()=>{
        // 隐藏loading效果
        wx.hideLoading();
      }
    })
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

对上拉触底进行节流处理，分为以下几步：

在 data 中定义 isloading 节流阀。isloading 为布尔值，false 表示当前没有进行任何数据请求，可以请求， true 表示当前正在进行数据请求，重新触发的下一页请求都要被屏蔽。
在 getShopList() 方法中修改 isloading 节流阀的值。当开始发起请求时，调用 getShopList 时将节流阀设置 true，数据请求完成之后，在网络请求的 complete回调函数中，将节流阀重置为 false。
在 onReachBottom 中判断节流阀的值，从而对数据请求进行节流控制。如果节流阀的值为 true，则阻止当前请求。如果节流阀的值为 false，则发起数据请求。

Page({
  /**
   * 页面的初始数据
   */
  data: {
    query: {},
    shoplist: [],
    page: 1, // 当前是第几页
    pageSize: 10, // 每一页数据条数
    total: 0, // 所有数据条数
    isLoading: false
  },
  getShoplist(a) {
    this.setData({
      isLoading: true
    })
    // 展示loading效果
    wx.showLoading({
      title: '数据加载中...',
    });
    wx.request({
      url: `https://applet-base-api-t.itheima.net/categories/${this.data.query.id}/shops`,
      method: 'GET',
      data: {
        _page: this.data.page,
        _limit: this.data.pageSize
      },
      success: (res) =>{
        this.setData({
          shoplist: [...this.data.shoplist, ...res.data],
          total: res.header['X-Total-Count'] - 0
        });
      },
      complete: ()=>{
        // 隐藏loading效果
        wx.hideLoading();
        this.setData({
          isLoading: false
        });
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.setData({
      query: options
    });
    this.getShoplist();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    wx.setNavigationBarTitle({
      title: this.data.query.title,
    })
  },
    // 重新发起数据请求 第一页
    this.getShoplist(()=>{
      wx.stopPullDownRefresh();
    });
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    // 判断是否正在加载其他数据，节流
    if (this.data.isLoading===true) {
      return;
    }
    this.setData({
      page: this.data.page + 1
    })
    this.getShoplist();
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

上拉触底请求数据前，判断数据是否加载完毕
page * pageSize >= total 即已展示的数据条数大于等于总条数，表示页面数据已经全部加载完毕，不再发起请求并且调用wx.showToast(obj)让页面显示“数据正在加载完毕”。

onReachBottom() {
    // 判断是否还有下一页数据
    if (this.data.pageSize * this.data.page >= this.data.total) {
      return wx.showToast({
        title: '数据加载完毕！',
        icon: 'none'
      })
    }
    // 判断是否正在加载其他数据，节流
    if (this.data.isLoading===true) {
      return;
    }
    this.setData({
      page: this.data.page + 1
    })
    this.getShoplist();
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

下拉刷新处理数据
下拉刷新要重置数据，发起请求返回的是第一页的数据。请求数据后还要调用函数 wx.stopPullDownRefresh();关闭下拉刷新效果。

 onPullDownRefresh() {
    // 重置关键数据
    this.setData({
      page: 1,
      shoplist: [],
      total: 0
    });
    // 重新发起数据请求 第一页
    this.getShoplist(()=>{
      wx.stopPullDownRefresh();
    });
  },
1
2
3
4
5
6
7
8
9
10
11
12

使用WXS处理手机号

定义WXS文件，文件代码如下：

function splitPhone(str) {
  if (str.length != 11) {
    return str;
  } else {
    var arr = str.split('');
    arr.splice(3, 0, '-');
    arr.splice(8, 0, '-');
    console.log(arr);
    return arr.join('');
  }
  // return str;
}
module.exports = {
  splitPhone: splitPhone
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

将WXML文件中渲染手机号的代码改动

<view wx:for="{{shoplist}}" wx:key="id" class="shop-item">
  <view class="thumb">
    <image src="{{item.images[0]}}" />
  </view>
  <view class="info">
    <text>{{item.name}}</text>
    <text>电话：{{m1.splitPhone(item.phone)}}</text>
    <!-- <text>电话：{{item.phone}}</text> -->
    <text>地址：{{item.address}}</text>
    <text>营业时间：{{item.businessHours}}</text>
  </view>
</view>

<wxs src="../../utils/shoplist.wxs"  module="m1"></wxs>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

四、完整代码

shopList.wxml文件

<!--pages/shopList/shopList.wxml-->
<view wx:for="{{shoplist}}" wx:key="id" class="shop-item">
  <view class="thumb">
    <image src="{{item.images[0]}}" />
  </view>
  <view class="info">
    <text>{{item.name}}</text>
    <text>电话：{{m1.splitPhone(item.phone)}}</text>
    <!-- <text>电话：{{item.phone}}</text> -->
    <text>地址：{{item.address}}</text>
    <text>营业时间：{{item.businessHours}}</text>
  </view>
</view>
<wxs src="../../utils/shoplist.wxs"  module="m1"></wxs>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

shopList.wxss文件

/* pages/shopList/shopList.wxss */

.shop-item {
  display: flex;
  padding: 15rpx;
  border: 1rpx solid #efefef;
  margin: 15rpx;
  box-shadow: 1rpx 1rpx 20rpx #ddd;
}
.thumb image {
  width: 250rpx;
  height: 250rpx;
  vertical-align: middle;
  margin-right: 15rpx;
}
.info {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 24rpx;
}
.info text:nth-child(1) {
  font-weight: bolder;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

shopList.js文件

// pages/shopList/shopList.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    query: {},
    shoplist: [],
    page: 1, // 当前是第几页
    pageSize: 10, // 每一页数据条数
    total: 0, // 所有数据条数
    isLoading: false
  },
  getShoplist(a) {
    this.setData({
      isLoading: true
    })
    // 展示loading效果
    wx.showLoading({
      title: '数据加载中...',
    });
    wx.request({
      url: `https://applet-base-api-t.itheima.net/categories/${this.data.query.id}/shops`,
      method: 'GET',
      data: {
        _page: this.data.page,
        _limit: this.data.pageSize
      },
      success: (res) =>{
        this.setData({
          shoplist: [...this.data.shoplist, ...res.data],
          total: res.header['X-Total-Count'] - 0
        });
        // console.log(this.data.total);
        // console.log(res);
        // console.log(this.data.shoplist);
        // console.log(this.data.total);
      },
      complete: ()=>{
        // 隐藏loading效果
        wx.hideLoading();
        this.setData({
          isLoading: false
        });
        a && a();
      }
    })
  },
  
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.setData({
      query: options
    });
    this.getShoplist();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    wx.setNavigationBarTitle({
      title: this.data.query.title,
    })
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    // 重置关键数据
    this.setData({
      page: 1,
      shoplist: [],
      total: 0
    });
    // 重新发起数据请求 第一页
    this.getShoplist(()=>{
      wx.stopPullDownRefresh();
    });
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    // 判断是否还有下一页数据
    if (this.data.pageSize * this.data.page >= this.data.total) {
      return wx.showToast({
        title: '数据加载完毕！',
        icon: 'none'
      })
    }
    // 判断是否正在加载其他数据，节流
    if (this.data.isLoading===true) {
      return;
    }
    this.setData({
      page: this.data.page + 1
    })
    this.getShoplist();
  },

})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

shopList.json文件

{
  "usingComponents": {},
  "onReachBottomDistance": 200,
  "enablePullDownRefresh": true,
  "backgroundColor": "#efefef",
  "backgroundTextStyle": "dark"
}
1
2
3
4
5
6
7

shopList.wxs文件

function splitPhone(str) {
  if (str.length != 11) {
    return str;
  } else {
    var arr = str.split('');
    arr.splice(3, 0, '-');
    arr.splice(8, 0, '-');
    console.log(arr);
    return arr.join('');
  }
  // return str;
}
module.exports = {
  splitPhone: splitPhone
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】