微信小程序-仿朋友圈点赞评论操作面板
一、效果
二、实现
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>
<te