uni-app使用微信小程序weapp-popover气泡框插件

最新推荐文章于 2025-08-26 11:14:41 发布

原创最新推荐文章于 2025-08-26 11:14:41 发布 · 5.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app引入微信小程序插件

自学uni-app 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍如何在微信小程序中使用Popover组件，包括从官方GitHub仓库下载源码、配置package.json、页面中调用及JS交互逻辑实现。通过具体代码示例，帮助开发者快速掌握Popover组件的使用方法。

首先去官网下载插件源码https://github.com/byk04712/weapp-popover
将文件夹中的components下的文件放到static文件夹下
在package.json要使用的页面

 "usingComponents": {
				    "popover": "/static/popover/popover",//定义到popover.js文件下
				    "popover-item": "/static/popover-item/popover-item"
				  }

页面中使用

<view @click="ontag('test)" id='test'>触发语句</view
<popover ref="popover" id='popover'>
		<popover-item @click.native.stop='onClickA' hasline>提示语句</popover-item>
</popover>
//js中
onReady() {
			this.popover = this.selectComponent('#popover');
		},
methods:{
Totag(id) {
		//this.popover = this.selectComponent('#popover');
			uni.createSelectorQuery().select('#' + id + '').boundingClientRect(res => {
				this.popover.onDisplay(res);
			}).exec();
		},
		onClickA() {
			this.popover.onHide();
		}
}

就这样就可以了