安生白
安生白
  • 发布:2025-09-29 10:47
  • 更新:2025-09-29 10:52
  • 阅读:13

ucharts+vue2+uniapp编译到微信小程序时滚动页面后点击失灵

分类:插件市场

一个页面有四个图表,当一屏最多渲染两个,前两个如果不滚动页面时图表没有问题,一旦滚动页面,前两个图表的点击会失灵,只有在滚动到原来的位置点击才有效果```javascript
<template>
<scroll-view style="height: 100vh;background-color: #f7f8f9;" ref="scrollBox" scroll-y @scrolltolower="handleScroll" lower-threshold="200">
<view class="sticky-box">
<view class="sticky">
<!-- 页面头部 -->
<as-title text="首页" bgColor="#000" color="#333333"></as-title>
<image class="as-bg-img" src="https://pdsscjdglj.otcps.cn/img/bg.png" mode="aspectFill" />
</view>
</view>
<view style="height: 170upx;"></view>

    <!-- <view class="flex justify-between padding">  
        <view>账号:{{username}}</view>  
        <view click="ToWarn" @click="quit">退出登录<span class="cuIcon-right"></span></view>  
    </view> -->  
    <view class="bg-white" v-show="hasRole(['Admin'])" style="z-index: 9999999999999999999999;">  
        <!-- 头部数据 -->  
        <view class="text-df justify-between flex padding-lg ">  
            <view class=" text-bold text-xl" @click="changeParentValue('unit')">单位列表></view>  
            <view class="justify-around flex align-center">监督单位<span class="text-xxl margin-left-xs text-bold">{{empTotal}}</span></view>  
        </view>  
        <!-- 图表 -->  
        <qiun-data-charts type="ring" :opts="opts" :chartData="chartData"   
        @getIndex="(e)=>handleChartClick(e,'unit')" ref="chart"  
        v-if="chartData.series[0].data.length>0" canvas2d  
            background="none"   :ontouch="true"  
            canvasId="SAJWHSkQEUxomFPMtSdrDViZMlmDBTJ2" />  
    </view>  
    <view style="height: 40upx;" v-show="hasRole(['Admin'])"></view>  
    <view class="bg-white" v-show="hasRole(['Admin'])" style="z-index: 9999999999999999999999;">  
        <!-- 头部数据 -->  
        <view class="text-df justify-between flex padding-lg ">  
            <view class=" text-bold text-xl " @click="changeParentValue('earlyWarning')">预警列表></view>  
            <view class="justify-around flex align-center">累计预警(次)<span class="text-xxl margin-left-xs text-bold">{{warnCount}}</span></view>  
        </view>  
        <!-- 图表 -->  
        <qiun-data-charts type="ring" :opts="opts" :chartData="chartData1"   
        @getIndex="(e)=>handleChartClick(e,'earlyWarning')" ref="chart"  
        v-if="chartData1.series[0].data.length>0" :canvas2d="true"  
            canvasId="SAJWHSkQEUxomFPMtSdrDViZMlmDBTJ3" />  
    </view>  
    <view style="height: 40upx;" v-show="hasRole(['Admin'])"></view>  
    <view class="bg-white" v-show="hasRole(['Admin'])" style="z-index: 9999999999999999999999;">  
        <!-- 头部数据 -->  
        <view class="text-df justify-between flex padding-lg ">  
            <view class=" text-bold text-xl " @click="changeParentValue('patrol')">巡查列表></view>  
            <view class="justify-around flex align-center">今日巡察单位(家)<span class="text-xxl margin-left-xs text-bold">{{todayPatrolCount}}</span></view>  
        </view>  
        <!-- 图表 -->  
        <qiun-data-charts type="ring" :opts="opts" :chartData="chartData2"   
        @getIndex="(e)=>handleChartClick(e,'patrol')" ref="chart"  
        v-if="chartData2.series[0].data.length>0" :canvas2d="true"  
            canvasId="SAJWHSkQEUxomFPMtSdrDViZMlmDBTJ4" />  
    </view>  
    <view style="height: 40upx;" v-show="hasRole(['Admin'])"></view>  
    <view class="bg-white" v-show="hasRole(['Admin'])" style="z-index: 9999999999999999999999;">  
        <!-- 头部数据 -->  
        <view class="text-df justify-between flex padding-lg ">  
            <view class=" text-bold text-xl "></view>  
            <view class="justify-around flex align-center">今日预警(次)<span class="text-xxl margin-left-xs text-bold">{{todayWarnCount}}</span></view>  
        </view>  
        <!-- 图表 -->  
        <qiun-data-charts type="ring" :opts="opts" :chartData="chartData3"   
        @getIndex="(e)=>handleChartClick(e,'earlyWarning',true)" ref="chart"  
        v-if="chartData3.series[0].data.length>0"  :canvas2d="true"  
            canvasId="SAJWHSkQEUxomFPMtSdrDViZMlmDBTJ5" />  
    </view>  

    <view style="height: 170upx;" v-show="hasRole(['Admin'])"></view>  
    <view class=" text-df flex justify-between align-center bg-white padding" v-show="hasRole(['firmAdmin'])">  
        <view class="text-bold">  
            今日预警  
            <span class="cuIcon-refresh" style="margin-left: 5px;" @click="refreshLisk"></span>  
        </view>  
        <uv-picker ref="picker" :columns="[selectList.map((i)=>i.key)]" @confirm="confirm"></uv-picker>  
        <view @click="this.$refs.picker.open()" class="flex align-center" v-show="hasRole(['firmAdmin'])">  
            {{selectedValue}}  
            <span class="cuIcon-triangledownfill" style="font-size: 50upx;" />   
        </view>  
    </view>  
    <!-- 列表 -->  
    <view v-for="item in list" class="as-bigCar" :key="item" v-show="hasRole(['firmAdmin'])">  

        <view class="flex-sub flex flex-direction radius">  
            <view class=" text-df text-bold ">{{item.enterpriseName || '名字丢失'}}</view>  
            <view class="text-sm text-gray margin-tb-sm">  
                地址:{{item.addressProvinceName || ''}}-{{item.addressMunicipalityName || ''}}-{{item.addressCountyName || ''}}  
            </view>  
            <view class="flex">  
                <view class="text-sm as-tag bg-blue">{{item.addressCountyName}}</view>  
                <view class="text-sm as-tag bg-blue">{{item.enterpriseTypeName || ''}}</view>  
                <view class="text-sm as-tag" v-if="item.riskLevelName"   
                :style="{color:'#fff',backgroundColor:item.colourGrade? item.colourGrade:'#007ffc'}">  
                    {{item.riskLevelName}}  
                </view>  
            </view>  

        </view>  
    </view>  
    <as-myLoading :show="isLoad" text="加载中..." v-show="hasRole(['firmAdmin'])"></as-myLoading>  

    <view v-if="noImageShow && list.length>0 && hasRole(['firmAdmin'])" class="text-lg text-center" style="color: #7d7d7d;margin-top: 20upx;">-没有更多数据了-</view>  
    <image v-if="noImageShow && list.length<1 && hasRole(['firmAdmin'])" src="https://pdsscjdglj.otcps.cn/img/noDate.png"  
    style="height: 250upx;margin-top: 50%;margin-left: 50% ;transform: translate(-50%,-50%);" mode="heightFix"></image>  
    <view v-if="noImageShow && list.length<1 && hasRole(['firmAdmin'])" class="text-lg text-center" style="color: #7d7d7d;margin-top: -100upx;">-没有更多数据了-</view>  
    <view class="cu-tabbar-height"></view>  
</scroll-view>  

</template>

2025-09-29 10:47 负责人:无 分享
已邀请:
DCloud_UNI_JBB

DCloud_UNI_JBB

这个问题可以反馈到 ucharts 社区

要回复问题请先登录注册