小程序《旧岛》项目笔记（6）-自定义事件的激活&监听与点赞&取消点赞

我就是我 2021-09-16 06:14 264阅读 0赞

## 自定义事件的激活与监听 ##

### 自定义事件激活 ###

自定义组件触发事件时，需要使用  triggerEvent  方法，指定事件名、detail对象和事件选项。

其中，like 表示自定的事件， behavior: status  表示  detail  对象，事件选项的属性不可以开发者自己定义，有bubbles、composed、capturePhase

// 激活
          let status = this.properties.like ? "like" : "cancel";
          this.triggerEvent('like', {
            behavior: status
          }, {});

### 自定义事件监听 ###

自定义事件绑定在组件上，并触发相应的函数。

<v-like like='{
       {classicData.like_status}}' count='{
       {classicData.fav_nums}}' bind:like='onLike'></v-like>

### 点赞&取消点赞 ###

新建一个新的组件 like ，引入 Http 类的目的是为了发送网路请求，且根据 like\_or\_cancel 值的不同，调用不同的接口，完成点赞与取消点赞。

import {
      Http
    } from '../utils/Http.js';
    class LikeModel extends Http {
      like(like_or_cancel, artID, category) {
        let url = like_or_cancel == 'like' ? '/like' : '/like/cancel';
        this.request({
          url: url,
          method: 'POST',
          data: {
            art_id: artID,
            type: category
          },
          success: (data) => {
            console.log(data)
          }
        })
      }
    }
    export {
      LikeModel
    }

在classic组件中，引入 like 组件，并调用 like 方法。

// pages/classic/classic.js
    // 引入ClassicModel类，并实例化一个对象
    import {
      ClassicModel
    } from '../../models/Classic.js';
    import {
      LikeModel
    } from '../../models/Like.js';
    let classicModel = new ClassicModel();
    let likeModel = new LikeModel();
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        classicData: null
      },
      onLike: function(event) {
        console.log(event);
        let like_or_cancel = event.detail.behavior;
        likeModel.like(like_or_cancel, this.data.classicData.id, this.data.classicData.type);
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function(options) {
        classicModel.getLatest((res) => {
          console.log('classic页面数据为：', res);
          this.setData({
            classicData: res
          })
        });
    
      }
    })