微信小程序+vant组件 设置d出框

欲实现效果：点击页面中某模块，d出d出框，在d出框中输出部分内容，上图：

使用vant小组件需要部分配置，没有使用过的朋友可以去vant官网查看一下配置步骤，随后导入即可使用组件。

配置完成后，在该页面的配置文件page.json中添加

{
  "usingComponents": {
    "van-popup": "@vant/weapp/popup/index"
  }
}

以点击某一模块为例，在page.wxss页面中，为该模块绑定点击事件，同时编写d出框中的内容，注意d出框的语法为,本部分应用的参数设置如下（更详细见vant官方API文档）：

参数	说明	类型	默认值
show	d出框是否显示	Boolean	flase
position	d出框位置，可选top/bottom/left/right	String	center
closeable	是否显示关闭图标	Boolean	flase
close-icon	关闭图标名称或图片链接	String	cross
close-icon-position	关闭图标位置	String	top-right
round	是否边框为圆角	Boolean	flase
custom-style	自定义d出层样式	String	"

点击此处，d出d出框



            
                客服联系方式：182****1866
            

在page.js文件中，进行所用变量、方法的定义：d

Page({
  data: {
    show: false,
  },

  onclick() {
    this.setData({ show: true });
  },

  onClose() {
    this.setData({ show: false });
  },
});

当然，在d出框中可以进行更多精美的设置，比如添加按钮、加入轮播字等。均可以在page.wxss文件中的的子标签中设置。