uni-app 从底部向上弹出菜单
我在项目需求中需要实现从底部向上弹窗菜单效果功能在uni-app给出原生组件showActionSheet发现设置标题, 在uni-app项目中正常显示, 但是在微信小程序中不显示了, 我这里还有一个问题就是标题太长, 而showActionSheet没有办法设置标题字体大小, 这就很尴尬了接下来看看我已经实现的效果吧这是我需要效果官方没有给我们, 这里我们只能自定义了项目根目录创建一个文件夹co
·
我在项目需求中需要实现从底部向上弹窗菜单效果功能
在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下载
更多推荐
已为社区贡献21条内容
所有评论(0)