微信小程序：有赞小程序UI( vant-weapp ) actionsheet组件源码窥探

原文链接

前言

还是微信小程序项目，虽然有一些优秀的第三方组件，但是秉持高度还原UI设计稿的原则，没有直接在项目中使用。遇到一些类似的逻辑时，可以参考一下这些开源项目的实现方式。难的往往只是某一个点，有时候我们需要的只是一张地图（PS:来自硬派脱口秀节目《知识就是力量》）。

开始

为什么研究actionsheet组件？

因为项目中设计较多的交互动画，想要自己同一封装，可多处使用。一方面可以减少代码量，另一方面可以将动画与逻辑分离，更易于管理。

正文

1. 首先，需要在github上下载vant-weapp的源码；
2. 把项目clone或下载到本地，参照官方说明，编译出可运行的小程序代码；
3. 使用微信编辑器打开项目，并把编译出的小程序源码拖进你喜欢的编辑器。

actionsheet示例页面：

actionsheet页面代码：

wxml:

<demo-block title="基础用法" padding>
  <van-button bind:click="toggleActionsheet1">弹出 Actionsheet</van-button>
  <!-- 监听了close事件 show控制显示和隐藏 -->
  <van-actionsheet
    show="{
  { show1 }}"
    actions="{
  { actions }}"
    bind:close="toggleActionsheet1"
    bind:select="toggleActionsheet1"
  />
</demo-block>

<demo-block title="带取消按钮的 Actionsheet" padding>
  <van-button bind:click="toggleActionsheet2">弹出带取消按钮的 Actionsheet</van-button>
  <van-actionsheet
    show="{
  { show2 }}"
    actions="{
  { actions }}"
    cancel-text="取消"
    bind:close="toggleActionsheet2"
    bind:cancel="toggleActionsheet2"
    bind:select="toggleActionsheet2"
  />
</demo-block>

<demo-block title="带标题