微信小程序怎样在加载可视区域的内容的时候，发送当前可视区域的内容作为参数去向PHP

admin

Q：微信小程序怎样在加载可视区域的内容的时候，发送当前可视区域的内容作为参数去向PHP后端发送异步请求？

1. Page({
   
2.   data: {
   
3.     list: [], // 列表数据
   
4.     loading: false, // 是否正在加载
   
5.     page: 1 // 当前页码
   
6.   },
   
7. 
   
8.   onLoad() {
   
9.     // 初始加载
   
10.     this.loadData()
    
11.   },
    
12. 
    
13.   // 监听页面滚动
    
14.   onPageScroll(e) {
    
15.     // 获取可视区域信息
    
16.     wx.createIntersectionObserver().relativeToViewport().observe('.item', (res) => {
    
17.       if (res.intersectionRatio > 0) { // 元素进入可视区域
    
18.         // 获取当前元素的数据
    
19.         const dataset = res.dataset
    
20.         // 发送请求
    
21.         this.loadItemData(dataset)
    
22.       }
    
23.     })
    
24.   },
    
25. 
    
26.   // 加载列表数据
    
27.   loadData() {
    
28.     if (this.data.loading) return
    
29.    
    
30.     this.setData({ loading: true })
    
31.    
    
32.     wx.request({
    
33.       url: 'your_api_url',
    
34.       data: {
    
35.         page: this.data.page
    
36.       },
    
37.       success: (res) => {
    
38.         this.setData({
    
39.           list: [...this.data.list, ...res.data],
    
40.           page: this.data.page + 1
    
41.         })
    
42.       },
    
43.       complete: () => {
    
44.         this.setData({ loading: false })
    
45.       }
    
46.     })
    
47.   },
    
48. 
    
49.   // 加载单个元素详细数据
    
50.   loadItemData(params) {
    
51.     wx.request({
    
52.       url: 'your_detail_api',
    
53.       data: params,
    
54.       success: (res) => {
    
55.         // 处理返回数据
    
56.       }
    
57.     })
    
58.   }
    
59. })

复制代码

1. <view class="container">
   
2.   <view
   
3.     wx:for="{{list}}"
   
4.     wx:key="id"
   
5.     class="item"
   
6.     data-id="{{item.id}}"
   
7.     data-type="{{item.type}}"
   
8.   >
   
9.     <!-- 列表项内容 -->
   
10.   </view>
    
11.   
    
12.   <!-- 加载提示 -->
    
13.   <view class="loading" wx:if="{{loading}}">加载中...</view>
    
14. </view>

复制代码

主要实现要点：
1.使用 createIntersectionObserver() 创建交叉观察器：

• 监听元素是否进入可视区域
• 可以设置触发阈值和观察的视口范围
  

2.数据加载控制：

• 使用 loading 状态防止重复请求
• 分页加载数据
• 可以使用节流函数控制请求频率
  

3.优化建议：

1. 
   
2. 3. 优化建议：
   
3. ```javascript
   
4. // 添加节流函数
   
5. function throttle(fn, delay = 500) {
   
6.   let timer = null
   
7.   return function(...args) {
   
8.     if (timer) return
   
9.     timer = setTimeout(() => {
   
10.       fn.apply(this, args)
    
11.       timer = null
    
12.     }, delay)
    
13.   }
    
14. }
    
15. 
    
16. // 使用节流优化滚动监听
    
17. onPageScroll: throttle(function(e) {
    
18.   // 滚动处理逻辑
    
19. })
    
20. ```
    

复制代码

4. PHP 后端示例：

1. <?php
   
2. // 接收前端参数
   
3. $visibleArea = $_POST['visible_area'];
   
4. $page = $_POST['page'];
   
5. 
   
6. // 处理数据
   
7. $result = [
   
8.     'list' => [], // 查询数据
   
9.     'total' => 0,
   
10.     'page' => $page
    
11. ];
    
12. 
    
13. // 返回 JSON
    
14. echo json_encode($result);

复制代码