小程序初涉——页面滑动以及canvas层级问题

2018年08月13日

次

关于canvas的层级问题

在小程序里，map、canvas、video、textarea等 组件是由客户端创建的原生组件，它们的层级是最高的，不能通过 z-index 控制层级，因此在实际开发过程中就会遇到很多由此产生的问题。

最近在做一个小程序的项目，就这个现象遇到了以下问题：

问题一：浮动问题联动的页面滑动问题

如上图，页面只有一屏，在开发工具中都可以正常展示，但在真机环境下，用手指滑动页面时，canvas元素会随着手指的滑动而出现位置偏移。

==解决方法：可以通过禁止页面滑动，从而避免该现象。具体设置如下：==

//page里面对应的的json文件
{
    "disableScroll": true
}

值得注意的是，这个属性一定要在page对应的页面的json文件加上才会生效，在app.json中添加并没有效果

问题二：canvas层级过高，当他的外层盒子透明度为0时，并不能隐藏canvas

其实我遇到这个问题的场景还算是比较容易解决，如上图所示，无法隐藏的倒计时canvas空间所在的盒子其实此时透明度为0，为什么要将其设置为透明度为0而不是display为none，是因为我这边的需求是一个隐藏前一个盒子，显示后一个盒子的动画，所以解决方法就是==将控制动画的参数绑定到canvas的盒子上，控制canvas的show==

<!--参考代码实例-->
<!--wxml-->
<view wx:if="">
    <canvas></canvas>
</view>


<!--xxx.js-->
Page({
    data:{
        gameover:false
    },
    //...
})

13 Aug 2018

本博客所有博文作者 均为张敏。 所有文章除特别声明外，均采用 CC 3.0 License, 许可协议。转载请注明出处！ 博客源码可点击查看； 博客部分设计理念参考了羡辙杂俎。