参照 做了点调整 做个记录
⽤到了 直接在插件上绑定 @longpress 会失效 在插件内绑定出长按⽅法
onLongpress(e){
if(this.clickable ||this.link){
this.$emit('longpress', e);
}
},
页⾯代码
<template>
<view>
<uni-list>
<uni-list-chat @longpress="longtap(item,$event)":class="item.isTop?'topColor':''" v-for="(item,index) in lists":key="item.id" :title="item.sendName":avatar="item.time":note="place(/\s*/g,'')":time="item.sendTime"
:clickable="true":avatarList="item.pathList":badge-text="item.isDisturb?0:item.unreadNumber"
@click="toChatDetail(item)">
</uni-list-chat>
</uni-list>
<!--长按菜单-->
<view class="shade" v-show="showShade" @tap="hidePop">
<view class="pop"::class="{'show':showPop}">
<view @tap="changeTop()">{{longpressData.isTop?'取消置顶':'置顶聊天'}}</view>
<view @tap="changeShow()">删除该聊天</view>
</view>
</view>
</view>
</template>
<script>
const app =getApp();
import uniList from'@/components/uni-list/uni-list.vue'
import uniListItem from'@/components/uni-list-item/uni-list-item.vue'
import uniListChat from'@/components/uni-list-chat/uni-list-chat.vue'
export default{烘手机
components:{
uniList,
uniListItem,
uniListChat,
},
data(){
减速电动机>粉碎机器人
return{
lists:[],
userList:[],
/* 窗⼝尺⼨ */
winSize:{},
/* 显⽰遮罩 */
showShade:false,
showPop:false,
/* 弹窗定位样式 */
popStyle:"",
/* 长按选中对象*/
longpressData:{
isTop:false,
},
}
},
onLoad(){
//获取列表数据
// 获取窗⼝尺⼨
// #ifdef H5
var e = e || window.event;
e.preventDefault();
};
// #endif
},
onHide(){
this.showShade =false//长按菜单},按摩脚盆
methods:{
getLiaisonData(){
let that =this
url:'url',
防伪胶带
method:'get',
header:{
'X-Auth-Token': ken },
data:{
//
},
success:function(res){
//that.lists = res.data.data
},
})
},
toChatDetail(item){
uni.navigateTo({
url:''
},
/* 获取窗⼝尺⼨ */
getWindowSize(){
success:(res)=>{
this.winSize ={
"witdh": res.windowWidth,
"height": res.windowHeight
}
}
})
},机壳
/* 隐藏弹窗 */
hidePop(){
this.showPop =false;
setTimeout(()=>{
this.showShade =false;
},250);
},
changeTop(){
let that =this
url: app.globalData.baseURL +'api/mobile/liaison/update/'+this.longpressData.id, method:'put',
header:{
'X-Auth-Token': ken
},
data:{
isTop:!that.longpressData.isTop,
},
success:function(res){
var title = that.longpressData.isTop?'取消置顶成功':'置顶成功'
uni.showToast({
title: title,
icon:"none",
duration:600
});
},
fail(){
}
})
},
changeShow(){
let that =this
url: app.globalData.baseURL +'api/mobile/liaison/isShow/'+this.longpressData.id, method:'put',
header:{
'X-Auth-Token': ken
},
// data: {
// isTop: !that.longpressData.isTop,
// },
success:function(res){
uni.showToast({
title:'操作成功',
icon:"none",
duration:600
});
fail(){
}
})
},
longtap(item,e){
this.longpressData = item
let[touches, style, index]=[e.touches[0],"", e.currentTarget.dataset.index]; /* 因⾮H5端不兼容 style 属性绑定 Object ，所以拼接字符 */
if(touches.clientY >(this.winSize.height /2)){
style =`bottom:${this.winSize.height-touches.clientY}px;`;
}else{
style =`top:${touches.clientY}px;`;
}
if(touches.clientX >(this.winSize.witdh /2)){
style +=`right:${this.winSize.witdh-touches.clientX}px`;
}else{
style +=`left:${touches.clientX}px`;
}
this.popStyle = style;
this.showShade =true;
this.$nextTick(()=>{
setTimeout(()=>{
this.showPop =true;
},10);
});
},
}
}
</script>
<style lang="scss" scoped>
/* 遮罩 */
.shade {
position: fixed;
z-index:100;
top:0;
right:0;
bottom:0;
left:0;
-webkit-touch-callout: none;
.pop {
position: fixed;
z-index:101;
width:200upx;
box-sizing: border-box;
font-size:28upx;
text-align: left;
color: #333;
background-color: #fff;
box-shadow:005px rgba(0,0,0,0.5);
line-height:80upx;
transition: transform 0.15s ease-in-out 0s;
user-select: none;
-webkit-touch-callout: none;
transform:scale(0,0);
&.show {
transform:scale(1,1);
&>view {
padding:10upx 20upx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
user-select: none;
-webkit-touch-callout: none;
font-size:30rpx;
&:active {
background-color: #f3f3f3;
}
}
}
}
//
/* #ifndef APP-NVUE */
page {
display: flex;
flex-direction: column;
box-sizing: border-box;
background-color: $uni-bg-color-grey;
min-height:100%;
height: auto;
}
.uni-list-item__container:after {
left: $uni-img-size-xl+$uni-spacing-row-lg !important; }
.uni-list-item__container {
padding-left:0!important;
}
/* #endif */
</style>
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议