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

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

记微信小程序踩过的一些坑_第1张图片

尝试去修改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后仍然如此。

记微信小程序踩过的一些坑_第2张图片

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

    
        
            
                
                    
                    
                
                
                    
                    {{tableTitle[currentTab]}}(近30天)
                
                
        {{navTitle[0]}}
        {{navTitle[1]}}
        {{navTitle[2]}}
    

禁止swiper组件左右滑动

阻止其滑动事件

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

 

你可能感兴趣的:(学习笔记,小程序)