更新时间: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
})
}
})