小程序实现点击弹出收藏与取消收藏效果

收藏与取消弹出框

图片的话在icon查找

效果图

代码

wxml

<view>
    <image wx:if="{{enshrine}}" bindtap="isenshrine" data-open="{{0}}" src="../../img/icon_fav_off.png"></image>
    <image wx:else bindtap="isenshrine" data-open="{{1}}" src="../../img/收 藏.png"></image>
</view>

wxss

image{
        width: 100px;
        height: 100px;
}

js

Page({

  /**
   * 页面的初始数据
   */
  data: {
        enshrine: true, //收藏
  },
  isenshrine(e) {
        console.log(e)
        let { open } = e.currentTarget.dataset
        if (open == 0) {
          this.setData({
            enshrine: false,
          })
          wx.showToast({
            title: '收藏成功',
          })
        } else {
          this.setData({
            enshrine: true,
          })
          wx.showToast({
            title: '取消收藏',
          })
        }
      },
 
})