ETL：微信小程序之小公举（小工具）：分页查询，获取当前定位信息 ...

1、分页查询

 

数据过多怎么办？一个分页就解决，麻麻再也不用担心我的工作啦分页思路：

把数据放入可滚动视图区域内，数据过多则视图可以滚动，当滚到底部的时候触发hotActivityLoadMore方法带上页数请求下一页数据

 

1. //bindscrolltolower的意思是拉到底部
2.  
3. <scroll-view scroll-y="truze" style="height: 1080rpx;" bindscrolltolower="hotActivityLoadMore">
4.  
5. <view wx:for="{{list}}" wx:for-item="item" >
6.  
7. 循环展示的内容体
8.  
9. </view>
10.  
11. </scroll-view>

js代码

 

1. // pages/distribution/my_agent.js
2.  
3. var util = require('../../../utils/util.js')
4.  
5. var app = getApp()
6.  
7. Page({
8.  
9. data: {
10.  
11. myAgentList: {
12.  
13. hasMore: true,
14.  
15. list: [],
16.  
17. listSize: 0
18.  
19. },
20.  
21. startNum: 1,//页数
22.  
23. },
24.  
25. onLoad: function (options) {
26.  
27. //加载页面
28.  
29. var _that = this
30.  
31. var _url = '请求的地址';
32.  
33. wx.request({
34.  
35. url: _url,
36.  
37. data: [{
38.  
39. id: agentCode,
40.  
41. agentTel: '',
42.  
43. pageNum: 1,//请求第一页
44.  
45. }],
46.  
47. method: 'post',
48.  
49. success: function (res) {
50.  
51. console.log(res.data)
52.  
53.  
54.  
55. if (res.data.code == '00') {
56.  
57. var listSize = 后台返回的数据.length;
58.  
59. var newData = _that.data.myAgentList.list;
60.  
61. newData = 后台返回的数据;
62.  
63. var newList = {};
64.  
65. //当长度小于10表示没有下页数据了
66.  
67. if (listSize < 10) {
68.  
69. newList.hasMore = falseo?;
70.  
71. } elseo? {
72.  
73. newList.hasMore = true;
74.  
75. }
76.  
77. newList.list = newData;
78.  
79. newList.listSize = listSize;
80.  
81. _that.seo?tData({ myAgentList: newList });
82.  
83.  
84.  
85. _that.seo?tData({
86.  
87. startNum: 2
88.  
89. })
90.  
91. } else {
92.  
93. util.msg("错误", res.data.msg)
94.  
95. console.log("网络通，数据不成功")
96.  
97. }
98.  
99. },
100.  
101. fail: function (res) {
102.  
103. console.log(res.data)
104.  
105. util.msg("错误", "通讯失败")
106.  
107. }
108.  
109. })
110.  
111. },
112.  
113. hotActivityLoadMore: function (e) {
114.  
115. var _that = this;
116.  
117. //判断是否还有下一页
118.  
119. if (_that.data.myAgentList.hasMore == true) {
120.  
121. var pageNum = _that.data.startNum
122.  
123. var _url = '请求的地址';
124.  
125. wx.request({
126.  
127. url: _url,
128.  
129. data: [{
130.  
131. id: agentCode,
132.  
133. linkTel: seek,
134.  
135. pageNum: pageNum //第N页
136.  
137. }],
138.  
139. method: 'post',
140.  
141. success: function (res) {
142.  
143. console.log(res.data)
144.  
145. if (res.data.code == "00") {
146.  
147. console.log("网络通，数据成功")
148.  
149. var listSize = 后台返回的数据.length;
150.  
151. var newData = _that.data.myAgentList.list;
152.  
153. //concat是在原有基础上进行增加
154.  
155. newData = newData.concat(后台返回的数据);
156.  
157. var newList = {};
158.  
159. //当长度等于于0表示当前没有数据，停止
160.  
161. if (listSize == 0) {
162.  
163. newList.hasMore = false;
164.  
165. return;
166.  
167. //当长度小于10表示没有下页数据了
168.  
169. } else if (listSize <= 10) {
170.  
171. newList.hasMore = false;
172.  
173. } else {
174.  
175. newList.hasMore = true;
176.  
177. }
178.  
179. newList.list = newData;
180.  
181. newList.listSize = listSize;
182.  
183. _that.setData({ myAgentList: newList });
184.  
185.  
186.  
187. _that.setData({
188.  
189. startNum: pageNum + 1 //页数加1
190.  
191. })
192.  
193. } else {
194.  
195. util.msg("错误", res.data.msg)
196.  
197. console.log("网络通，数据不成功")
198.  
199. }
200.  
201.  
202.  
203. },
204.  
205. fail: function (res) {
206.  
207. console.log(res.data)
208.  
209. util.msg("错误", "通讯失败")
210.  
211. console.log("失败")
212.  
213. }
214.  
215. })
216.  
217. }
218.  
219. }
220.  
221. })

 

2、防止用户多次提交，使用的遮罩层

 

实现很简单，按钮加上disabled属性，用true和false控制。js

 

1. data: {
2.  
3. hidden: true, //等待的展示与隐藏的控制
4.  
5. buthidden: false //按钮的可用和不可用的控制
6.  
7. }
8.  
9. primary: function (e) {
10.  
11. //显示等待、禁用按钮，后台返回错误则将true和false对调一下就是隐藏等待、启用按钮
12.  
13. this.setData({
14.  
15. hidden: false,
16.  
17. buthidden: true
18.  
19. })
20.  
21. }

wxml

 

1.  
2.  
3. <loading hidden="{{hidden}}">
4.  
5. 注册中...
6.  
7. </loading>
8.  
9. <button class="next_step" type="primary" disabled="{{buthidden}}" bindtap="primary">下一步</button>

 

3、切割字符串（很少会用）

 

代码和js一样

 

1. var dateList = 需要切割的字符串.split("分隔符");
2.  
3. var arr = []
4.  
5. for (var i in dateList) {
6.  
7. arr = arr.concat(dateList);
8.  
9. console.log(arr)
10.  
11. }

 

4、保留2位小数

 

数据.toFixed(2)

tip：数据必须是数字类型，不能是Str类型

 

5、跳转传值

 

在跳转的时候用kv的形式进行传值

 

1. <navigator url="../../agent_index?k=v&k=v">
2. </navigator>

第二个页面在onLoad里面打印options就可以看到上个页面传过来的值

 

6、获取当前定位信息

 

 

1. //自动获取当前位置
2.  
3. //获取当前位置经纬度
4.  
5. wx.getLocation({
6.  
7. type: 'wgs84',
8.  
9. success: function (res) {
10.  
11. // 成功返回函数
12.  
13. var longitude = res.longitude
14.  
15. var latitude = res.latitude
16.  
17. //发送请求通过百度经纬度反查地址信息
18.  
19. wx.request({
20.  
21. //百度地图经纬度反查路径
22.  
23. url: 'https://api.map.baidu.com/geocoder/v2/?ak=btsVVWf0TM1zUBEbzFz6QqWF&location=' + latitude + ',' + longitude + '&output=json&pois=0',
24.  
25. data: {}, method: "get",
26.  
27. header: { 'Content-Type': 'application/json' },
28.  
29. success: function (ops) {
30.  
31. //成功返回一个result集合
32.  
33. console.log(ops)
34.  
35. //把地址放入需要展示的地方
36.  
37. _that.setData({
38.  
39. merchAddr: ops.data.result.formatted_address
40.  
41. })
42.  
43. }, fail: function () {
44.  
45. util.msg("提示", "定位失败，请手动输入店铺地址")
46.  
47. }
48.  
49. })
50.  
51. }
52.  
53. })
54.