收藏
回答

关于wepy 组件事件绑定不成功问题

问题模块 框架类型 终端类型 微信版本 基础库版本
框架 小程序 工具 6.6.3 1.9.91
在用wepy做一个定制礼品电商小程序,要用到多个九宫格的设计,这是index
 

下面是tags
 

在index四宫格点击酒类进行tags类别为酒的六宫格,再点击cellitem就进入商品详情
于是用组件化解决重复代码问题,中间遇到一个问题,半天还想不通:目录结构

Page  -----
   index.wpy
   tags.wpy
Component -----
   cell.wpy
   cellitem.wpy

通过index 调用 cell 组件(每两个cell为一组),cell组件调用cellitem组件(渲染每个cell)
下面是index的数据:

    • 0:Array(2)

    • 0:{created: "2018-03-01 16:25:11", share_url: "https://shop40630714.youzan.com/v2/showcase/tag?alias=p8sg1j7u", name: "服装", alias: "p8sg1j7u", id: 100409681, …}

    • 1:{created: "2018-03-01 16:25:03", share_url: "https://shop40630714.youzan.com/v2/showcase/tag?alias=gu5m0ecf", name: "皮具", alias: "gu5m0ecf", id: 100409676, …}

    • length:2

  •   1:Array(2)

    •   0:{created: "2018-03-01 16:23:51", share_url: "https://shop40630714.youzan.com/v2/showcase/tag?alias=pji4p3l6", name: "鲜花", alias: "pji4p3l6", id: 100409642, …}

    •   1:{created: "2018-03-01 16:23:36", share_url: "https://shop40630714.youzan.com/v2/showcase/tag?alias=5jtnwmnh", name: "酒", alias: "5jtnwmnh", id: 100409638, …}

    • length:2


tages页面的数据也是类似的,两两元组组成二维数组,外层cell遍历一维,cellitem遍历二维
tags.wpy   与  index.wpy  代码一样 (祖宗)

    <view class="page-section">
      <cell :cellList.sync="cellList"></cell>
    </view>


这是cell.wpy(父组件)的相关代码
<repeat for="{{cellList}}" index="index" item="twocellitem">
    <view class="flex-wrp">
      <cellitem :twocell.sync="twocellitem"></cellitem>      
    </view>
  </repeat>

下面是cellitem.wpy(子组件)的相关代码
<repeat for="{{twocell}}" index="index" item="onecellitem">
          <view class="flex-item" @tap="{{onecellitem.page}}tap" data-id="{{onecellitem.id}}" data-name="{{onecellitem.name}}">
      <view class="page-section-ctn">
        <image class="image" src="{{onecellitem.imgsrc}}"/>
      </view>
      <view class="item-name">{{onecellitem.name}}</view>
    </view>
</repeat>


数据加载是没问题的,但事件绑定上有问题,从index点击【酒】分类的@tap是可以的,但进入tags后点击【item商品】@tap没反应






后来找文档,也按要求改了:


原生小程序支持的js [color=var(--theme-color,#42b983)]模块化,但彼此独立,业务代码与交互事件仍需在页面处理。无法实现组件化的松耦合与复用的效果。

例如模板阿中绑定一个bindtap="myclick",模板乙中同样绑定一样bindtap="myclick",那么就会影响同一个页面事件。对于数据同样如此。因此,只有通过改变变量或者事件方法,或者给其加不同前缀才能实现绑定不同事件或者不同数据。【我用的是“给其加不同前缀”当页面复杂之后就十分不利于开发维护

因此,在WePY中实现了小程序的组件化开发,组件的所有业务与功能在组件本身实现,组件与组件之间彼此隔离,上述例子在WePY的组件化开发过程中,A组件只会影响到阿所绑定的myclick,B也如此。

这是cellitem.wpy  的 事件绑定部分:

  methods = {

      indextap(e){

        console.log('cellitem组件去往tags页面事件:',e)

        wepy.navigateTo({

          url: '../pages/tags?id=' + e.currentTarget.dataset.id + '&name=' + e.currentTarget.dataset.name

        })

      },

      tagstap(e){

        console.log('cellitem组件去往item页面事件:',e)

        wepy.navigateTo({

          url: '../pages/item?id=' + e.currentTarget.dataset.id + '&name=' + e.currentTarget.dataset.name

        })

      }

    }  // 声明页面wxml中标签的事件处理函数。注意,此处只用于声明页面wxml中标签的bind、catch事件,自定义方法需以自定义方法的方式声明

请问:这个BUG从哪里可找到原因,我没头绪,求救,求教!


最后一次编辑于  2018-03-03  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏