微信小步伐-下拉滚动加载数据

1.实现流程图

所谓工欲善其事，必先利其器，做步伐之前咱们把思绪整理一下 ，画流程图是比力好的方式

2.前端JS 和 WXML

视图绑定  scrollToLower 方法 ，当离底部另有100时间触发;

WXML：

2. <scroll-view scroll-y lower-threshold="100" bindscrolltolower="scrollToLower" style="height: 100vh;">
4.     <view class="items" wx:for="{{list}}" wx:key="{{item.id}}">
6.    
7.     <image src="{{item.img}}"/>
9.    
10.     <view class="datas">
12.    
13.    
14.     <view class="beauty">订单金额：{{item.price}}元</view>
16.    
17.    
18.     <view class="times">2022-09-30</view>
20.    
21.     </view>
23.     </view>
24. </scroll-view>
25. <view class='text-style'>{{text}}</view>

复制代码

datalock 即是1 时， 不发出网络请求， 已免不须要的网络开销;
数据返回时 利用 concat 拼接

JS：

3.     data: {
5.    
6.     list:[],
8.    
9.     page:1,
11.    
12.     text:'',
14.    
15.     datalock:0
17.     },
19.     onLoad: function (options) {
21.    
22.     this.getDatas();
24.     },
26.     scrollToLower:function(){
28.    
29.     if(this.data.datalock==1){
31.    
32.    
33.     return false;
35.    
36.     }else{
38.    
39.    
40.     wx.showToast({
42.    
43.    
44.    
45.     title: '加载中...',
47.    
48.    
49.    
50.     icon:"loading",
52.    
53.    
54.    
55.     duration:600
57.    
58.    
59.     });
61.    
62.    
63.     this.getDatas();
65.    
66.     }  
68.     },getDatas:function(){
70.    
71.     var that = this;
73.    
74.     wx.request({
76.    
77.    
78.     url:'https://www.test.com/loaddata',
80.    
81.    
82.     method:"GET",
84.    
85.    
86.     data:{
88.    
89.    
90.    
91.     token:wx.getStorageSync('userid'),
93.    
94.    
95.    
96.     page:that.data.page,
98.    
99.    
100.     },
102.    
103.    
104.     success:function(res){
106.    
107.    
108.    
109.     //console.log(res.data);
111.    
112.    
113.    
114.     if(res.data.data.length > 0 ){
116.    
117.    
118.    
119.    
120.     let newlist = that.data.list.concat(res.data.data); //拼接数据
122.    
123.    
124.    
125.    
126.     for(let i=0;i<newlist.length;i++){
128.    
129.    
130.    
131.    
132.    
133.     newlist[i].jsonformat =  JSON.parse(newlist[i].json);
135.    
136.    
137.    
138.    
139.    
140.     newlist[i].timeformat =  tools.formatTime(newlist[i].addtime,'Y-M-D h:m');
142.    
143.    
144.    
145.    
146.     }
148.    
149.    
150.    
151.    
152.     that.setData({
154.    
155.    
156.    
157.    
158.    
159.     list : newlist,
161.    
162.    
163.    
164.    
165.    
166.     page : that.data.page +1,
168.    
169.    
170.    
171.    
172.    
173.     text: '加载更多'
175.    
176.    
177.    
178.    
179.     });
181.    
182.    
183.    
184.    
185.     //console.log(that.data.list);
187.    
188.    
189.    
190.     }else{
192.    
193.    
194.    
195.    
196.     that.setData({
198.    
199.    
200.    
201.    
202.    
203.     text: '到底啦!',
205.    
206.    
207.    
208.    
209.    
210.     datalock:1
212.    
213.    
214.    
215.    
216.     });
218.    
219.    
220.    
221.     }
223.    
224.    
225.    
226.    
228.    
229.    
230.     },fail:function(res){
232.    
233.    
234.    
235.     console.log(res);
237.    
238.    
239.    
240.    
242.    
243.    
244.     }
246.    
247.     });
249.     }

复制代码

2.    

复制代码

3.后端代码

这里利用tp6.1 来做接口通讯

2. use think\Request;
3. use think\Db;
4. use think\Config;
5. ...
6. public function loaddata(Request $request){
7.         $token = trim($request->param('token'));
8.         $page = intval($request->param('page'));
9.         $pageNum = 5;
10.         if(!$page){
11.                 $page=1;
12.         }
13.         $res_data = Db::name('usercolor')->where("uidtoken='".$token."'")->order('id desc')->limit(($page-1)*$pageNum,$pageNum)->select();
14.         if($res_data){
15.                 make_jsons($res_data);
16.                 exit();
17.         }else{
18.                 make_jsons([],400,'error');
19.                 exit();
20.         }
21. }
22. ...

复制代码

顺带附上make_jsons方法：

2. function make_jsons($dataArr=[],$code=200,$message='suc'){
4.         $codedata = [  
5.                 'status' => $code,  
6.                 'message' => $message,  
7.                 'data' =>$dataArr,  
8.         ];  
9.         echo  json_encode($codedata);
10.         exit();
11.        
12. }

复制代码