且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

微信小程序循环修改某项

更新时间:2023-11-19 23:01:04

重新整理了下代码,实现功能:长按消息弹出菜单,点击菜单中的删除,删除此条消息。

效果:

wxml:

<!--test.wxml-->
<view style="padding-top:30px;">
    <view wx:for="{{loop}}" wx:key="id" bindlongtap="ltap" data-id="{{item.id}}"  class="{{item.class}}" style="display:{{item.visible}};">
        {{item.opt}} 
        <view class="sharp"></view>
        <view class="headico"><image src="{{item.head}}" mode="aspectFill" class="headimg"></image></view>
        <view wx:if="{{ item.id == value }}" class="anniu">
            <view bindtap="click_blank" class="mask"></view> 
            <view bindtap="del" class="deleteBtn" data-id="{{item.id}}">
                删除
                <view class="del-sharp"></view>
            </view>
        </view>
        <view wx:else></view>
    </view>
</view>

wxss:

/* test.wxss */

.message {
  text-align: left;
  margin-top: 20px;
  margin-left: 60px;
  background: #fff;
  color: #333;
  border-radius: 5px;
  padding: 5px 20px;
  max-width: 50%;
  float: left;
  clear: both;
  border: 1px solid #dedede;
  position: relative;
}

.send {
  text-align: left;
  margin-top: 20px;
  margin-right: 60px;
  background: #a6d94e;
  border: 1px solid #a6d94e;
  color: #333;
  border-radius: 5px;
  padding: 5px 20px;
  max-width: 50%;
  float: right;
  clear: both;
  position: relative;
}

.mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0.8;
  z-index: 1;
}

.message .deleteBtn {
  position: absolute;
  top: -45px;
  background: #303538;
  color: #fff;
  z-index: 2;
  padding: 5px 10px;
  border-radius: 5px;
}

.del-sharp {
  width: 8px;
  height: 8px;
  position: absolute;
  bottom: -4px;
  background: #303538;
  transform: rotate(45deg);
}

.send .deleteBtn {
  position: absolute;
  top: -45px;
  background: #303538;
  color: #fff;
  z-index: 2;
  padding: 5px 10px;
  border-radius: 5px;
}

.message .sharp {
  background: red;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  position: absolute;
  left: -5px;
  top: 12px;
  background: #fff;
  border: 1px solid #dedede;
  border-top: none;
  border-right: none;
}

.send .sharp {
  background: red;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  position: absolute;
  right: -5px;
  top: 12px;
  background: #a6d94e;
  border: 1px solid #a6d94e;
  border-top: none;
  border-right: none;
}

.message .headico {
  width: 33px;
  height: 33px;
  border: 1px solid #dedede;
  position: absolute;
  top: 0;
  left: -50px;
  background: #fff;
}

.send .headico {
  width: 33px;
  height: 33px;
  border: 1px solid #dedede;
  position: absolute;
  top: 0;
  right: -50px;
  background: #fff;
}

.headimg {
  width: 33px;
  height: 33px;
}

js:

// test.js
Page({
    /**
     * 页面的初始数据
     */
    data: {
        loop: [
            {
                opt: "监听页面加载",
                id: 1,
                head: '../images/icon_contact_wx.png',
                class: 'message',
                visible: 'block'
            },
            {
                opt: "监听页面初次渲染完成",
                id: 2,
                head: '../images/icon_contact_wx.png',
                class: 'send',
                visible: 'block'
            },
            {
                opt: "监听用户下拉动作",
                id: 3,
                head: '../images/icon_contact_wx.png',
                class: 'message',
                visible: 'block'
            },
            {
                opt: "页面上拉触底事件的处理函数",
                id: 4,
                head: '../images/icon_contact_wx.png',
                class: 'send',
                visible: 'block'
            },
            {
                opt: "用户点击右上角分享",
                id: 5,
                head: '../images/icon_contact_wx.png',
                class: 'message',
                visible: 'block'
            },
        ],
        value: 0
    },
    ltap: function (e) {
        this.setData({
            value: e.target.dataset.id
        })
    },
    del: function (e) {
        var index = e.target.dataset.id - 1
        var param = {};
        var string = "loop[" + index + "].visible"
        param[string] = 'none';
        this.setData(param);
    },
    click_blank: function (e) {
        this.setData({
            value: 0
        })
    }
})