微信小程序第二版基本完成,今天在改版第二版小程序页面时,又遇到了z-index层级覆盖以及跳转问题。
层级覆盖的判断还是通过对function进入后console.log()一下判断是否监听到了方法,若监听到而无响应则修改function,若未监听到且无响应则基本可以肯定是发生了层级覆盖,此时检查所有z-index以解决该问题。
跳转问题这次还是体现在web-view上,之前第一版的web-view代码是这样的:
<!--传keyword-->
<web-view src="https://so.88dush.com/search/index.php?q={{keyword}}" bindload="messageShow" wx:if="{{keyword!='' && url==''}}"></web-view>
<!-- 传URL -->
<web-view src="{{url}}" bindload="messageShow" wx:else></web-view>
wx:else这里的情况包括三种:
- keyword==’’ && url==’’
- keyword!=’’ && url!=’’
- keyword==’’ && url!=’’
这里就会报错,虽然确实是只命中了第三种,但是会报错
这里我没想明白错的原因,不过我知道怎么修改:
第一种:elif
<web-view src="https://so.88dush.com/search/index.php?q={{keyword}}" bindload="messageShow"
wx:if="{{keyword!='' && url==''}}"></web-view>
<web-view src="{{url}}" bindload="messageShow"
wx:elif="{{keyword=='' && url!=''}}"></web-view>
第二种:双if
<web-view src="https://so.88dush.com/search/index.php?q={{keyword}}" bindload="messageShow"
wx:if="{{keyword!=''}}"></web-view>
<web-view src="{{url}}" bindload="messageShow"
wx:if="{{url!=''}}"></web-view>
两种写法经测试都是正确的,也就是说,限定为一种条件,防止“一个页面只能插入一个web-view”
这种错误出现,当一个web-view出现多个条件选择就像上述的wx:else就内含多个选项会报错。