1.首先明確需求

我想做一個可以選擇媒介的內(nèi)容，來進行發(fā)布媒介的功能

（媒介包含：圖片、文本、視頻）

2.原型設(shè)計

發(fā)布-編輯界面

通過點擊下方的加號，可以自由選擇添加的媒介類型

但是因為預覽中無法看到視頻的效果，所以我這里就完成了添加文本和圖片的效果?

添加一些內(nèi)容后的樣子：

可以分段發(fā)布圖片和文本的效果

也可以對其進行預覽，這樣可以觀察別人瀏覽自己作品的場景

?

如果確定好了，就可以返回發(fā)布內(nèi)容啦！

3.核心代碼 - 抽屜效果實現(xiàn)

抽屜效果參考了，uniapp官網(wǎng)的抽屜組件

uni-app官網(wǎng)https://uniapp.dcloud.net.cn/component/uniui/uni-drawer.html

我改編后的具體代碼如下所示：

<template><view ><uni-card is-full :is-shadow="false"></uni-card><uni-section title="左側(cè)滑出" 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>請選擇添加的內(nèi)容</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()},// 關(guān)閉窗口closeDrawer(e,index) {this.$refs[e].close()this.$emit('custom-event', index);},// 抽屜狀態(tài)發(fā)生變化觸發(fā)change(e, type) {console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打開' : '關(guān)閉'));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.未開發(fā)說明：

隱式設(shè)置和定時發(fā)布還未開發(fā)