uni-app 从底部向上弹出菜单_uniapp底部弹出框

我在项目需求中需要实现从底部向上弹窗菜单效果功能

在uni-app给出原生组件showActionSheet发现设置标题， 在uni-app项目中正常显示， 但是在微信小程序中不显示了， 我这里还有一个问题就是标题太长， 而showActionSheet没有办法设置标题字体大小， 这就很尴尬了

接下来看看我已经实现的效果吧

这是我需要效果

官方没有给我们， 这里我们只能自定义了

项目根目录创建一个文件夹components主要是放一些我们组件

components下在创建一个文件夹show-action-sheet， 名字不重要， 随便定义， 在show-action-sheet该文件夹下创建一个vue文件

组件代码：

<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('chooseCancel');
			}
		}
	}
</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>

接下来我们来父级组件中引用就行了

<template>
    <view>
        <view @tap="chooseMenu"></view>
        <show-action-sheet :tips="showActionSheet.tips" :itemList="showActionSheet.itemList" :show="showActionSheet.show" :maskClosable="showActionSheet.maskClosable" :isCancel="showActionSheet.isCancel" @chooseCancel="chooseCancel"></show-action-sheet>
    </view>
</template>
 
<script>
    import showActionSheet from '@/components/show-action-sheet/index.vue'
    export default {
		components: {
			ljShowActionSheet
		},
        data() {
			return {
				showActionSheet: {
					show: false,
					maskClosable: true,
					tips: "请选择申请节点身份，不同的节点消耗福卡不同",
					itemList: [{
							text: "红包节点",
							color: "#333"
						},
						{
							text: "广告节点",
							color: "#333"
						},
					],
					color: "#9a9a9a",
					size: 26,
					isCancel: true
				}
			}
		},
        methods: {
			// 点击弹窗
			chooseMenu() {
				this.showActionSheet.show = true;
			},
			
			// 弹窗关闭
			chooseCancel() {
				this.showActionSheet.show = false;
			}
		}
    }
</script>

以上就是所有代码了

如果对你有用，关注一下博主的小程序，登录一下给予支持，以后有什么开源好用的源码都会上传到小程序

组件源码下载地址： show-action-sheet.zip-互联网文档类资源-CSDN下载