Echarts影响scroll-view滚动、监听页面滚动、view监听滚动

之前写过一个商品详情页，要求用Echarts展示商品价格趋势，最开始我用的是scroll-view，但是发现在scroll-view滚动的时候Echarts不会跟随scroll-view滚动，而是自行滚动，是分离开的。

<!-- 导航栏组件 -->
<NavigationBar background='#FF7A31' isShowBack='{
    
    {true}}'></NavigationBar>
<!-- 滚动部分 -->
<scroll-view class="goods_page" scroll-y="false" scroll-with-animation="true">
    ...
    <view class="chart_info" hover-class="none" hover-stop-propagation="false">
    <!-- 图表公共组件 -->
        <PriceChart goodsUrl='{
    
    {goodsUrl}}' isVideo='{
    
    {false}}' bind:closePriceHistory='closePriceHistory'></PriceChart>
    </view>
    ...
</scroll-view>

后来发现，Echarts就是canvas原生组件，不建议用scroll-view包裹原生组件，但是又要滚动，所以就把scroll-view换成了view，不设置高，也是可以滚动的

<!-- 导航栏组件 -->
<NavigationBar background='#FF7A31' isShowBack='{
    
    {true}}'></NavigationBar>
<!-- 滚动部分 -->
<view class="goods_page" scroll-y="false" scroll-with-animation="true">
    ...
    <view class="chart_info" hover-class="none" hover-stop-propagation="false">
    <!-- 图表公共组件 -->
        <PriceChart goodsUrl='{
    
    {goodsUrl}}' isVideo='{
    
    {false}}' bind:closePriceHistory='closePriceHistory'></PriceChart>
    </view>
    ...
</view>

但是后来又发现，echarts的层级过高，滚动的时候，会遮盖住导航栏部分，很不友好。原生组件是不支持z-index的，所以设置多少都没有用，差了很多资料，据说把canvas的bindtouchstart和bindtouchend、bindtouchmove给去掉也是可行的。

但我这个echarts要求能拖动标点，业务不支持。

所以我就想着在滚动到一定的高度时，把echarts隐藏掉

先获取echarts以上元素的高度

    //获取元素高度
   let query =  wx.createSelectorQuery();
   let that=this;
   query.select('.goods_detail').boundingClientRect(res=>{
    
    
        that.setData({
    
    hiddenChart:res.height})
   }).exec();

然后最迷惑的事儿就是view并没有监听滚动的方法呀，怎么才能获取滚动的高度呢？
一顿走亲访友式询问，才知道还有个监听页面滚动的方法：onPageScroll

//监听页面滚动
onPageScroll(e){
    
    
    console.log(e.scrollTop)
    this.setData({
    
    scrollTop:e.scrollTop})
},

这样就获取到了滚动高度和echarts以上元素的高度

最后给价格图表加上限制条件就好了

<!--隐藏图表的条件-->
<PriceChart
    goodsUrl='{
    
    {goodsUrl}}'
    isVideo='{
    
    {false}}'
    bind:closePriceHistory='closePriceHistory'
    hidden="{
    
    {scrollTop>hiddenChart}}"
></PriceChart> 

现在滚动到echarts的时候就把他隐藏了，虽然样式不是很好看，但是基本的问题解决了，就酱。