ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

微信小程序Echarts 二次渲染失败 及 组件监听父页面传递值的变化 及 wx.navigateBack 目标页面Onload 不加载问题

2021-11-30 19:02:17  阅读:187  来源: 互联网

标签:Onload ef navigateBack initChart 组件 var data 页面


十年河东,十年河西,莫欺少年穷

学无止境,精益求精

我其实是一个Net后台开发,后来学会了物联网开发及网络编程,再后来学会了VUE及熟悉了React,现在我又做起了小程序开发,

学会小程序我只用了三周时间,期间学了Flex布局/Position定位,微信官方文档,哔哩哔哩视频教程,、ES6等

人呐,必须充实自己,挑战自我 

1、 wx.navigateBack 跳转,目标页面OnLoad不加载问题。 https://www.cnblogs.com/chenwolong/p/15582100.html 

    // wx.navigateBack({
    //   delta: 1
    // })

上述代码,跳转至目标页面后,目标页面onload事件不执行,要解决此问题,需改为:

    wx.navigateBack({
      delta: 1,
      success: function (e) {
        var page = getCurrentPages().pop();
        if (page == undefined || page == null) return;
        page.onLoad();
      }
    })

2、 组件监听父页面传递值的变化 observer: function (newValue, oldValue) 

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    sucesslvData: {
      type: Array,
      value: [],
      observer: function (newValue, oldValue) {
        let that = this;
        //console.log(newValue)
        data = newValue;
        var nowTime = dayjs().format("YYYY-MM-DD");
        let day = dayjs(nowTime).format("DD") + '日';
        let ef = data.filter(A => A.X == day);
        //console.log(ef)
        if (ef && ef.length > 0) {
          that.setData({
            TodayInfo: ef[0].Y + "%"
          })
        }
        if (canvas1) {
          initChart(canvas1, width1, height1, dpr1);
        }
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    ec: {
      onInit: initChart
    },
    TodayInfo: ""
  },
  lifetimes: {
    attached: function () {

    }
  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

重点代码:

    sucesslvData: {
      type: Array,
      value: [],
      observer: function (newValue, oldValue) { //侦听父页面传递值的变化

通过 observer 方法,我们可以监听父页面传值的变化,当父页面因传递不同参数请求接口,导致父页面传递值变化时,可做到及时侦听并更新子组件数据。

父页面示例代码:

  <sucesslv title="最近7天换电成功率" sucesslvData="{{sucesslvData}}"></sucesslv>

传递的值为:sucesslvData

3、解决Ecahts二次渲染失败的问题

var dayjs = require('dayjs')
import * as echarts from '../../pages/ec-canvas/echarts';
// 数据
var data = [{
  X: "12日",
  Y: 100
}, {
  X: "13日",
  Y: 100
}, {
  X: "14日",
  Y: 100
}, {
  X: "15日",
  Y: 100
}, {
  X: "16日",
  Y: 100
}, {
  X: "17日",
  Y: 100
}, {
  X: "18日",
  Y: 100
}]
// 存储住首次调用函数的参数  方便后续调用时传参取值
var unit = '%'
var canvas1 = ''
var width1 = ''
var height1 = ''
var dpr1 = ''

function initChart(canvas, width, height, dpr) {

  canvas1 = canvas
  width1 = width
  height1 = height
  dpr1 = dpr
  const chart = echarts.init(canvas, null, {
    width: 375,
    height: height,
    devicePixelRatio: dpr
  });
  canvas.setChart(chart);


  var option = {
    color: "#6c5ce7",
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      top: "8%",

    },
    xAxis: [{
      type: 'category',
      data: data.map(A => A.X),
      axisTick: {
        alignWithLabel: true
      }
    }],
    yAxis: [{
      type: 'value'
    }],
    series: [{
      name: '换电次数',
      type: 'bar',
      barWidth: '60%',
      data: data.map(A => A.Y),
    }]
  };
  chart.setOption(option);
  return chart;

  //柱状图

}

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    title: {
      type: String,
      value: ""
    },
    changeData: {
      type: Array,
      value: [],
      observer: function (newValue, oldValue) {
        let that = this;
        data = newValue;
        var nowTime = dayjs().format("YYYY-MM-DD");
        let day = dayjs(nowTime).format("DD") + '日';
        let ef = data.filter(A => A.X == day);
        if (ef && ef.length > 0) {
          that.setData({
            TodayInfo: ef[0].Y + "次"
          })
        }
        /*为解决Echarts二次渲染失败的问题,需要显式调用initChart方法来重新渲染组件*/
        if (canvas1) {
          initChart(canvas1, width1, height1, dpr1);
        }
       /*为解决Echarts二次渲染失败的问题,需要显式调用initChart方法来重新渲染组件*/
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    ec: {
      onInit: initChart
    },
    TodayInfo: ""
  },
  lifetimes: {
    attached: function () {
      // 在组件实例进入页面节点树时执行

    }
  },
  /**
   * 组件的方法列表
   */
  methods: {

  }
})
View Code

上述代码是个人的一个组件,父页面引用该组件,并传递值到组件,父页面代码

 

 上述折叠代码中,核心代码如下:

        /*为解决Echarts二次渲染失败的问题,需要显式调用initChart方法来重新渲染组件*/
        if (canvas1) {
          initChart(canvas1, width1, height1, dpr1);
        }
       /*为解决Echarts二次渲染失败的问题,需要显式调用initChart方法来重新渲染组件*/

 

 JS中,将initChart 的画布,宽高等属性对外暴露,并赋值为全局变量,如下

 

 最后,调用上述核心代码即可重新渲染。

 @天才卧龙的博客

标签:Onload,ef,navigateBack,initChart,组件,var,data,页面
来源: https://www.cnblogs.com/chenwolong/p/15625564.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有