记录

小程序上拉加载下一页数据

  • 2022-08-22
  • 作者 我爱小小蝶
  • ~4.44K 字
  1. 1. index.wxml
  2. 2. index.js
  3. 3. index.wxss
  4. 4. 截图：
    1. 4.1. Toast:

在js文件里的onReachBottom()方法中可以实现。

index.wxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<SearchInput></SearchInput>
<!-- 监听自定义事件 -->
<Tab tabs="{{tabs}}" binditemChange="handleItemChange"></Tab>
<block wx:if="{{tabs[0].isActive}}">
  <view class="first_tab">
    <navigator class="goods_item" wx:for="{{goodsList}}" wx:key="goods_id">
      <!-- 左侧 图片容器 -->
      <view class="goods_img_wrap">
        <image mode="widthFix" src="{{item.goods_small_logo}}"></image>
      </view>
      <!-- 右侧 商品容器 -->
      <view class="goods_info_wrap">
        <view class="goods_name">{{item.goods_name}}</view>
        <view class="goods_price">￥ {{item.goods_price}}</view>
      </view>
    </navigator>
  </view>
</block>
<block wx:elif="{{tabs[1].isActive}}">1</block>
<block wx:elif="{{tabs[2].isActive}}">2</block>
<block wx:else>3</block>

**onReachBottom(): ** 监听用户上拉触底事件，获取当前页数，再进入getGoodsList()方法获取数据，进行数组列表拼接。

index.js

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
import { request } from "../../request/index";

// pages/goods_list/index.js
Page({
  data: {
    tabs: [
      {
        id: 0,
        value: "综合",
        isActive: true
      },
      {
        id: 1,
        value: "销量",
        isActive: false
      },
      {
        id: 2,
        value: "价格",
        isActive: false
      }
    ],
    goodsList: [],
  },

  // 总页数
  totalPages: 1,

  // 接口需要的数据
  QueryParams: {
    query: '',
    cid: "",
    pagenum: 1,
    pagesize: 10
  },

  // 标题点击事件 从子组件传递过来的
  // 自定义事件， 用来接收子组件传递过来的数据
  handleItemChange(e) {
    // console.log(e);  位置:e.detail
    const { index } = e.detail; // 拿到索引值
    let { tabs } = this.data;   // 拿到原数组
    tabs.forEach(
      (v, i) => i === index ? v.isActive =
        true : v.isActive = false
    ); // 修改原数组
    this.setData({
      tabs
    })// 值填充回去
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // console.log(options); 
    this.QueryParams.cid = options.cid;
    this.getGoodsList();
  },

  // 获取商品列表数据
  async getGoodsList() {
    const res = await request({url: "/goods/search", data: this.QueryParams});

    // 计算总页数
    const total = res.data.message.total;
    this.totalPages = Math.ceil(total/this.QueryParams.pagesize);
    this.setData({
      // 拼接数组
      goodsList: [...this.data.goodsList, ...res.data.message.goods]
    })
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    // console.log("页面上滑");
    if(this.QueryParams.pagenum>=this.totalPages) {
      wx.showToast({
        title: '没有下一页数据了',
      })
    } else {
      this.QueryParams.pagenum++;
      this.getGoodsList();
    }
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

index.wxss

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
/*  左侧图片 */
.first_tab .goods_item {
  display: flex;
  border-bottom: 1rpx solid #ccc;
}
.first_tab .goods_item image {
  width: 70%;
}
.first_tab .goods_item .goods_img_wrap{
  flex: 3;
}

/* 右侧商品信息 */
.first_tab .goods_item .goods_info_wrap {
  flex: 4;
  flex-direction: column;
  /* 在弹性盒对象的 <div> 元素中的各项周围留有空白 */
  justify-content: space-around;
}
.first_tab .goods_item .goods_info_wrap  .goods_name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  /* 显示商品名行数 */
  -webkit-line-clamp: 4;
  font-size: 32rpx;
  /* padding: 10rpx 0; */
}

/* 商品价格 */
.first_tab .goods_item .goods_info_wrap .goods_price {
  display: flex;
  padding-top: 30rpx;
  color: #ff0000;
  font-size: 32rpx;
}

截图：

Toast:

1
2
3
wx.showToast({
       title: '没有下一页数据了',
     })