uniApp 仿微信下拉菜单

  手指长按事件longpress

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

  下拉菜单

 

1
2
3
4
5
6
<!-- 长按的下拉菜单 -->
                <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>

 

  函数

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/**
             *长按事件
             * 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
            }
        },

 

  效果

 

 

posted on   李子骞  阅读(200)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示