根据官方的文档,先在app.json或者index.json中引入组件。
"usingComponents": { "van-popup": "@vant/weapp/popup/index"}
然后在视图层wxml文件中添加
<van-cell title="展示弹出层" is-link bind:click="showPopup" /><van-popup show="{{ show }}" bind:close="onClose">内容</van-popup>
在js文件中添加以下代码
Page({ data: { show: false, }, showPopup() { this.setData({ show: true }); }, onClose() { this.setData({ show: false }); },});
但是此时页面并没有使用成功。
仔细观察发现,官方案例中还使用了ban-cell,也需要在组件注册时注册
<van-cell title="展示弹出层" is-link bind:click="showPopup" />
只需要在app.json或者index.json中再添加一下代码即可
"usingComponents": { "van-cell": "@vant/weapp/cell/index"}
运行效果