【前言】
本节主要介绍下常见的收藏功能的实现
需求分析
样式分析:
未收藏时为灰色态,点击收藏按钮,图标变色,同时弹框实体收藏成功;
收藏成功后,点击已收藏的商品,取消收藏,此时图标恢复为灰色态,同时弹框提示取消收藏成功。
逻辑分析:
每个商品单独绑定个数据,负责管理收藏状态,点击时判断状态,然后切换
收藏功能
(1)先将图片静态样式写入
<view class="goodsList">
<view class="goodBox"
bindtap="toDetail"
data-item="{{item}}"
wx:for="{{goods}}"
wx:key="name">
<navigator url="/pages/zhuanti/shangcheng/shangcheng?name={{item.name}}&src={{item.imgSrc}}&price={{item.price}}">
<image class="goodImg" src="{{item.imgSrc}}"></image>
<view class="goodName">{{item.name}} {{item.price}}¥</view>
</navigator>
<image data-index="{{index}}"
bindtap="selectFn"
class="selectStar"
src="{{item.collectStatus == true?'../../static/tabs/like-on.png':'../../static/tabs/like.png'}}"></image>
</view>
</view>
.goodsList{
width: 100%;
height: auto;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
}
.goodBox{
width: 45%;
height: 400rpx;
margin: 10px auto;
border: 1rpx solid rgba(0, 0, 0, 0.3);
border-radius: 6rpx;
position: relative;
}
.goodBox .goodImg{
width: 100%;
height: 330rpx;
display: block;
}
.goodBox .goodName{
line-height: 70rpx;
font-size: 32rpx;
text-align: center;
}
.selectStar{
position: absolute;
right: 15rpx;
bottom: 15rpx;
width: 32rpx;
height: 32rpx;
}
.goodBox view{
line-height: 70rpx;
font-size: 32rpx;
text-align: center;
}
因为收藏按钮是在商品展示栏上一层,所以可以用绝对定位到右下角,此时点击便不会跳页
接下来绑定数据
data: {
goods:[
{ name: '雷神', price: 20, imgSrc: 'https://www.agri35.com/UploadFiles/img_0_1116268190_1801441364_26.jpg',collectStatus:false },
{ name: '机器人', price: 13, imgSrc: 'http://images.ali213.net/picfile/pic/2013/03/22/927_zem (6).jpg', collectStatus: false },
{ name: '柴犬', price: 30, imgSrc: 'https://www.agri35.com/UploadFiles/img_0_4206379571_53855437_26.jpg', collectStatus: false },
{ name: '贝壳', price: 46, imgSrc: 'https://www.agri35.com/UploadFiles/img_0_800837951_203223793_26.jpg', collectStatus: false },
{ name: '火影', price: 28, imgSrc: 'https://www.agri35.com/UploadFiles/img_1_3695192305_4134652568_26.jpg', collectStatus: false },
{ name: '二狗', price: 17, imgSrc: 'https://www.agri35.com/UploadFiles/img_1_4288039849_2595693982_26.jpg', collectStatus: false }
],
},
(2)改动商品收藏状态值
/**收藏功能 */
selectFn(event){
/**console.log(event.currentTarget.dataset.index);商品索引 */
const goods = this.data.goods;
const _this = this;
const now_index = event.currentTarget.dataset.index;/**商品索引 */
/**重点:先设置一个变量,用字符串将修改值拼接起来 */
goods.forEach(function(item,index,self){
const collectStatus = "goods[" + index + "].collectStatus";
_this.setData({
[collectStatus]: true/**用中括号把改动值括起来即可 */
})
})
},
(3)指向性修改商品收藏状态
目前为止,点击收藏时会修改所有商品收藏状态,所以接下来添加判断
/**收藏功能 */
selectFn(event){
/**console.log(event.currentTarget.dataset.index);商品索引 */
const goods = this.data.goods;
const _this = this;
const now_index = event.currentTarget.dataset.index;/**商品索引 */
/**重点:先设置一个变量,用字符串将修改值拼接起来 */
goods.forEach(function(item,index,self){
const collectStatus = "goods[" + index + "].collectStatus";
/**根据索引判断元素 */
if(now_index == index){
_this.setData({
[collectStatus]: true/**用中括号把改动值括起来即可 */
})
}
})
},
(4)添加取消收藏操作
/**收藏功能 */
selectFn(event){
/**console.log(event.currentTarget.dataset.index);商品索引 */
const goods = this.data.goods;
const _this = this;
const now_index = event.currentTarget.dataset.index;/**商品索引 */
/**重点:先设置一个变量,用字符串将修改值拼接起来 */
goods.forEach(function(item,index,self){
const collectStatus = "goods[" + index + "].collectStatus";
/**根据索引判断元素 */
if(now_index == index){
/**取消收藏 */
if(_this.data.goods[index].collectStatus){
_this.setData({
[collectStatus]: false/**用中括号把改动值括起来即可 */
})
}else{
_this.setData({
[collectStatus]:true
})
}
}
})
},
此时点击收藏按钮,如果已经收藏,则会取消收藏,否则会收藏
(5)添加用户界面反馈操作
/**收藏功能 */
selectFn(event){
/**console.log(event.currentTarget.dataset.index);商品索引 */
const goods = this.data.goods;
const _this = this;
const now_index = event.currentTarget.dataset.index;/**商品索引 */
/**重点:先设置一个变量,用字符串将修改值拼接起来 */
goods.forEach(function(item,index,self){
const collectStatus = "goods[" + index + "].collectStatus";
/**根据索引判断元素 */
if(now_index == index){
/**取消收藏 */
if(_this.data.goods[index].collectStatus){
_this.setData({
[collectStatus]: false/**用中括号把改动值括起来即可 */
})
wx.showToast({
title: '取消成功',
duration:1000
})
}else{
_this.setData({
[collectStatus]:true
})
wx.showToast({
title: '收藏成功',
duration: 1000
})
}
}
})
},