微信小程序小技巧分享

微信小程序相关编程技巧分享，内容来源是经验总结以及论坛啊，博客上收集，后续还会分享更多技巧，欢迎大家讨论。

1. 滚动加载数据方式

在滚动分页加载数据的时候，通常做法是定义一个数据arr，下滑触发加载更改请求接口获取分页数据arr2，然后将arr2合并到arr，重新setData到arr。这样的操作方式是每次都全量覆盖，当数据量过大时，会造成渲染加载卡顿问题。arr数组结构为[{ },{ },{ },{ }]

旧方法：

Page({data:{arr:[]      //这是一个滚动渲染数组数据}
}) //上拉触底方法
onReachBottom:function(){let that = this;let arr = that.data.arr;wx.reauest({url : '',data : { },success : function(res){let newData = res.result;  //获取接口返回的分页数据arr.push(...newData);      //将新数据合并到原数组中that.setData({arr : arr});}});
}

<block wx:for="{{ arr }}" ><view>{{item.name}}</view>
</block>

新方法：
新方式通过二位数组的方式来渲染页面，并在获取分页数据后将新数据以数组元素的方式直接追加到一维数组。
arr数组的格式为：[[{},{},{}],[{},{}],[{},{}]]

Page({data:{arr:[]      //这是一个滚动渲染数组数据}
}) //上拉触底方法
onReachBottom:function(){let that = this;let arr = that.data.arr;wx.reauest({url : '',data : { },success : function(res){let newData = res.result;   //获取接口返回的分页数据that.setData({[ `arr[${arr.length}]`] : newData});}});
}

<block wx:for="{{ arr }}" ><block wx:for="{{ item }}" wx:for-index="ind" wx:for-item="it" ><view data-index="{{ index }}" data-ind="{{ ind }}" ontap="changeName">{{it.name}}</view></block>
</block>

当需要更改其中某一个对象的值时

    changeName:function(e){let {index,ind} = e.currentTarget.dataset;this.setData({[`arr[${index}][${ind}].name`] : "哇哈哈"});}

2. 浮点数据取整

使用"~~(1.999)" 语法，将浮点数 向下取整

    <view>{{~~(1.9999)}}</view><!-- 最后效果 --><view>1</view>

微信小程序小技巧分享相关推荐

wxparse使用-小程序开发技巧分享（四）
注意点:很多小伙伴可能会发现自己的图片没有显示,解决办法: wxParse -> html2json.js 找到一下位置: 为图片节点添加你的服务器地址. 为代替小程序 rich-text ...
微信生鲜小程序运营技巧临沂修齐网络专业开发生鲜水果商城小程序
生鲜小程序运营技巧 1.线上线下会员沉淀生鲜水果店可以通过微信小程序实现会员功能,包括会员积分,会员充值.会员等级,借助微信的用户数据,为用户加上会员标签.特征分组.从而实现精准营销. 2.新鲜到家 ...
微信小程序推广技巧、营销方案
微信小程序推广技巧.营销方案小程序已经成功上线了!那么,小程序线下如何推广?线下门店如何玩转小程序呢? 1.附近的小程序,让商家曝光率更高小程序自带"附近的小程序"功能,利用 ...
微信小程序小程序源码包括后台完整版分享
需要的留邮箱免费发! 版权归作者所有,任何形式转载请联系作者. 作者:执波仔丶(csdn博客) 最新收集的60个微信小程序源码分享+开发视频教程最新收集的60个微信小程序源码分享+开发视频教程最新收 ...
微信小程序将支持分享到朋友圈；美团入局社区团购；Kotlin 1.4-M3 发布 | 极客头条
整理 | 屠敏头图 | CSDN 下载自东方 IC 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦,快来看今天都有哪些值得我们技术人关注的重要新闻吧. 一分钟 ...
微信小程序之——自定义分享按钮（完整版）
声明 onShareAppMessage 函数 onShareAppMessage() { return { title: '弹出分享时显示的分享标题' desc: ' ...
微信小程序—页面内分享按钮用图标代替
微信小程序-页面内分享按钮用图标代替前言代码效果图前言张小龙不知道出于什么原因将打开客服会话.触发用户转发.打开授权设置页.打开"意见反馈"页面等功能全都挂载到butto ...
【源码分享】一键打开禅意生活——电子木鱼微信小程序源码分享
为大家推荐一个在线的AI聊天:魔术AI-8080n点cn界面简洁精美,免费点开即用在快节奏的现代生活中,我们需要一种方式来减轻压力和焦虑,让我们的身心得到放松和平静.电子木鱼微信小程序是一款专门为人 ...
微信小程序非webview分享给好友及生成分享海报
微信小程序非webview分享给好友及分享海报 UI展示点击分享显示分享sheet: 点击生成海报,展示海报预览图片: 组件目录结构: 代码 works文件 woks.json中引入: " ...

微信小程序小技巧分享

微信小程序小技巧分享

1. 滚动加载数据方式

2. 浮点数据取整

微信小程序小技巧分享相关推荐

最新文章

热门文章