记微信小程序踩过的一些坑

使用wxcharts.js时界面滑动时，图表不跟随滑动，浮在元素上方。

尝试去修改canvas的z-index以及定位都不管用，查了很多资料发现官方有说明：

由于原生组件脱离在 WebView 渲染流程外，因此在使用时有以下限制： 

组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。 

后插入的原生组件可以覆盖之前的原生组件。 

原生组件还无法在 scroll-view、swiper、picker-view、movable-view 中使用。 

部分CSS样式无法应用于原生组件，例如： 

无法对原生组件设置 CSS 动画 

无法定义原生组件为 position: fixed 

不能在父级节点使用 overflow:hidden 来裁剪原生组件的显示区域

最后的解决方案：原本把canvas放在swiper组件里的，现在只好放弃用swiper组件了，修改结构后能够正常滑动了。网上查了其他的解决方案但是好像不管用，可以试试https://blog.csdn.net/qq_25740691/article/details/81867382

微信小程序wxcharts层级太高

项目中头部tab导航栏是自己写的，在开发者工具中一切正常；但是在真机上页面滑动时，wxharts的层级比tab栏高，调过两者的z-index后仍然如此。

根据微信官方的说明，使用cover-view替换tab的view后，可以解决以上的问题。（组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上， 后插入的原生组件可以覆盖之前的原生组件 ）

    <view class="tab-content" style="height:{{winHeight}}rpx">
        <view class="swiper-item" wx:for="{{chartsData.canvasId}}" wx:key="index" wx:if="{{index==currentTab}}">
            <choose-heade parameter="{{parameter}}" currentNum="{{currentTab}}" chartsTitle="{{chartsTitle}}" chartsImg="{{chartsImg}}" radioValue="{{radioValue}}" bind:parameterTap="noMyevent"/>
                <view class="charts-wrap">
                    <!-- wxcharts插件 -->
                    <canvas canvas-id="lineCanvas{{currentTab}}" disable-scroll="true" class="canvas" bindtouchstart="touchHandler" bindtouchmove="moveHandler" bindtouchend="touchEndHandler"></canvas>
                </view>
                <view class="head">
                    <image src="{{tableImg[currentTab]}}" class="img"/>
                    <view class="title">{{tableTitle[currentTab]}}<text class="text">(近30天)</text></view>
                </view>
                <table tableData="{{listData}}" tableHead="{{tableHead[currentTab]}}"/>
        </view>
    </view>
    <!-- 组件间的优先级，放在后面的组件的优先级大于放在前面的组件 -->
    <cover-view class="tab-h">
        <cover-view class="tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="swichNav">{{navTitle[0]}}</cover-view>
        <cover-view class="tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="swichNav">{{navTitle[1]}}</cover-view>
        <cover-view class="tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="swichNav">{{navTitle[2]}}</cover-view>
    </cover-view>

禁止swiper组件左右滑动

阻止其滑动事件

// 禁止swiper滑动
catchTouchMove:function(res){
    return false
},