微信小程序-仿朋友圈点赞评论操作面板
一、效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d912ebfea33cf5c471a178ecf29bcdd0.gif)
二、实现
1.wxml实现
<!--
wx:index = "index":列表循环后所有位置都可以访问索引
-->
<view class="item" wx:for="{{list}}" wx:index = "index">
<view class="left">
<image class="avatar"></image>
</view>
<view class="right">
<view class="nickname">{{item.nickName}}</view>
<view class="content">{{item.content}}</view>
<view class="image-list">
<image class="image" wx:for="{{item.imageList}}"></image>
</view>
<view class="time-area">
<view class="time">{{item.time}}</view>
<view>
<!--
data-index="{{index}}"
1.设置后在回调函数中currentTarget.dataset中显示
-->
<image class="operation-button" src="../../images/caozuo.png" catchtap="showOperationPannel" data-index="{{index}}"></image>
<!-- 判断当前索引和面盘索引是否一致 -->
<view class="operation-pannel" wx:if="{{showOperationPannelIndex == index}}">
<view class="tab">
<image class="image" src="../../images/love-white.png"></image>
<text>赞</text>
</view>
<view class="tab">
<image class="image" src="../../images/comment-white.png"></image>
<text>评论</text>
</view>
</view>
</view>
</view>
<view class="love-comment">
<!--
item.loveList=重复
item.loveList
<view class="love" wx:if="{{item.loveList.length > 0}}">
<image class="love-icon" src="../../images/love-blue.png"></image>
<text class="love-nickname" wx:for="{{item.loveList}}">老夫子 兰陵王</text>
</view>
-->
<view class="love" wx:if="{{item.loveList.length > 0}}">
<image class="love-icon" src="../../images/love-blue.png"></image>
<!-- love和整个循环的item不冲突 -->
<text class="love-nickname" wx:for-items="{{item.loveList}}"
wx:for-item = "love"
>{{love.nickName}}</text>
</view>
<view class="comment" wx:if="{{item.commentList.length > 0}}">
<view wx:for-items="{{item.commentList}}"
wx:for-item = "comment">
<text class="comment-nickname">{{comment.nickName}}</text>
<text class="comment-content">{{comment.content}}</text>
</view>
</view>
</view>
</view>
</view>
2.js实现
var that;
Page({
data: {
list:[],
showOperationPannelIndex:-1,
},
onLoad: function (options) {
that = this;
for (var i = 1; i < 10; i++) {
var circleData = {};
circleData.nickName = "朋友-" + i;
circleData.content = "朋友发布内容-" + i;
circleData.time = "2020-05-0" + i;
var imageList = [];
var loveList = [];
var commentList = [];
circleData.imageList = imageList;
circleData.loveList = loveList;
circleData.commentList = commentList;
for (var j = 1; j < i; j++) {
imageList.push(j);
var loveData = {};
loveData.nickName = '点赞-' + j;
loveList.push(loveData);
var commentData = {};
commentData.nickName = "兰陵王-" + j + ":";
commentData.content = "评论内容-" + j;
commentList.push(commentData);
}
that.data.list.push(circleData);
}
that.setData({
list: that.data.list
})
},
showOperationPannel(e){
console.log("showOperationPannel",e);
var index = e.currentTarget.dataset.index;
if(that.data.showOperationPannelIndex == index){
that.setData({
showOperationPannelIndex:-1
})
}
else{
that.setData({
showOperationPannelIndex:index
})
}
},
})
3.wxss实现
page{
background-color: #fff;
}
.item{
display: flex;
width: 100%;
padding: 20rpx 20rpx;
border-bottom: 1px solid #f0f0f0;
}
.left{
width: 80rpx;
margin-right: 10rpx;
}
.avatar{
width: 80rpx;
height: 80rpx;
margin-right: 10rpx;
background: #f3f3f3;
}
.right{
width: 620rpx;
display: flex;
flex-direction: column;
}
.nickname{
font-size: 32rpx;
line-height: 50rpx;
color: #3b4977;
}
.content{
font-size: 32rpx;
line-height: 40rpx;
color: #181818;
margin-bottom: 10rpx;
}
.image-list{
display: flex;
flex-wrap: wrap;
}
.image-list .image{
width: 160rpx;
height: 160rpx;
background: #f3f3f3;
margin-right: 10rpx;
margin-bottom: 10rpx;
}
.time-area{
display: flex;
height: 72rpx;
position: relative;
align-items: center;
}
.time-area .time{
font-size: 26rpx;
line-height: 70rpx;
color: #696969;
}
.time-area .operation-button{
height: 40rpx;
width: 70rpx;
position: absolute;
right: 0rpx;
top: 15rpx;
}
.time-area .operation-pannel{
position: absolute;
top: 0rpx;
right: 80rpx;
width: 300rpx;
line-height: 70rpx;
background-color: #4c5154;
border-radius: 10rpx;
font-size: 24rpx;
color: white;
text-align: center;
}
.time-area .operation-pannel .tab{
display: inline-block;
width: 150rpx;
}
.time-area .operation-pannel .tab .image{
width: 26rpx;
height: 26rpx;
vertical-align: middle;
background-color: transparent;
}
.love-comment{
margin-top: 10rpx;
background-color: #f7f7f7;
width: 100%;
}
.love{
padding: 6rpx 16rpx;
border-bottom: 1rpx solid #f0f0f0;
}
.love .love-icon{
width: 26rpx;
height: 26rpx;
}
.love .love-nickname{
font-size: 30rpx;
line-height: 40rpx;
color: #3b4977;
}
.comment{
padding: 6rpx 16rpx;
padding-bottom: 12rpx;
font-size: 30rpx;
}
.comment .comment-nickname{
color: #3b4977;
}
.comment .comment-content{
color: #181818;
line-height: 40rpx;
}
三、记录
1.dataset使用
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/fcc613dd970cf67c85525b407b2b19a6.png)