评论

干货

写项目中的一些个人技巧 都是个人意见 欢迎各位大佬亲临指导

<view>{{~~(1.999)}} </view>

这样可以取整;
注意:是向下取整的

<view>{{~~(1.999)}} </view>
最终渲染为 <view>1</view> 感谢 寒雪 提醒 .

为了防止setData一次传输大量的代码导致页面卡顿或者报错,个人建议使用下面的做法:

滚动加载或者点击加载更多数据的时候,我们一般会采取分页的形式,后端一次会给我10条数据或者5条 给我们的数据一般都是数组

page({
data:{
mrData:[]
}
})

我们把从后端拿到的数据这样做 【我是第一次获取的数据是一个数组】

当用户滚动加载的时候 从后台获取到第二次数据
【我是第一次获取的数据,我是第二次获取的数据】

具体写法
let that = this;
this.setData({
[mrData[${that.data.mrData.length}]]:后台给的数组
})
不知道为什么 我写上 ``不显示了 记住是利用 ES6字符串模板 其转化后为
this.setData({
[‘mrData[0]’]:后台给的数组
})

循环数据的话
<block wx:for=’{{mrData}}’ wx:key>
<block wx:for=’{{item}}’ wx:key wx:for-item=‘it’ wx:for-index=‘ind’>
{{it}}
</block>
</block>

这样就可以了 这样做的好处就是 每次修改只修改部分 这样就解决了 每次滚动加载的是 我们都要重新赋值大量的数据

我还是粘贴一下代码的好 如下:

渲染后的页面出现的效果 如下

点击第一个 小浪花

成功改变了 nice

一般的写法是这样的 不知道和你写的是否一样

从后台获取数据后 然后把这个数据 push到原来的大数组中
然后再setData 每次setData的数据都会增大 最后超过限制导致页面卡顿影响性能 有可能还会报错

还有就是 第一次写文章 不知道这样写是否有人能看懂 ,希望大家能由此举一反三,看到类似的问题可以想到这样的方法 虽然有些繁琐 但是真的能优化性能,如果能帮到你 希望动动小手指 给我点个赞吧~
O(∩_∩)O哈哈~
默默无闻的余小浪

最后一次编辑于  2019-05-22  
点赞 17
收藏
评论

17 个评论

  • 小蒜泥
    小蒜泥
    2019-05-16

    例如修改大数组中的某条数据

    let {index,ind} = ev.currentTarget.dataset;

    // 这里的index,ind  是事件传递过来的数组索引   index 是 大数组中的单个元素  【[],[]】 即  []

    // ind是  []   小数组中的单个元素

    this.setData({

        [`mrData[${index}][${ind}].name`]:'余'

    })

    修改的时候 针对具体的某个值修改  setData就不会一次性传输大量的数据了

    2019-05-16
    赞同 3
    回复
  • Yayure
    Yayure
    2019-05-16

    完整写法:



    2019-05-16
    赞同 2
    回复 6
    • 小蒜泥
      小蒜泥
      2019-05-16

      对对 就是这个样子的   很nice

      2019-05-16
      1
      回复
    • 小蒜泥
      小蒜泥
      2019-05-16


      2019-05-16
      3
      回复
    • 穿秋裤的男孩
      穿秋裤的男孩
      2019-05-24回复小蒜泥

      这边为什么要提前保存this呢?this.data的this不也是指向当前page实例么? 小白勿喷,谢谢

      2019-05-24
      回复
    • 小蒜泥
      小蒜泥
      2019-05-27回复穿秋裤的男孩

      没错的  但是 我自己写的时候有个习惯  就是防止 this指向出现问题 提前把 page实例对象赋值给一个变量   个人习惯   可以忽略  O(∩_∩)O哈哈~

      2019-05-27
      回复
    • 小蒜泥
      小蒜泥
      2019-05-27回复穿秋裤的男孩

      声明一次就可以了  声明全局 that就可以了

      2019-05-27
      回复
    查看更多(1)
  • Solong9102
    Solong9102
    2019-05-22

    秒啊~(王司徒脸~~~

    2019-05-22
    赞同 1
    回复 1
    • 小蒜泥
      小蒜泥
      2019-05-22

      可以想象到的表情   哈哈哈

      2019-05-22
      回复
  • 番茄炖地蛋
    番茄炖地蛋
    2019-05-21

    可以,受用

    2019-05-21
    赞同 1
    回复 3
    • 小蒜泥
      小蒜泥
      2019-05-21

      我准备再写一篇文章呢

      2019-05-21
      回复
    • 番茄炖地蛋
      番茄炖地蛋
      2019-05-21回复小蒜泥

      可以,期待学习更多

      2019-05-21
      1
      回复
    • 添
      2019-05-21回复小蒜泥

      其实更想看的是你的源码,学习下你的编程方式和代码结构,建议尽量把可看的源码公布出来做贡献呢

      2019-05-21
      回复
  • A_Gxk
    A_Gxk
    2019-05-21

    学到了。


    2019-05-21
    赞同 1
    回复 1
    • 小蒜泥
      小蒜泥
      2019-05-21

      (#^.^#)

      2019-05-21
      2
      回复
  • 添
    2019-05-21

    受教🙏

    2019-05-21
    赞同 1
    回复 1
    • 小蒜泥
      小蒜泥
      2019-05-21

      点个赞呗

      2019-05-21
      回复
  • 张鑫
    张鑫
    2019-05-17

    这好,要mark下!

    2019-05-17
    赞同 1
    回复
  • 寒雪
    寒雪
    2019-05-16

    <view>{{~~(0.1122)}} </view>
    这样可以取整;-->向下取整

    2019-05-16
    赞同 1
    回复 1
    • 小蒜泥
      小蒜泥
      2019-05-16

      是的  我马上备注一下

      2019-05-16
      回复
  • 铭锋科技
    铭锋科技
    2019-05-16

    期待更多

    2019-05-16
    赞同 1
    回复 1
    • 小蒜泥
      小蒜泥
      2019-05-16

      好 我会努力的

      2019-05-16
      回复
  • 小蒜泥
    小蒜泥
    2019-05-16

    妈妈再也不担心setData一次传输大量数据了

    2019-05-16
    赞同 1
    回复

正在加载...

登录 后发表内容