微信小程序实例：move事件导致navigator组件和tap事件无效

来源：互联网发布：mac 无法开机无法充电编辑：程序博客网时间：2024/05/20 11:47

今天，微信小程序终于发布了，激动的同时也在加紧最后公司项目的测试，结果发现了一个问题，就是在使用catch绑定move事件的时候，无法触发navigator组件的url和tap事件。测试如下：

test.wxml：：

<view class="flex-h" style="width: 750rpx; height: 200rpx; border: solid 1px green;" catchtouchstart="slideTouchStart" catchtouchmove="slideTouchMove" catchtouchend="slideTouchEnd">    <view class="item" bindtap="testTap" style="width: 100rpx; height: 100rpx; border: solid 1px red;">    1111    </view>    <view class="item" catchtap="testTap" style="width: 100rpx; height: 100rpx; border: solid 1px red;">    222    </view>    <view class="item" catchtap="testTap" style="width: 100rpx; height: 100rpx; border: solid 1px red;">    333    </view>    <navigator url="/pages/index/index" style="width: 100rpx; height: 100rpx; border: solid 1px red;">    <view>nnnn    fjlsdjfslfjs    dljfslfjsl    sdlfjdslkf    </view>    </navigator></view><!--或者把tap和navigator组件和绑定move事件的view组件对调也没有反应--><view class="flex-h" style="width: 750rpx; height: 200rpx; border: solid 1px green;" catchtap="testTap">    <view class="item" style="width: 100rpx; height: 100rpx; border: solid 1px red;" catchtouchstart="slideTouchStart" catchtouchmove="slideTouchMove" catchtouchend="slideTouchEnd">    1111    </view></view>

test.js：：

var App = getApp();Page({  data: {},  slideTouchStart: function (e) {    console.log('111')  },  slideTouchMove: function (e) {    console.log('222')  },  slideTouchEnd: function (e) {console.log('333')  },  testTap: function(e){    console.log('-1-1-1-10');  },  onLoad: function (options) {    var that = this;     }});

演示如下：

不晓得为啥move事件会导致这样的结果，按照html层级关系，我在内层写了tap事件应该是先触发了tap，然后在冒泡上去触发move事件，可是不管我tap事件是用catch还是bind绑定都无法触发，后来我把movestart事件用bind绑定了，竟然奇迹般的触发了内层的tap事件和navigator组件。不晓得是不是微信bug！！

最后演示如下：

然而，在指定了bindmovestart事件后的测试过程发现navigator组件的地址明明是正确的但是就是无法触发跳转操作，经测试猜测是不是目录结构的问题。为了证明，做了如下测试：

这里我的pages目录有的是2级的有的是3级的，比如pages/index/index是2级的，pages/search/city/city是3级的，我当前测试的目录是pages/test/test。结果发现无法跳转index页面，可以跳转city页面。
为了进一步证实，我又跑去city页面进行测试跳转到index页面，结果发现也是无法跳转的，但是能跳转到text页面。
最后，突然想到我的首页，很多图片是Failed to load image...not found状态，导致编译的时候控制台会出现编译出错信息，而我的city页面和test页面是没有图片，并没有报错，因此能正常跳转。可是我找不到的图片也都指定了默认图片了。还会这样，真的是很奇葩呢！！

**********************************************************************************************************************

然而，今天我又去翻看了下navigator组件，发现redirect要移除了，增加了open-type类型，新增跳转tabBar页面的制定类型switchTab。然后我又去查看navigatorTo接口和redirectTo接口发现官方文档给出如下提示：

这样的话，是不是说明navigator组件也需要制定open-type=switchTab的情况下才能跳转呢？？经测试证明确实是这样的，如果是跳转tabBar页面就需要强制制定open-type类型，页面之间就能正常跳转了。

**********************************************************************************************************************

【最后结贴2017-01-13】

1 0