当前位置：首页 > news >正文

uni-app 发布媒介功能（自由选择媒介类型的内容）设计

news 2025/6/26 20:39:04

1.首先明确需求

我想做一个可以选择媒介的内容，来进行发布媒介的功能

（媒介包含：图片、文本、视频）

2.原型设计

发布-编辑界面

通过点击下方的加号，可以自由选择添加的媒介类型

但是因为预览中无法看到视频的效果，所以我这里就完成了添加文本和图片的效果

添加一些内容后的样子：

可以分段发布图片和文本的效果

也可以对其进行预览，这样可以观察别人浏览自己作品的场景

如果确定好了，就可以返回发布内容啦！

3.核心代码 - 抽屉效果实现

抽屉效果参考了，uniapp官网的抽屉组件

uni-app官网https://uniapp.dcloud.net.cn/component/uniui/uni-drawer.html

我改编后的具体代码如下所示：

<template><view ><uni-card is-full :is-shadow="false"></uni-card><uni-section title="左侧滑出" type="line"><view class="example-body" ><wd-icon @click="showDrawer('showRight')" class="add-content" color="#ffffff" name="add" size="32rpx"></wd-icon><uni-drawer class="drawer-content" ref="showRight" mode="right" :width="320" @change="change($event,'showRight')"><view class="close"><view class="add-tip" ><wd-icon @click="closeDrawer('showRight',-1)" name="close" size="16px"></wd-icon><text>请选择添加的内容</text><text></text></view></view><view class="add-select"><text class="item" @click="closeDrawer('showRight',0)">图片</text><text class="item" @click="closeDrawer('showRight',1)">文本</text></view></uni-drawer></view></uni-section></view>
</template><script>export default {data() {return {showRight: false,}},methods: {// 打开窗口showDrawer(e) {this.$refs[e].open()},// 关闭窗口closeDrawer(e,index) {this.$refs[e].close()this.$emit('custom-event', index);},// 抽屉状态发生变化触发change(e, type) {console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));this[type] = e}}}
</script><style lang="scss" scoped>.example-body {padding: 10px;background-color: red;border-radius: 10rpx;margin: 20rpx;padding: 20rpx 25rpx;background-color: #00e900;font-size: 30rpx;color: #282c35;border-radius: 40rpx;box-shadow: 0 0 20rpx rgba(228, 228, 228, 0.5); .add-content{display: flex;justify-content: center;align-items: center;font-size: 20rpx;}	}.close {padding: 10px;
}.add-tip{display: flex;justify-content: space-between;align-items: center;font-size: 30rpx;padding-top: 40px;
}.drawer-content{display: flex;flex-direction: column;.add-select{display: flex;flex-direction: column;.item{display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 30rpx;margin: 0rpx 40rpx;border-bottom: #e3e3e3 solid 1rpx;&:active{background-color: #ececec ;}}}
}
</style>