小程序开发——wx:for循环添加的元素列表显示不同样式

绝地灬酷狼 2023-07-17 05:56 2阅读 0赞

今天继续写毕业设计。添加用户留言举报的功能。想要的效果是这样的：

![20200319194502596.png][]

![20200319194525577.png][]

小程序部分代码如下：

**wxml：**

**解释：**

我在前面添加了一个 view标签的wx:for循环。循环的是用户的留言列表。

**js:**

Page({
        data{
        current_item:-1
        },
    
        bingLongTap:function(e) {
            var me = this;
            var arrindex = e.currentTarget.dataset.arrindex;
            me.setData({
              current_item:arrindex
            });
            console.log(e);
        }
    })

**解释：**

使用 data-arrindex将当前留言的下标的序列在js取到。为了想举报指定留言，弹出举报框。

**wxss:**

.comment_report{
        position: absolute;
        left: 370rpx;
        width: 20%;
        height: 100rpx;
        border-radius:10%;
        border-bottom-left-radius:0;
        font-size: 22rpx;
        color: black;
        background: white;
        opacity:0.8;
        display: none;
      }
      .test{
        
         margin-left: 39rpx;
         margin-top:14rpx
      }
      .comment_report_cancel{
        margin-top:11rpx
      }
      .selected{
        position: absolute;
        left: 370rpx;
        width: 20%;
        height: 100rpx;
        border-radius:10%;
        border-bottom-left-radius:0;
        font-size: 22rpx;
        color: black;
        background: white;
        opacity:0.8;
      }

**解释：**

comment\_report：初始样式是将举报框隐藏。

selected：显示举报框时候的样式。

总结：

刚刚开始的是时候，因为把举报框放在循环体里面，所以当初始化的样式是有多少条留言就显示多少个框。刚刚开始的时候想使用样式的display:"none"去实现，是<view  style="display:'none'">...</view> 来控制，发现并不能实现效果，原因在于如果长按当前的留言，但是显示时会显示全部的框 不能达到想要效果。后面想通过控制动态class的变化来控制样式显示和隐藏，实现了想要的效果。但是还是有一点还是不怎么了解的。各位如果有懂的希望多多留言

[20200319194502596.png]: /images/20230528/5005304a3c54430fa2ae080ac047e330.png
[20200319194525577.png]: /images/20230528/b888d335fd114a6f8602cab88291c355.png