uni-app H5使用 tabbars切换,echartst图表变小 宽度只有100px问题解决

news2024/11/25 23:51:23

 问题:

跳转到别tabbars页面之后,再回来,echarts图显示缩小小团子。

原因分析:

在tabs切换中有echarts的话,我们会发现初始化的那个echarts是有宽度的,当点击tabs切换之后,切换过来的echarts只剩下100px的宽度。
这是因为渲染的时机不对,我们需要在点击到当前切换的时候在echarts父级加载完毕之后在执行echarts,而不是在页面初始化的时候就把所有tabs里面的echarts都执行。
因为echarts会根据父级给宽度,而在初始化页面的时候其他tabs切换是display:none;没有宽度,所以会发生以上问题。

解决:

tabbars跳转后,将echarts删除,跳转回来之后,再重新绘制。使用v-if解决

 增加: v-if="chart"

 tabbars点击事件:onTabItemTap,点击回来时,将chart:true,

页面离开时,onHide: 将chart=false

<view class="seven">
      <view class="chart-title">近7天洗涤费趋势</view>
      <view class="charts-box" v-if="chart">
        <qiun-data-charts
            type="column"
            :eopts="eopts"
            :chartData="chartData"
            :echartsH5="true"
            :resize="echartsResize"
            padding="0"
            margin="0"/>
      </view>
    </view>

//..
data(){
return {
 chart: false,
}
}

  onHide() {
    console.log(">>页面不见了")
    this.chart = false;
  },
  onShow() {
    console.log(">>>2. onShow,tabs每次跳转触发 ")
    this.chart = true
  },

  methods: {
    onTabItemTap(item) {
      console.log(">>|------------点击事件", item)
    },
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1009370.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Python+requests编写的自动化测试项目

框架产生目的&#xff1a;公司走的是敏捷开发模式&#xff0c;编写这种框架是为了能够满足当前这种发展模式&#xff0c;用于前后端联调之前&#xff08;后端开发完接口&#xff0c;前端还没有将业务处理完毕的时候&#xff09;以及日后回归阶段&#xff0c;方便为自己腾出学(m…

Biome-BGC生态系统模型与Python融合技术:揭秘未来生态预测新趋势

Biome-BGC是利用站点描述数据、气象数据和植被生理生态参数&#xff0c;模拟日尺度碳、水和氮通量的有效模型&#xff0c;其研究的空间尺度可以从点尺度扩展到陆地生态系统。 在Biome-BGC模型中&#xff0c;对于碳的生物量积累&#xff0c;采用光合酶促反应机理模型计算出每天…

手机提词器有哪些?简单介绍这一款

手机提词器有哪些&#xff1f;手机提词器在现代社会中越来越受欢迎&#xff0c;原因是它可以帮助人们提高演讲和朗读的效果。使用手机提词器可以让人们更加自信地面对演讲和朗读&#xff0c;不至于出现口误或读错字的情况。此外&#xff0c;手机提词器还可以帮助人们节省时间和…

了解稀疏数组

稀疏数组&#xff08;一种数据结构&#xff09; package com.mypackage.array;public class Demo08 {public static void main(String[] args) {//1.创建一个二维数组 11*11// 0&#xff1a;没有棋子 1&#xff1a;黑棋 2&#xff1a;白棋int[][] array1 new int[11][11];…

OpenCV(四十一):图像分割-分水岭法

1.分水岭方法介绍 OpenCV 提供了分水岭算法&#xff08;Watershed Algorithm&#xff09;的实现&#xff0c; 使用分水岭算法对图像进行分割&#xff0c;将图像的不同区域分割成互不干扰的区域。分水岭算法模拟了水在图像中的扩散和聚集过程&#xff0c;将标记的边界被看作是阻…

Android Shadow 插件化原理演示

工程目录图 请点击下面工程名称&#xff0c;跳转到代码的仓库页面&#xff0c;将工程 下载下来 Demo Code 里有详细的注释 代码&#xff1a;LearnShadow

【Linux指令】Centos7 touch修改Access/Modify/Change 时间与恢复系统时间

文章目录 前言正文1. 查看文件状态2.只更新Access Time2.只更新Modify Time3. 修改Acess Time 与Modify Time为指定时间4. 修改Change时间5. 恢复系统时间 总结 前言 本篇主要讲解touch与时间相关的操作&#xff0c;关于touch创建文件&#xff0c;就不再赘述。 正文 1. 查看…

IP地址定位基础数据采集

在互联网时代&#xff0c;IP地址定位技术已经成为了广泛应用的一项重要技术。无论是用于网络安全、广告投放、市场调研还是用户体验优化&#xff0c;IP地址定位技术都发挥着关键作用。 什么是IP地址定位&#xff1f; IP地址定位是一种技术&#xff0c;它通过IP地址来确定设备…

行云管家全面适配信创国产化平台 助力政企信创环境下数字化转型与安全运维

近日&#xff0c;作为云计算管理及信息安全领域优秀的产品服务提供商&#xff0c;深圳市行云绽放科技有限公司宣布旗下行云管家系列产品已全面适配信创国产化平台&#xff0c;包括CPU、服务器、数据库、浏览器等&#xff0c;为政企客户提供符合信创环境要求的云计算管理与信息安…

排序算法-堆排序

思路 堆排序(Heapsort)是指利用堆积树&#xff08;堆&#xff09;这种数据结构所设计的一种排序算法&#xff0c;它是选择排序的一种。它是通过堆 来进行选择数据。需要注意的是排升序要建大堆&#xff0c;排降序建小堆。 我们先将要排序的数据建成堆&#xff0c;然后通…

【数据分享】上海市道路中心线数据(无需转发\单线\shp格式)

道路数据是我们在各项研究中经常使用的数据&#xff0c;我们一般获取到的数据都是多线道路&#xff08;也就是一条道路上有多条线来表示&#xff09;&#xff0c;这种多线道路并不适用于交通网络分析等操作中&#xff0c;很多时候我们需要单线道路数据&#xff0c;也就是道路中…

基于协同过滤算法的旅游推荐系统

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目介绍…

接口自动化测试中解决接口间数据依赖

在实际的测试工作中&#xff0c;在做接口自动化测试时往往会遇到接口间数据依赖问题&#xff0c;即API_03的请求参数来源于API_02的响应数据&#xff0c;API_02的请求参数又来源于API_01的响应数据。 因此通过自动化方式测试API_03接口时&#xff0c;需要预先请求API_02接口&a…

马来西亚市场最全开发攻略

东盟有十个国家&#xff0c;人口接近6亿&#xff0c;已连续13年成为我国最大贸易伙伴之一。数据显示&#xff0c;1-7月中国与东盟贸易总值为3.59万亿元&#xff0c;同比增长2.8%。东盟成员国中&#xff0c;与中国前三大贸易伙伴依次为越南、马来西亚和印度尼西亚。 今天来聊一…

2023.8.13百度之星(第二场)第一题官方题解注释说明

第一题&#xff1a;星际航行 #include<bits/stdc.h> using namespace std; int n, a[3][100010]; int tmp[100010]; long long calc(int *a,int opt){//opt等于0表示回合到同一个点花费的最小代价&#xff0c;opt等于1表示将数列排序成连续的整数数列for(int i1;i<n;i…

Spring基础(2w字---学习总结版)

目录 一、Spirng概括 1、什么是Spring 2、什么是容器 3、什么是IoC 4、模拟实现IoC 4.1、传统的对象创建开发 5、理解IoC容器 6、DI概括 二、创建Spring项目 1、创建spring项目 2、Bean对象 2.1、创建Bean对象 2.2、存储Bean对象&#xff08;将Bean对象注册到容器…

DevEco Studio中如何设置HarmonyOS/OpenHarmony应用开发

DevEco Studio内置有帮助中心&#xff0c;初学HarmonyOS 及OpenHarmony应用、元服务的开发者&#xff0c;通过内置的帮助中去系统的学习相关内容&#xff0c;是边练边学&#xff0c;快速上手的最佳方式。 一、帮助 二、快速开始 三、HarmonyOS应用、元服务开发相关 四、OpenHa…

c语言练习57:浮点数在内存中的存储

浮点数在内存中的存储 上⾯的代码中&#xff0c; num 和 *pFloat 在内存中明明是同⼀个数&#xff0c;为什么浮点数和整数的解读结果会差别 这么⼤&#xff1f; 要理解这个结果&#xff0c;⼀定要搞懂浮点数在计算机内部的表⽰⽅法。 根据国际标准IEEE&#xff08;电⽓和电⼦⼯…

自建私人图床方案:使用Cpolar+树洞外链轻松部署超轻量级图床,实现高效图片存储

文章目录 1.前言2. 树洞外链网站搭建2.1. 树洞外链下载和安装2.2 树洞外链网页测试2.3 cpolar的安装和注册 3.本地网页发布3.1 Cpolar临时数据隧道3.2 Cpolar稳定隧道&#xff08;云端设置&#xff09;3.3 Cpolar稳定隧道&#xff08;本地设置&#xff09; 4.公网访问测试5.结语…

Linux上防火墙操作

开放关闭防火墙 查看防火墙状态的命令&#xff1a;systemctl status firewalld 或者 firewall-cmd --state 暂时关闭防火墙的命令&#xff1a;systemctl stop firewalld 暂时开启防火墙的命令&#xff1a;systemctl start firewalld 永久关闭防火墙(禁用开机自启)下次启动&a…