uni-app 上拉菜单(ActionSheet)

上拉菜单(ActionSheet)通过往上弹出的框，来让用户选择选项。

非常危险的选项会以高亮的红色来让人第一时间识别。

你可以通过点击取消按钮或者点击空白的地方来让它消失。

uni-app 有两种实现方式实现ActionSheet

• 系统原生, 可覆盖视图最顶层
• 自定义, 优点就是可实现各种自己想要的操作

系统原生 ActionSheet

• Api 接口

uni.showActionSheet(OBJECT)

• 参数说明

• popover 值说明（仅App生效）

• success返回参数说明

• 代码示例

var itemList = ["盘古歌技术", "百度", "google"];
uni.showActionSheet({
    itemList: itemList,
    success: function (res)
    {
      var index = res.tapIndex;
      var tapItem = itemList[index];
      console.log("点击了 " + tapItem);
    },
});

自己实现一个 ActionSheet

<template>
	<view>
		<view class="tui-actionsheet-class tui-actionsheet" :class="[show?'tui-actionsheet-show':'']">
			<view class="tui-tips" :style="{fontSize:size+'rpx',color:color}" v-if="tips">
				{{tips}}
			</view>
			<view :class="[isCancel?'tui-operate-box':'']">
				<block v-for="(item,index) in itemList" :key="index">
					<view class="tui-actionsheet-btn tui-actionsheet-divider" :class="[(!isCancel && index==itemList.length-1)?'tui-btn-last':'']"
					 hover-class="tui-actionsheet-hover" :hover-stay-time="150" :data-index="index" :style="{color:item.color || '#1a1a1a'}"
					 @tap="handleClickItem">{{item.text}}</view>
				</block>
			</view>
			<view class="tui-actionsheet-btn tui-actionsheet-cancel" hover-class="tui-actionsheet-hover" :hover-stay-time="150"
			 v-if="isCancel" @tap="handleClickCancel">取消</view>
		</view>
		<view class="tui-actionsheet-mask" :class="[show?'tui-mask-show':'']" @tap="handleClickMask"></view>
	</view>
</template>

<script>
export default {
	name: "tuiActionsheet",
	props: {
		//点击遮罩 是否可关闭
		maskClosable: {
			type: Boolean,
			default: true
		},
		//显示操作菜单
		show: {
			type: Boolean,
			default: false
		},
		//菜单按钮数组，自定义文本颜色，红色参考色：#e53a37
		itemList: {
			type: Array,
			default: function() {
				return [{
					text: "确定",
					color: "#1a1a1a"
				}]
			}
		},
		//提示文字
		tips: {
			type: String,
			default: ""
		},
		//提示文字颜色
		color: {
			type: String,
			default: "#9a9a9a"
		},
		//提示文字大小 rpx
		size: {
			type: Number,
			default: 26
		},
		//是否需要取消按钮
		isCancel: {
			type: Boolean,
			default: true
		}
	},
	methods: {
		handleClickMask() {
			if (!this.maskClosable) return;
			this.handleClickCancel();
		},
		handleClickItem(e) {
			if (!this.show) return;
			const dataset = e.currentTarget.dataset;
			this.$emit('click', {
				index: dataset.index
			});
		},
		handleClickCancel() {
			this.$emit('cancel');
		}
	}
}
</script>

<style>
	.tui-actionsheet {
		width: 100%;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
		visibility: hidden;
		transform: translate3d(0, 100%, 0);
		transform-origin: center;
		transition: all 0.3s ease-in-out;
		background: #eaeaec;
		min-height: 100rpx;
	}

	.tui-actionsheet-show {
		transform: translate3d(0, 0, 0);
		visibility: visible;
	}

	.tui-tips {
		width: 100%;
		padding: 30rpx 60rpx;
		box-sizing: border-box;
		text-align: center;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-operate-box {
		padding-bottom: 12rpx;
	}

	.tui-actionsheet-btn {
		width: 100%;
		height: 100rpx;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		font-size: 36rpx;
		position: relative;
	}

	.tui-btn-last {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-actionsheet-divider::before {
		content: '';
		width: 100%;
		border-top: 1rpx solid #d9d9d9;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}

	.tui-actionsheet-cancel {
		color: #1a1a1a;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-actionsheet-hover {
		background: #f7f7f9;
	}

	.tui-actionsheet-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 9996;
		transition: all 0.3s ease-in-out;
		opacity: 0;
		visibility: hidden;
	}

	.tui-mask-show {
		opacity: 1;
		visibility: visible;
	}
</style>

参数说明

• show 是否显示菜单
• tips 提示文字
• item-list 菜单按钮数组，自定义文本颜色，红色参考色：#e53a37
• mask-closable 点击遮罩 是否可关闭
• color 提示文字颜色
• size 提示文字大小
• is-cancel 是否需要取消按钮

点击事件

• @click="onActionSheetItemClick"
• @cancel="closeActionSheet">

接入流程

• 引入组件
• 注册组件

<script>
import actionSheet from "@/components/pg-actionsheet/pg-actionsheet.vue"
export default {
	components: {
		"pg-actionsheet" : actionSheet,
		chatRecord,
	},

  data () {
    return {
      actionSheet : {
        show: false,
        maskClosable: true,
        tips: "",
        itemList : [
          {text: "复制",color: "#1a1a1a"},
          {text: "删除",color: "#1a1a1a"},
        ]
        color: "#9a9a9a",
        size: 26,
        isCancel: true
      },
    }
  }
}
</script>

应用组件

<template>

<view>

  <pg-actionsheet
    :show="actionSheet.show"
    :tips="actionSheet.tips"
    :item-list="actionSheet.currentItemList"
    :mask-closable="actionSheet.maskClosable"
    :color="actionSheet.color"
    :size="actionSheet.size"
    :is-cancel="actionSheet.isCancel"
    @click="onActionSheetItemClick"
    @cancel="closeActionSheet">
  </pg-actionsheet>

<view>

</template