小程序组件嵌套防止事件冒泡

Sat, 09 May 2020 00:00:00 +0000

在实际使用中，遇到下面这种情况。在父View的绑定事件openImgDialog实现图片预览，子View绑定事件delImage实现删除图片。如下图效果：

<view class="bg-white padding">
  <view class="grid col-4 grid-square">
    <view class="bg-img" wx:for="{{detail.imgInfo}}" wx:key style="background-image:url({{item.url}});" bindtap="openImgDialog" data-url="{{item.url}}">
      <view class="is-tag bg-red" bindtap="delImage" data-id="{{item.id}}">
        <text class="isIcon-close"></text>
      </view>
    </view>
  </view>
</view>

在点击子View删除图片事件时，会同时触发父View预览事件。如下图所示：

事件分为冒泡事件和非冒泡事件：

冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

小程序官方文档-事件

小程序子组件列表下拉刷新

Wed, 15 Apr 2020 00:00:00 +0000

最近，研究小程序的过程中，遇到一个问题：小程序的组件Component并没有的Page下拉监听事件：

onPullDownRefresh 监听用户下拉动作
onReachBottom 页面上拉触底事件的处理函数

比如说，下面这样的结构：

index page 引用search-head组件
search-head component 引用search-list组件
search-list component 显示列表数据

那如何才能刷新组件的列表呢：

search-head提供搜索、翻页方法，传递数据给search-list。
search-list组件只显示数据。
page监听onReachBottom事件，然后调用search-head中的方法。

search-head

搜索头部组件，此组件内引用搜索列表组件。在这个组件内，实现搜索、翻页功能。通过组件将数据传递给子组件。

Wechat on Coding

小程序组件嵌套防止事件冒泡

小程序子组件列表下拉刷新

search-head