vant weapp: 关于在微信小程序中使用vant weapp的popup弹出层不生效

小程序 0

根据官方的文档,先在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"}

运行效果

也许您对下面的内容还感兴趣: