小程序实现列表点赞功能

下面我来给您详细讲解“小程序实现列表点赞功能”的完整攻略。

概述

在小程序开发中，实现列表点赞功能是一项很常见的需求。本篇攻略将介绍如何在小程序中实现列表点赞功能。

实现过程

第一步：搭建页面

在 pages 目录下创建一个名为 index 的页面。在页面中创建一个遍历列表的结构，例如：

<view class="list">
  <block wx:for="{{list}}" wx:for-item="item">
    <view class="list-item">
      <view class="title">{{item.title}}</view>
      <view class="btn-like"
        bindtap="handleLike"
        data-id="{{item.id}}">{{item.like ? '已赞' : '点赞'}}</view>
    </view>
  </block>
</view>

其中， list 是一个数组，包含了每一项的数据。在每一项中，通过 data-id 属性设置每一项的唯一标识。

在 index.wxss 中添加相关样式，如：

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx;
  border-bottom: 1px solid #eee;
}

.btn-like {
  display: inline-block;
  padding: 8rpx 12rpx;
  border: 1px solid #ccc;
  border-radius: 4rpx;
}

第二步：处理点赞事件

在 index.js 中添加事件处理函数 handleLike ，如下：

Page({
  // 数据
  data: {
    list: [
      { id: 1, title: '文章1', like: false },
      { id: 2, title: '文章2', like: false },
      { id: 3, title: '文章3', like: false },
    ]
  },

  // 点赞事件处理函数
  handleLike(e) {
    // 获取当前项的 id
    const id = e.currentTarget.dataset.id

    // 获取当前项的索引
    const index = this.data.list.findIndex(item => item.id === id)

    // 取反当前项的点赞状态
    this.setData({
      [`list[${index}].like`]: !this.data.list[index].like
    })
  }
})

在该处理函数中，首先通过 e.currentTarget.dataset.id 获取当前项的唯一标识。然后通过数组的 findIndex 方法获取当前项的索引。最后通过 setData 方法更新当前项的点赞状态。

第三步：处理已赞状态

在 index.wxss 中添加已赞状态下的样式，如下：

.btn-like.like {
  border-color: #FF6A6A;
  color: #FF6A6A;
}

在 handleLike 方法中，还需要在更新数据后判断当前项是否已点赞，如果已经点赞，需为该项添加 like 类名。如下：

Page({
  // 点赞事件处理函数
  handleLike(e) {
    // 获取当前项的 id
    const id = e.currentTarget.dataset.id

    // 获取当前项的索引
    const index = this.data.list.findIndex(item => item.id === id)

    // 取反当前项的点赞状态
    this.setData({
      [`list[${index}].like`]: !this.data.list[index].like
    })

    // 判断当前项是否已点赞
    const className = this.data.list[index].like ? 'like' : ''
    const selector = `.list-item:nth-child(${index + 1}) .btn-like`
    const btn = this.selectComponent(selector)
    btn && btn.setData({ className })
  }
})

在该处理函数中，通过 selectComponent 方法获取当前项的按钮，并通过 setData 方法为该按钮添加或删除 like 类名，实现已赞状态的样式变化。

示例说明

下面给出两个示例，帮助理解上述实现过程。

示例一：简单示例

假设需求仅为实现点赞功能，不需要保存点赞信息。则只需要在 index.js 中添加事件处理函数，如下：

Page({
  // 点赞事件处理函数
  handleLike(e) {
    // 切换点赞状态
    const index = e.currentTarget.dataset.index
    const list = this.data.list.slice()
    const item = list[index]
    item.like = !item.like
    this.setData({ list })
  }
})

在 index.wxml 中创建点赞按钮，如下：

<button class="like-btn {{item.like ? 'liked' : ''}}"
  data-index="{{index}}" bindtap="handleLike">
  {{item.like ? '已点赞' : '点赞'}}
</button>

同时在 index.wxss 中说明样式，如下：

.like-btn {
  background-color: #eee;
  border: none;
  color: #333;
  padding: 10rpx 20rpx;
  border-radius: 5rpx;
  box-shadow: 0 0 2rpx #ccc;
  transition: background 0.5s;
}

.like-btn.liked {
  background-color: #ffac01;
  color: #fff;
}

其中， .like-btn 为点赞按钮的样式， .like-btn.liked 为已点赞状态下的样式。

示例二：保存点赞信息

假设需求需要保存点赞信息，则需要在点赞事件处理函数中保存信息，如下：

Page({
  // 数据
  data: {
    likes: {}
  },

  // 点赞事件处理函数
  handleLike(e) {
    // 获取当前项的数据
    const index = e.currentTarget.dataset.index
    const item = this.data.list[index]

    // 获取当前项的点赞状态
    const likes = this.data.likes
    const isLiked = likes[item.id]

    // 切换点赞状态
    item.like = !item.like
    likes[item.id] = item.like

    // 更新数据
    this.setData({ list: this.data.list, likes })
  },

  // 生命周期函数，从本地存储中读取点赞信息
  onLoad() {
    try {
      const likes = wx.getStorageSync('likes')
      if (likes) {
        this.setData({ likes })
      }
    } catch (e) { }
  },

  // 生命周期函数，保存点赞信息到本地存储
  onUnload() {
    try {
      wx.setStorageSync('likes', this.data.likes)
    } catch (e) { }
  }
})

在该示例中，通过 data.likes 属性保存所有文本的点赞信息。在点赞事件处理函数中，判断当前项的点赞状态，并将信息保存到 data.likes 中。

同时，在页面生命周期函数中，通过 wx.getStorageSync 方法从本地读取点赞信息，并在页面卸载时通过 wx.setStorageSync 方法保存点赞信息到本地。

在 index.wxml 中创建点赞按钮，并通过 like 属性判断是否已点赞，如下：

<button class="like-btn {{item.like ? 'liked' : ''}}"
  data-index="{{index}}" bindtap="handleLike">
  {{likes[item.id] ? '已点赞' : '点赞'}}
</button>

其中， likes[item.id] 为该项是否已点赞。

在 index.wxss 中说明样式，如下：

.like-btn {
  background-color: #eee;
  border: none;
  color: #333;
  padding: 10rpx 20rpx;
  border-radius: 5rpx;
  box-shadow: 0 0 2rpx #ccc;
  transition: background 0.5s;
}

.like-btn.liked {
  background-color: #ffac01;
  color: #fff;
}

以上就是实现小程序列表点赞功能的完整攻略。