素材网站陕西seo公司
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>4.未开发说明：
隐式设置和定时发布还未开发