小程序模板网

ETL:微信小程序之小公举(小工具):分页查询,获取当前定位信息 ...

不好意思打错了,是小工具其实我是故意打错的在此集成了各种小工具废话不多说,直接上代码1、分页查询数据过多怎么办?一个分页就解决,麻麻再也不用担心我的工作啦分页思路:把数据放入可滚动视图区域内,数据过多 ...

 
 
 

不好意思打错了,是小工具 
其实我是故意打错的 
在此集成了各种小工具 
废话不多说,直接上代码

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: 'http://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.  

 



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/18052.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询