之前写过一个商品详情页，要求用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给去掉也是可行的。
canvas
但我这个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>
