之前寫過一個商品詳情頁，要求用Echarts展示商品價格趨勢，最開始我用的是scroll-view，但是發(fā)現(xiàn)在scroll-view滾動的時候Echarts不會跟隨scroll-view滾動，而是自行滾動，是分離開的。

<!-- 導(dǎo)航欄組件 -->
<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>

后來發(fā)現(xiàn)，Echarts就是canvas原生組件，不建議用scroll-view包裹原生組件，但是又要滾動，所以就把scroll-view換成了view，不設(shè)置高，也是可以滾動的

<!-- 導(dǎo)航欄組件 -->
<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>

但是后來又發(fā)現(xiàn)，echarts的層級過高，滾動的時候，會遮蓋住導(dǎo)航欄部分，很不友好。原生組件是不支持z-index的，所以設(shè)置多少都沒有用，差了很多資料，據(jù)說把canvas的bindtouchstart和bindtouchend、bindtouchmove給去掉也是可行的。

canvas

但我這個echarts要求能拖動標(biāo)點(diǎn)，業(yè)務(wù)不支持。

所以我就想著在滾動到一定的高度時，把echarts隱藏掉

先獲取echarts以上元素的高度

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

然后最迷惑的事兒就是view并沒有監(jiān)聽滾動的方法呀，怎么才能獲取滾動的高度呢？
一頓走親訪友式詢問，才知道還有個監(jiān)聽頁面滾動的方法：onPageScroll

//監(jiān)聽頁面滾動
onPageScroll(e){
    console.log(e.scrollTop)
    this.setData({scrollTop:e.scrollTop})
},

這樣就獲取到了滾動高度和echarts以上元素的高度

最后給價格圖表加上限制條件就好了

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

現(xiàn)在滾動到echarts的時候就把他隱藏了，雖然樣式不是很好看，但是基本的問題解決了，就醬。