目录
一.背景
1.1效果
1.2视图图层
1.3逻辑层
1.4提问
二.问题探究
2.1将绑定tap放在class='video '上，即放在class='item '的父节点上
2.2将绑定tap放在class='tag '上，即放在class='item '的子节点上
2.3查看页面结构
2.3.1什么是z-index=-1？
2.3.2无注释z-index=-1前效应：
2.3.3注释z-index=-1之后
三.总结
今后如果真的发展到前端，一定会有专门说明水平问题的文章！
一、背景很久没写过小程序了，今天想完成几个小项目，但是写页面的时候除了问题！ 具体情况如下。
1.1效果
视频列表。 点击查看详情，点击主要通过bindtap实现...
1.2视图层view clas
s="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也没事，将其注释掉后：
三、总结上面主要是想说明：在思考这类问题的时候，有时候需要考虑到层级问题！！！
如果以后真的往前端方面发展，肯定还会有一篇专门说明层级问题的文章的！！！