uniapp：仿微信列表长按弹窗菜单

1.创建子组件wxpup.vue

<template><view class="wxpup"><view class="shade" v-show="showPup" @click="hidePop"><view class="pop" :style="popStyle" :class="{'show':showClass}"><view v-for="(item,index) in navList" :key="index" @click="change(item)"><image src="../../static/img/25.png" mode="" v-if="item.text == '删除'">image><image src="../../static/img/51.png" mode="" v-if="item.text == '撤回'">image><image src="../../static/img/50.png" mode="" v-if="item.text == '转发'">image><image src="../../static/img/23.png" mode="" v-if="item.text == '预览'">image><image src="../../static/img/24.png" mode="" v-if="item.text == '下载'">image><image src="../../static/img/47.png" mode="" v-if="item.text == '收藏'">image><image src="../../static/img/25.png" mode="" v-if="item.text == '取消收藏'">image><text>{{item.text}}text>view>view>view>view>
template><script>export default {name: 'wxpup',props: {wxPupData: {type: Object,required: true,default: 1},},watch:{wxPupData(e,oldVal){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:32rpx`;} else {style += `left:32rpx`;}// style：计算出弹窗在页面显示的位置this.popStyle = style;/** 计算时长，m<2：2分钟以内可以撤回，用户id用来判断只能撤回我自己发送的内容* type：0删除，1撤回，2转发，3预览，4下载，5收藏，6取消收藏，* navList：可根据数据信息，自行组合navList需要显示的内容。*/let timestamp = Date.parse(new Date());let start = e.item.createtime * 1000; //2017-4-10 10:00let end = timestamp; //2017-5-10 10:00let utc = end - start;let m = this.$toFixed(utc / (60 * 1000), 0)if(e.item.user_id == e.my_user_id && m<2){this.navList = [{text: '预览',type:3},{text: '删除',type:0}, {text: '撤回',type:1}]}else{this.navList = [{text: '预览',type:3},{text: '删除',type:0}]}// 显示弹窗this.showPup = true;this.$nextTick(() => {setTimeout(() => {this.showClass = true;}, 10);});},},data() {return {navList:[],popStyle: "",showPup: false,showClass: false,winSize: {},}},mounted() {this.getWindowSize();// #ifdef H5document.onLong = function(e) {var e = e || window.event;e.preventDefault();};// #endif},methods: {/** change(item)* item.type：0删除，1撤回，2转发，3预览，4下载，5收藏，6取消收藏，* item.msg_type：消息类型video,text,image,* change方法中，根据type操作类型和msg_type消息类型，来判断需要进行的具体操作。*/change(item){console.log(item.type)console.log(item.msg_type)// 根据type和msg_type来判断具体需要调用下方哪个方法。},// 图片操作changeImg(type){if(type == 3){// 图片预览let arr = [];arr.push(this.$imgUrl+this.wxPupData.item.content)uni.previewImage({urls: arr,});}else if(type == 4){// 图片下载// #ifdef H5location.href = this.$imgUrl+this.wxPupData.item.content;// #endif// #ifdef APP-PLUSthis.$saveImageToPhotosAlbum(this.$imgUrl+this.wxPupData.item.content)// #endif}},// 文件视频操作changeFile(type) {if(type == 4){// 下载// #ifdef H5location.href = this.$imgUrl + this.wxPupData.item.content;// #endif// #ifdef APP-PLUSuni.showLoading({title: '正在下载'});var url = this.$imgUrl + this.wxPupData.item.content;let dtask = plus.downloader.createDownload(url, {//本地路径开头使用file://，跟上手机文件本地目录storage/emulated/0，这时用户文件管理器能看到的了，之后创建连信作为文件夹，后缀是用于文件命名和格式修改，大家可以使用变量。filename: "file://storage/emulated/0/我的APP/" + this.wxPupData.item.file_name //利用保存路径，实现下载文件的重命名},(d, status)=> {//d为下载的文件对象if (status == 200) {uni.hideLoading();uni.showToast({icon: 'none',mask: true,title: '已保存到文件夹：/我的APP/' + this.wxPupData.item.file_name, //保存路径duration: 3000,});//下载成功,d.filename是文件在保存在本地的相对路径，使用下面的API可转为平台绝对路径let fileSaveUrl = plus.io.convertLocalFileSystemURL(d.filename);setTimeout(()=>{plus.runtime.openFile(d.filename); //选择软件打开文件},1500)} else {//下载失败uni.hideLoading();plus.downloader.clear(); //清除下载任务uni.showToast({icon:'none',mask:true,title: '下载失败，请稍后重试',});}})dtask.start();// #endif}},// 撤回msgRevoke(){this.$http.post("/api/***",{id:this.wxPupData.item.id,}).then(res=>{if(res.code == 1){this.$emit('getNewList')}})},// 删除msgDelete(){this.$http.post("/api/***",{id:this.wxPupData.item.id,session_id:this.wxPupData.item.session_id,}).then(res=>{if(res.code == 1){this.$emit('getNewList')}})},// 收藏msgFavAdd(){this.$http.post("/api/***",{msg_id:this.wxPupData.item.id,}).then(res=>{if(res.code == 1){uni.showToast({icon:'none',title: '收藏成功',});this.$emit('getNewList');}})},// 取消收藏msgFavCancel(){this.$http.post("/api/***",{msg_id:this.wxPupData.item.msg_id,}).then(res=>{if(res.code == 1){uni.showToast({icon:'none',title: '已取消',});this.$emit('getNewList');}})},/* 获取窗口尺寸 */getWindowSize() {uni.getSystemInfo({success: (res) => {this.winSize = {"witdh": res.windowWidth,"height": res.windowHeight}}})},/* 隐藏弹窗 */hidePop() {this.showClass = false;this.showPup = false;},}}
script>
<style lang="scss" scoped>.wxpup {/* 遮罩 */.shade {position: fixed;z-index: 100;top: 0;right: 0;bottom: 0;left: 0;-webkit-touch-callout: none;.pop {position: fixed;z-index: 101;color: #333;background: #596084;border-radius: 12rpx;transition: transform 0.15s ease-in-out 0s;user-select: none;-webkit-touch-callout: none;transform: scale(0, 0);display: flex;align-items: center;&.show {transform: scale(1, 1);}uni-view{width: 120rpx;height: 140rpx;display: flex;align-items: center;justify-content: center;flex-direction: column;uni-image{width: 36rpx;height: 36rpx;display: block;margin:0 auto 8rpx;}uni-text{display: block;font-size: 26rpx;color: #fff;}}}}}
style>

2.父组件

<template><view class="list"><view class="item"  v-for="(item,index) in list" :key="index"><view class="text" @longpress="onLongPress($event,item)">{{item.content}}view>view><wxpup :wxPupData="wxPupData" @getNewList="getNewList">wxpup>view>
template>
<script>export default {data() {return {list:[],wxPupData:{},}},methods: {/* 长按监听 */onLongPress(e,item) {e.item = item;e.my_user_id = this.my_userInfo.id;this.wxPupData = e;console.log(this.wxPupData)},getNewList(){// 接口请求，重新获取 list}}}
script>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！