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

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

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

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

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

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

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

<view bind:click="onclick">
点击此处，弹出弹出框
</view>

<van-popup show="{{ show }}" 
            bind:close="onClose"
            position="bottom"
            closeable
            round
            close-icon-position="top-left"
            close-icon="close"
            custom-style="height: 20%"
            >
            <view class="popContent">
                客服联系方式：182****1866
            </view>
</van-popup>

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

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

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

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

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