[003]小程序系列 | 标签设置了bindtap无法点击？层级问题！！！

目录

 

一、背景

1.1效果 

1.2视图层

1.3逻辑层

1.4提出问题

二、问题探索

2.1将bindtap放在class="video" 上(也就是class="item"的父节点上)

2.2将bindtap放在class="tag" 上(也就是class="item"的子节点上)

2.3查看页面结构

2.3.1z-index=-1是什么？

2.3.2没注释z-index=-1前效果：

2.3.3 注释z-index=-1后

 三、总结

如果以后真的往前端方面发展，肯定还会有一篇专门说明层级问题的文章的！！！

---

一、背景

挺久没写过小程序了，今天想完成一些小项目，可是发现写页面的时候就除了问题！！！具体如下：

1.1效果 

 一个视频列表，点击进去查看详情，点击跳转主要通过bindtap实现...

1.2视图层

<view class="video">
    <block wx:for="{{data.video}}">
       <!-- 注意bindtap在class="item"内 -->
      <view class="item" bindtap="nav" style="background: url('{{item.url}}');background-size:contain;">
        <view class="tag">{{item.tag}}</view>
        <view class="list">
          <view class="left"> {{item.msg}}</view>
          <view class="right">{{item.time}}</view>
        </view>
      </view>
    </block>
  </view>

.video {
  display: flex;
  flex-wrap: wrap;
}

.video .item {
  width: 340rpx;
  height: 340rpx;
  border-radius: 20rpx;
  margin: 16rpx;
  z-index: -1;
}

... 以下省略

1.3逻辑层

...以上省略
  nav:function(e){
    console.log(e)
  }

1.4提出问题

bingtap里面函数没有触发，也就是没有打印！！！

二、问题探索

2.1将bindtap放在class="video" 上(也就是class="item"的父节点上)

<!-- 注意bindtap在class="video"内 -->
<view class="video" bindtap="nav" >
    <block wx:for="{{data.video}}">
      <view class="item" style="background: url('{{item.url}}');background-size:contain;">
        <view class="tag">{{item.tag}}</view>
        <view class="list">
          <view class="left"> {{item.msg}}</view>
          <view class="right">{{item.time}}</view>
        </view>
      </view>
    </block>
  </view>

上面发现可以打印！！！这就很奇怪了！

2.2将bindtap放在class="tag" 上(也就是class="item"的子节点上)

<view class="video" >
    <block wx:for="{{data.video}}">
      <view class="item" style="background: url('{{item.url}}');background-size:contain;">
        <!-- 注意bindtap在class="tag"内 -->
        <view class="tag" bindtap="nav" >{{item.tag}}</view>
        <view class="list">
          <view class="left"> {{item.msg}}</view>
          <view class="right">{{item.time}}</view>
        </view>
      </view>
    </block>
  </view>

一样！无法触发nav函数！

2.3查看页面结构

 无法选择class="item"里面的结构，只能选择class="video"！！！

调试到了这里，忽然想起以前的一篇文章《小程序同层渲染原理剖析》，会不会是因为层级问题而引起的？？？！

后来回去看了wxss设置！！果真有一个z-index=-1!!!看来是这个引起的了

2.3.1z-index=-1是什么？

让一个层在所有层的下面当背景！！

2.3.2没注释z-index=-1前效果：

class="item"在底层，而class="video"在其上层。因为class="video"在上层，所以只能触发class="video"里面的函数!

2.3.3 注释z-index=-1后

class="video"在底层，而class="item"在其上层。因为class="item"在上层，可以触发class="item"函数了!

分析了一下，似乎这里没使用z-index=-1也没事，将其注释掉后：

 三、总结

上面主要是想说明：在思考这类问题的时候，有时候需要考虑到层级问题！！！

如果以后真的往前端方面发展，肯定还会有一篇专门说明层级问题的文章的！！！