uniApp 仿微信下拉菜单

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
			}
		},

 

　　效果