微信小程序scroll-view使用echarts遇到的坑

在之前做的一款小程序中,遇到了这样的的需求:
列表向下更新数据的操作,数据的展示大概是这个样子的:
产品图
当时脑子里就想着用scroll-view来实现效果,可惜我还是踩了原生小程序的坑啊。
百度出来这样的问题
1.canvas 组件是由客户端创建的原生组件,它的层级是最高的,不能通过 z-index 控制层级。
2.请勿在 scroll-view、swiper、picker-view、movable-view 中使用 canvas 组件。
3. css 动画对 canvas 组件无效。
4.避免设置过大的宽高,在安卓下会有crash的问题

最后是使用了onPageScroll来解决下拉刷新的效果,

onPageScroll:function(e){
    let _this=this
    var windowHeight = wx.getSystemInfoSync().windowHeight
    wx.createSelectorQuery().select('#list').boundingClientRect(rect=>{
      if( windowHeight+e.scrollTop >= rect.height-20  && _this.data.page<_this.data.totalPage){
        _this.setData({
          page:_this.data.page+1
        })
        _this.initData()
      }
        setTimeout(function(){
          if(_this.data.page == _this.data.totalPage){
            _this.setData({
              noMore:true,
              loading:false
            })
          }
        },2000)
    }).exec();
 }
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值