效果
平常我们在刷一些列表是会发现点击按钮会弹出类似菜单，小程序好像没看到有类型组件，所以打算自己实现。
实现思路
- 整个列表项要设置成相对布局
position relative，popover菜单设置成绝对布局position absolute，正所谓子绝父相 - popover菜单的小三角是
纯css画的，它是popover菜单的before伪类其实after也是一样的 - 需要根据点击处的坐标来设置popover菜单的
left,根据x坐标减去一部分的宽度style="left:{{x-(55*0.8)}}px;"，以保证不会超出界面。
代码
<template><view class="container" style="height: {{mainHeight}}px"><view class="infoBar"><text style="font-weight: 600">注意：</text>中间页并不属于tabbar页面属于二级页面(自定义tabbar在app的json中不注册中间这页即可)</view><view class="listItem"><view><view style="font-weight: 650">王冰冰</view><view style="font-size: 26rpx">女</view><view style="font-size: 28rpx;color:#343433">中央电视台驻吉林记者</view></view><view style="font-size: 32rpx;color: #000" bindtap="showPopupAction">操作</view><view class="popupmenu" style="left:{{x-(55*0.8)}}px;" wx:if="{{popupshow}}"><view class="popupmenu_item">编辑</view><view class="popupmenu_item">删除</view><view class="popupmenu_item" style="border: none">其他</view></view></view></view>
</template>
<script>import { createPage } from '@mpxjs/core'import store from '../../store'const app = getApp()createPage({data: {x: null,y: null,popupshow: false,mainHeight: app.globalData.mainHeight},onShow() {},methods: {// 展示popup菜单showPopupAction(e) {// console.log(e.detail)let { x, y } = e.detailthis.setData({x,y,popupshow: !this.popupshow})}}})
</script>
<style lang="stylus" scoped>.containerwidth 100%box-sizing border-boxoverflow scroll--webkit-overflow-scrolling touch-actionpadding 30rpx 32rpx.infoBarcolor #34495efont-size 14pxbox-sizing border-boxborder-radius 12rpxposition relativepadding 24rpx 12rpx 24rpx 32rpxwidth 100%background #ecf9ff&::beforedisplay inline-block /* 这个要有 */position absoluteborder-radius 12rpx 0 0 12rpxtop 0left 0content '' /* 这个要有 */width 6pxheight 100%background #50bfff.listItemmargin-top 60rpxbox-sizing border-boxbackground #ecf9ffpadding 20rpx 32rpxdisplay flexjustify-content space-betweenposition relative.popupmenuposition absolutetop 80rpxbackground rgba(0, 0, 0, 0.8)color #fffpadding 20rpxwidth 110rpxheight 190rpxborder-radius 6rpx.popupmenu_itemborder-bottom 0.5rpx solid rgba(255, 255, 255, 0.4)padding-bottom 10rpxfont-size 26rpxtext-align center&::beforeposition absolutetop -10rpxleft 55rpxcontent ''width 0height 0border-left 10rpx solid transparentborder-right 10rpx solid transparentborder-bottom 10rpx solid rgba(0, 0, 0, 0.8)
</style>
<script type='application/json'>{"navigationBarTitleText": "中间页"}
</script>