微信小程序实例：收藏与取消收藏图片以及切换图片的功能效果-猿码集

1. 简介

微信小程序是一种基于微信开发的手机应用，它具有开发成本低、功能实用、占用空间小等特点。本文主要介绍微信小程序中一个非常实用的功能——图片的收藏与取消收藏以及切换图片的功能效果。在本文中，我们将学习如何在微信小程序中实现这个功能，并且能够灵活地运用到其他的项目中。

2. 功能介绍

这个小程序具有以下三个功能：

2.1 收藏图片

用户可以通过简单的点击，将需要收藏的图片添加到自己的收藏夹中，使得以后能够很方便地找到这个图片。

2.2 取消收藏图片

在某些情况下，用户可能不再需要某个图片，那么很容易就能够取消这个收藏，不会在造成不必要的困扰。

2.3 切换图片

小程序中展示了多张图片，用户可以很方便地切换图片，以更好地观赏和欣赏每一张图片。

3. 实现过程

下面介绍如何实现这个微信小程序。

3.1 页面布局（HTML）

首先，我们需要创建一个 HTML 文件。不需要过于复杂的代码，只需要一个简单的界面，在这个界面中展示图片，并且提供相应的按钮以便用户进行相关操作。下面是我的代码：


<view class='container'>
  <view class='image-container'>
    <swiper indicator-dots="{{true}}" indicator-color='#fff'
      indicator-active-color='#FFA500' circular='{{true}}' autoplay='{{false}}'>
      <swiper-item wx:for="{{imageList}}">
        <image src="{{item.url}}" class='image'></image>
      </swiper-item>
    </swiper>
  </view>
  <view class='button-container'>
    <button class='btn' bind:tap='collectImage'>{{isCollect?"取消收藏":"收藏"}}</button>
    <button class='btn' bind:tap='changeImage'>切换图片</button>
  </view>
</view>

以上代码中，我们使用了 Swiper 组件，用于展示图片。同时，我们也提供了两个按钮，方便用户进行图片操作。

3.2 页面逻辑（JavaScript）

接下来，我们需要编写 JavaScript 代码，这个代码将为我们提供对应的业务逻辑。下面是我的代码：


Page({
  data: {
    imageList: [],
    isCollect: false, // 是否收藏
    index: 0
  },
  onLoad: function (options) {
    this.setData({
      imageList: [
        { url: "../../images/image1.jpg" },
        { url: "../../images/image2.jpg" },
        { url: "../../images/image3.jpg" },
        { url: "../../images/image4.jpg" }
      ],
      isCollect: false,
      index: 0
    })
  },
  // 切换图片
  changeImage: function (e) {
    var index = this.data.index;
    var len = this.data.imageList.length;
    index = index < len - 1 ? index + 1 : 0;
    this.setData({
      index: index
    });
  },
  // 收藏或取消收藏
  collectImage: function (e) {
    var isCollect = this.data.isCollect;
    this.setData({
      isCollect: !isCollect
    });
    wx.showToast({
      title: isCollect ? "已取消收藏" : "已添加收藏",
      icon: "success",
      duration: 1000
    })
  }
})

整个代码比较简单，我们只需要定义一个 Page 对象，然后在 onLoad 方法中设置需要展示的图片列表。同时，我们为用户提供了两个按钮，分别是 changeImage 和 collectImage，前一个用于切换图片，后一个用于添加或取消收藏图片。

3.3 样式设计（CSS）

最后，我们需要添加样式以使页面看起来更加美观。这里我提供了一个比较简单的样式，供大家参考。


.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}
.btn {
  display: inline-block;
  width: 100px;
  height: 40px;
  line-height: 40px;
  margin: 0 10px;
  color: #fff;
  background-color: #FFA500;
  border: none;
  border-radius: 5px;
}
.image-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.swiper-item .image {
  max-height: 100%;
  max-width: 100%;
  display: block;
}

4. 结论

本文介绍了如何在微信小程序中实现收藏与取消收藏图片以及切换图片的功能效果，通过简单的 HTML、JavaScript 和 CSS 代码，我们能够轻松地实现这个功能，并且应用到其他的项目中。

微信小程序实例：收藏与取消收藏图片以及切换图片的功能效果