首页 > 其他分享 >uniApp 仿微信下拉菜单

uniApp 仿微信下拉菜单

时间:2023-11-05 11:23:55浏览次数:43  
标签:uniApp longpress index chatList 坐标 pageX 仿微信 下拉菜单

uniApp 仿微信下拉菜单

  手指长按事件longpress

@longpress="longpress(index,$event)"

  下拉菜单

 

<!-- 长按的下拉菜单 -->
				<view class="jh-w-200 jh-h-60-min jh-dropDownMenu jh-shadow-grey jh-bg-white jh-solid"
					:id="'dropDownMenu' + index" v-show="item.dropDownMenu"
					:style="{left:(item.left - 30) + 'px',top:item.top + 'px'}">
					<view class="jh-w-200 jh-h-60 jh-flex jh-p-l-20 jh-align-center">标记已读</view>
				</view>

 

  函数

 

/**
			 *长按事件 
			 * index是下标
			 */
			longpress(index, e) {
				// 循环所有消息
				for (var i = 0; i < this.chatList.length; i++) {
					// 所有消息都变回未选的状态
					this.chatList[i].topping = false
					// 所有消息的下拉菜单都变为不显示状态
					this.chatList[i].dropDownMenu = false
				}
				// 显示选中的消息
				this.chatList[index].topping = true
				// 显示消息的下拉菜单
				this.chatList[index].dropDownMenu = true
				// 获取坐标
				var touch = e.touches[0] || e.changedTouches[0]
				// 获取横向坐标
				var pageX = touch.pageX
				// 获取纵向坐标
				var pageY = touch.pageY
				// 获取屏幕的宽高
				let getWindowInfo = uni.getWindowInfo()
				// 判断横向坐标到了屏幕边上
				if((getWindowInfo.screenWidth-30) <= pageX) {
					// 把下拉菜单往屏幕里面靠一下
					pageX = pageX - 100
				} else if(30 >= pageX) {
					// 把下拉菜单往屏幕里面靠一下
					pageX = pageX + 40
				}
				// 把横向坐标赋值给显示消息的下拉菜单
				this.chatList[index].left = pageX
				// 把纵向坐标赋值给显示消息的下拉菜单
				this.chatList[index].top = pageY
			}
		},

 

  效果

 

 

标签:uniApp,longpress,index,chatList,坐标,pageX,仿微信,下拉菜单
From: https://www.cnblogs.com/liziqian001/p/17810322.html

相关文章

  • uniapp微信小程序表单输入框上移事件
    一、问题uniapp制作的微信小程序表单,在使用真机调试时,点击输入框输入内容时,出现输入框上移的情况二、找原因窗体高度固定,导致软键盘弹出时输入框上移三、解决办法1、uniapp官网关于软键盘弹出问题的解决方法在pages.json中配置的写输入框表单的 style"app-plus":{"......
  • uniapp小程序小bug,扫码进入小程序场景值为1001的情况之一。
    首先,这个问题原因是这样的用户第一次扫码进入小程序在app.vue的onLaunch下拿不到optiond的query对象的值场景值为1001,按照正常来说扫码进来应该是1047。排查原因只有用户在打开小程序的情况下没有杀掉进程只是切换页面到微信主页进行扫码进入小程序,结果就会出现扫码进入小程序的......
  • uniapp开发nuve原生瀑布流组件waterfall列表后边出现空白的处理方法
    异常描述:首页有轮播、广告位、瀑布流商品列表,但是使用了原生组件waterfall的商品列表后边出现了大面积空白。解决方法:将waterfall放到父容器下边或者直接放到template下边作为父容器,给父容器设置高度设置为窗口高度,除瀑布流展示的列表外,其他的组件都放在中即可。<template>......
  • Android 11 下拉菜单长按WiFi图标SystemUI ANR
    bug描述:(MTK)--Android11的SystemUI下拉菜单长按图标(tiles)导致SystemUI崩溃重启。10-0108:01:11.23657925833EAndroidRuntime:FATALEXCEPTION:AsyncTask#110-0108:01:11.23657925833EAndroidRuntime:Process:com.android.systemui,PID:579210-0108......
  • uniapp做app跳转小程序支付功能
    1.app里面代码app向小程序路径传参的时候,如果太长或者是里面有特殊符号建议先使用编码然后再小程序端解码实现传送(编码代码如下)encodeURIComponent(JSON.stringify(params))//编码JSON.parse(decodeURIComponent(option.params))//解码  plus.share.getServices((s)=>......
  • uniapp小程序所遇到的bug
    最近小程序添加好多条条框框的规矩比如1、登录的时候要弹出隐私规则的弹窗2、要使用的api涉及到隐私的一定要在隐私规则里配置,在微信公众平台的设置里,更新隐私规则3、.如果涉及到手机号登录的小程序,则需要有游客模式,就是不可以在登录的时候向用户获取手机号,要在具体功能的前面......
  • uniapp app横屏竖屏问题导致样式紊乱
    最近做了一个点击签名然后要让app自动横屏的功能,此功能难点在于退出横屏的时候,会导致竖屏的页面紊乱。首先如果要让app横屏,要先在manifest.json的源码视图app-plus里添加"flexible":true,表示app可以横竖切换然后在想要横屏的页面里加上onShow(){         uni.sh......
  • uniapp-ucloud 数据库里面添加记录
    要保持本地跟云端的表一致。同步。还有设置权限constdb=uniCloud.database()constjiemengCollection=db.collection('jiemeng') for(constrowofdata){ console.log(row) try{ jiemengCollection.add(row) }catch(e){ ......
  • uniapp 动态修改顶部导航栏右侧按钮 titleNView(APP-PLUS、H5)
    1<script>2exportdefault{3onReady(){4//已渲染5varpages=getCurrentPages();6varpage=pages[pages.length-1];78//#ifdefH59document.querySelector('.uni-page-head-ft.uni-......
  • uniapp 打包缺陷
    uniapp打包时候会把所有用到的公共组件和公共封装打包到一起,在首页直接加载,这样会严重影响首屏的显示速度目前没有找到好的最小化分离首屏依赖的打包方式考虑可行的方案1.写一个webpack插件,通过分析指定模块的依赖,将模块和模块依赖分别打包2.深入webpack配置,看......