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