uni-app 上拉菜单(ActionSheet)

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

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

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

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

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

系统原生 ActionSheet

  • Api 接口
uni.showActionSheet(OBJECT)
  • 参数说明
参数 类型 必填 说明 平台差异说明
itemList Array<String> 按钮的文字数组 微信、百度、字节跳动小程序数组长度最大为6个
itemColor HexColor 按钮的文字颜色,字符串格式,默认为"#000000" App-iOS、字节跳动小程序不支持
popover Object 大屏设备弹出原生选择按钮框的指示区域,默认居中显示 App-iPad(2.6.6+)、H5(2.9.2)
success Function 接口调用成功的回调函数,详见返回参数说明
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)  
  • popover 值说明(仅App生效)
类型 说明
top Number 指示区域坐标,使用原生 navigationBar 时一般需要加上 navigationBar 的高度
left Number 指示区域坐标
width Number 指示区域宽度
height Number 指示区域高度
  • success返回参数说明
参数 类型 说明
tapIndex Number 用户点击的按钮,从上到下的顺序,从0开始
  • 代码示例
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