README.md

Actionsheet 行动按钮

使用指南

在 app.wxss 中引入组件库所有样式

@import "path/to/zanui-weapp/dist/index.wxss";

在需要使用的页面里引入组件库模板和脚本

<import src="/dist/actionsheet/index.wxml" />
<!-- 直接使用 zan-actionsheet 模板，并且直接传入参数配置 -->
<template is="zan-actionsheet" data="{{ ...actionsheet }}"></template>

const { Actionsheet, extend } = require('path/to/zanui-weapp/dist/index');

// 在 Page 中混入 Actionsheet 里面声明的方法
Page(extend({}, Actionsheet, {
  data: {
    actionsheet: {
      show: false,
      actions: []
    }
  }
  // ...
}));

代码演示

基础功能

在 js 中设置传入的 show 为 true，即可展示出 actionsheet。actionsheet 会根据传入的 actions 展示按钮。

this.setData({
  'actionsheet.show': true
})

当行动按钮被点击或者弹层被关掉时，都可以在可以在页面中注册 handleZanActionsheetClick 和 handleZanActionsheetCancel 方法来监听。

Page({
  // 当行动按钮被关闭时，触发该函数
  // componentId 即为在模板中传入的 componentId
  // 用于在一个页面上使用多个 actionsheet 时，进行区分
  handleZanActionsheetCancel({ componentId }) {
  },

  // 当行动按钮中有一个被点击时触发
  // index 代表被点击按钮在传入参数 actions 中的位置
  handleZanActionsheetClick({ componentId, index }) {
  }
});

Actionsheet 支持的具体参数如下

参数	说明	类型	默认值	必须
show	用来表示是否展示行动按钮	Boolean	false
cancelText	行动按钮底部取消按钮的文案，不传则不显示取消按钮	String
closeOnClickOverlay	是否在点击背景时，关闭行动按钮	Boolean	false
componentId	用于区分行动按钮之间的唯一名称	String
actions	行动按钮的按钮显示配置	Array	[]

actions 的具体数据结构

// actions 为数组结构传入
[{
  // 按钮文案
  name: '选项1',
  // 按钮描述文案，不传就不显示
  subname: '选项描述语1',
  // 按钮特殊类，可以通过传入这个，为按钮增加特殊样式
  className: 'action-class',
  // 按钮是否显示为 loading
  loading: false,
  // 按钮的微信开放能力
  // 具体支持可参考微信官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html
  openType: 'share'
}]