微信小程序+.NET(十二) 小程序之层级覆盖 position&z-index

微信小程序之层级覆盖 position&z-index

  这个问题我想也有很多人遇到过，我的问题是出现在：微信小程序+.NET(十一) 小程序之小说阅读器实现 时，我是由于我的页面分为三个部分：

  加上顶部的自定义导航栏，其实是四层结构，在将页面组合起来时，第一次的问题是遇见过页面背景被底部工具栏遮挡导致只渲染一半背景的状况，当时找到是我的工具栏和页面内容放在了同一个<view>中导致的。
  我将页面分成这四个部分后，背景问题解决了，可是页面的按钮都没有响应，由这里我通过查找资料知道了微信小程序是存在层级覆盖的问题的，我猜想是我的层级问题，然后通过查看.wxss文件查找z-index并依次修改大小，解决了问题。
  1.首先查看.wxml：
  我们需要的是将内容作为最底层并铺满页面，然后将顶部和底部设置为更高层级，也就是z-index更大数值，这里为了避免冲突，将底部上下两部分工具栏作为最高层级，顶部次之。
  2.修改.wxss：
  这是页面部分里的三个部分，将上下两需要固定的部分z-index设置为一个较小的值90，且注意这里将position设置为fixed，设置为absolute或是relative会有上述说的背景无法铺满等问题。将中部z-index设置为一个很大的值10002 。

  然后设置底部上下工具栏，设置z-index为10004；position依然是fixed。


注意去components设置自定义导航栏的.wxss的z-index为10001;

emm。。。dbp上面说错了，应该是将顶部导航栏作为最小的z-index，因为要实现点击内容部分的中部文章然后显示底部导航栏，所以要使中部比导航栏z-index更大，不然会无法监听到内容的点击事件。

  参考文章：

1. 微信小程序–组件覆盖之position和z-index