微信小程序—史上最自由的自定义actionsheet，支持嵌套各种自定义布局

摘要

说到小程序actionSheet，属于项目最常用的控件之一，也是变化最多端的控件之一，逼不得已，只有自定义，网上很多自定义actionSheet，但估计很少能直接用到项目中使用的，自己写又太麻烦，故笔者为了使用方便，只对actionSheet的显示与隐藏方法与效果进行封装，不涉及actionSheet中的布局、样式及逻辑，大大减少了平时的开发工作。

使用步骤

步骤1

将文末actionSheet组件拷贝至项目components下

步骤2

xxx.json中引用

"hw-actionSheet": "../../components/actionSheet/actionSheet",

步骤3

xxx.wxml中使用

<hw-actionSheet bindactiontap="closeActionSheet" show="{{showActionsheet}}" actions="{{groups}}">
    //在这里添加自定义布局、样式、逻辑，如下：
  <view style="padding:60rpx;" bindtap:"xxxxxx">
    欢迎来到Demo集中营
  </view>
  </hw-actionSheet>

步骤4

xxx.js中使用

data: {
    showActionsheet: false
  },
  openActionsheet:function(){
    this.setData({
      showActionsheet:true
    })
  },
  closeActionSheet: function () {
    this.setData({
      showActionsheet: false
    })
  },

效果图

体验途径

依次点击：custom系列>>>dialog&actionsheet

微信小程序—史上最自由的自定义dialog，支持嵌套各种自定义布局.

actionSheet组件代码

actionSheet.js

module.exports =
(function(modules) {var installedModules = {};
 	function __webpack_require__(moduleId) {
 		if(installedModules[moduleId]) {
			return installedModules[moduleId].exports;
 		}
 		var module = installedModules[moduleId] = {
 			i: moduleId,
 			l: false,
 			exports: {}
 		};
 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

 		module.l = true;
		return module.exports;
	}
__webpack_require__.m = modules;
	__webpack_require__.c = installedModules;
 	__webpack_require__.d = function(exports, name, getter) {
 		if(!__webpack_require__.o(exports, name)) {
			Object.defineProperty(exports, name, { enumerable: true, get: getter });
 		}
 	};
 	__webpack_require__.r = function(exports) {
 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 		}
 		Object.defineProperty(exports, '__esModule', { value: true });
 	};
 	__webpack_require__.t = function(value, mode) {
 		if(mode & 1) value = __webpack_require__(value);
 		if(mode & 8) return value;
		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
		var ns = Object.create(null);
 		__webpack_require__.r(ns);
		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
		return ns;
};
	__webpack_require__.n = function(module) {
	var getter = module && module.__esModule ?
function getDefault() { return module['default']; } :
			function getModuleExports() { return module; };
__webpack_require__.d(getter, 'a', getter);
return getter;
 	};
 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
__webpack_require__.p = "";
 	return __webpack_require__(__webpack_require__.s = 1);
 })
 ([
/* 0 */,
 (function(module, exports, __webpack_require__) {

"use strict";


Component({
    options: {
        multipleSlots: true,
        addGlobalClass: true
    },
    properties: {
        title: {
            type: String,
            value: ''
        },
        showCancel: {
            type: Boolean,
            value: true
        },
        cancelText: {
            type: String,
            value: '取消'
        },
        maskClass: {
            type: String,
            value: ''
        },
        extClass: {
            type: String,
            value: ''
        },
        maskClosable: {
            type: Boolean,
            value: true
        },
        mask: {
            type: Boolean,
            value: true
        },
        show: {
            type: Boolean,
            value: false
        },
        actions: {
            type: Array,
            value: [],
            observer: '_groupChange'
        }
    },
    methods: {
        _groupChange: function _groupChange(e) {
            if (e.length > 0 && typeof e[0] !== 'string' && !(e[0] instanceof Array)) {
                this.setData({
                    actions: [this.data.actions]
                });
            }
        },
        buttonTap: function buttonTap(e) {
            var _e$currentTarget$data = e.currentTarget.dataset,
                value = _e$currentTarget$data.value,
                groupindex = _e$currentTarget$data.groupindex,
                index = _e$currentTarget$data.index;

            this.triggerEvent('actiontap', { value: value, groupindex: groupindex, index: index });
        },
        closeActionSheet: function closeActionSheet(e) {
            var type = e.currentTarget.dataset.type;

            if (this.data.maskClosable || type) {
                this.setData({
                    show: false
                });
                this.triggerEvent('close');
            }
        }
    }
});

})
 ]);

actionSheet.json

{
  "component": true
}

actionSheet.wxml

<wxs module="utils">
    var join = function(a,b) {
        return a+b
    };
    var isNotSlot = function(v) {
        return typeof v !== 'string'
    }
    module.exports = {
        join: join,
        isNotSlot: isNotSlot
    }
</wxs>

<view wx:if="{{mask}}" class="weui-mask {{show ? '' : 'weui-mask_hidden'}} {{maskClass}}" bindtap="closeActionSheet"></view>
<view class="weui-actionsheet {{show ? 'weui-actionsheet_toggle' : ''}} {{extClass}}">
    <!-- 标题 -->
    <slot></slot>
</view>

actionSheet.wxss

.weui-mask {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}

.weui-mask_transparent {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.weui-actionsheet {
  position: fixed;
  left: 0;
  bottom: 0;
  transform: translate(0, 100%);
  backface-visibility: hidden;
  z-index: 5000;
  width: 100%;
  background-color: transparent;
  transition: transform 0.3s;
  overflow: hidden;
}

.weui-actionsheet__title {
  position: relative;
  height: 56px;
  padding: 0 24px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
  line-height: 1.4;
  background: #fff;
}

.weui-actionsheet__title:before {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.1);
}

.weui-actionsheet__title .weui-actionsheet__title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.weui-actionsheet__menu {
  color: rgba(0, 0, 0, 0.9);
  background-color: #fff;
}

.weui-actionsheet__action {
  margin-top: 8px;
  background-color: #fff;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.weui-actionsheet__cell {
  position: relative;
  padding: 16px;
  text-align: center;
  font-size: 17px;
  line-height: 1.41176471;
}

.weui-actionsheet__cell:before {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1rpx solid rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.1);
}

.weui-actionsheet__cell:active {
  background-color: #ececec;
}

.weui-actionsheet__cell:first-child:before {
  display: none;
}

.weui-actionsheet__cell_warn {
  color: #fa5151;
}

.weui-skin_android .weui-actionsheet {
  position: fixed;
  left: 50%;
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: 274px;
  box-sizing: border-box;
  backface-visibility: hidden;
  background: transparent;
  transition: transform 0.3s;
  border-radius: 2px;
}

.weui-skin_android .weui-actionsheet__action {
  display: none;
}

.weui-skin_android .weui-actionsheet__menu {
  border-radius: 2px;
  box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.1);
}

.weui-skin_android .weui-actionsheet__cell {
  padding: 16px;
  font-size: 17px;
  line-height: 1.41176471;
  color: rgba(0, 0, 0, 0.9);
  text-align: left;
}

.weui-skin_android .weui-actionsheet__cell:first-child {
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}

.weui-skin_android .weui-actionsheet__cell:last-child {
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}

.weui-actionsheet_toggle {
  transform: translate(0, 0);
}

.weui-mask.weui-mask_hidden {
  opacity: 0;
  transform: scale3d(1, 1, 0);
}

.weui-mask {
  opacity: 1;
  transform: scale3d(1, 1, 1);
  transition: all 0.3s;
}