源码教学高度定制小程序vant弹窗组件

来源：未知 浏览 180次 时间 2021-06-17 04:45

作为从事前端开发的你肯定见过不少的弹框组件你可曾有想过要自己实现一个弹框组件库又或者想完全定制化的使用各种标准UI框架中的弹框组件呢？

今天这篇文章将会带着你解析这一系列疑问企业网络推广方法又或者想完全定制化的使用各种标准UI框架中的弹框组件呢？

源码级别高度定制小程序vant弹窗组件

一、vant-weapp弹窗组件介绍

vant-weapp组件库是有赞团队开发的 一款灵活简洁且美观的小程序UI组件库 此文将以这个组件库的用法为标准下文提及的弹框组件均指的是此组件库中的弹框。

弹框分类

vant-weapp中弹框主要分为**两大类：弹出层Popup和对话框Dialog**弹出层一般是带有背景遮罩层和内容展示区域用于在不跳转页面情况下进行详情的展示作用对话框多数用于带有详情展示的同时还带有希望用户确认等操作。如下图所示图左为典型的Dialog图右为典型的Popup。

源码级别高度定制小程序vant弹窗组件

注册小程序组件

在使用弹框组件之前记得在小程序的app.json文件中先注册组件详细介绍见 快速上手 例如注册van-popup组件代码如下：

// app.json "usingComponents": { "van-popup": "path/to/@vant/weapp/dist/popup/index" } 复制代码

在项目中实际使用如下：

在本文后续分析van-dialog源码中会发现在dialog的index.json中也定义过van-popup组件但是我们要直接实行van-popup组件必须在小程序的配置文件app.json中按照上图方式进行定义微信小程序官网说明过 自定义组件内部的引入组件只在该组件内生效

注册完组件之后就可以直接在小程序页面中使用这里注册的自定义组件组件名称为这里 key 例如：。

二、Popup基本用法 常见用法

最常见的用法就是直接使用van-popup组件通过组件的show属性来控制其是否展示组件内部嵌套的其他组件或标签是popup组件的内容如下所示：

// wxml <button bindtap="showPopup">展示弹出层</button> <van-popup show="{{ show }}" position="top" bind:close="onClose" closeable >内容</van-popup> // js Page({ data: { show: false }, showPopup() { this.setData({ show: true }); }, onClose() { this.setData({ show: false }); } }); 复制代码 重点属性分析

van-popup组件可以通过position属性的五个值： center、top、right、bottom、left 来快捷的控制是从哪个位置弹出网络营销策划案例如下所示：

// wxml <button bindtap="showPopup">展示弹出层</button> <van-popup show="{{ show }}" position="top" bind:close="onClose" closeable >内容</van-popup> // js Page({ data: { show: false }, showPopup() { this.setData({ show: true }); }, onClose() { this.setData({ show: false }); } }); 复制代码 重点属性分析

van-popup组件可以通过position属性的五个值： center、top、right、bottom、left 来快捷的控制是从哪个位置弹出例如：上例中的弹框从上往下弹出

可以通过round属性来控制弹窗内容是否显示圆角closeable可以决定是否显示关闭弹框的图标按钮例如：上例中的弹窗将不显示圆角同时显示关闭按钮

各种基本的弹窗形式如下：

三、Dialog对话框基本用法

对话框则是在popup弹出层的基础上添加了额外的内置的标题快速确定按钮等组件用于消息提示、消息确认等场景下面看看其常见用法。

常规用法——带标题

最常规的用法就是直接使用van-dialog组件通过组件的show属性来控制其是否展示组件内部嵌套的其他组件或标签是dialog组件的内容如下所示：

// wxml <van-dialog show="{{ show }}" confirm-button-open-type="getUserInfo" bind:close="onClose" bind:getuserinfo="getUserInfo" > <view class="message">代码是写出来给人看的附带能在机器上运行</view> </van-dialog> // js Page({ data: { show: true }, getUserInfo(event) { console.log(event.detail); }, onClose() { this.setData({ close: false }); } }); 复制代码

标签： ltshow组件gt

上一篇: 微信小程序练习demo
下一篇: 写了一个小程序_无聊也是一种生产力，为什么我很无聊

热门文章

最新文章

QQ咨询