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