效果圖如下：點擊右上角左邊就會彈出抽屜，點擊抽屜左邊就會出現抽屜

第一步：
①使用的是uni-drawer 組件在uniapp官網就可以找到
②先下載插件到項目里抽屜插件
③利用這個來進行跳轉<navigator url=“”>
④如果發(fā)生抽屜變形，就調節(jié)一下這個寬度

<view class="two"><view class="word-btn draw-cotrol-btn hideOnPc" hover-class="word-btn--hover" :hover-start-time="20" :hover-stay-time="70"@click="showDrawer('showLeft')"><image src="../../static/daohang.png" class="img_logo2" @click="change()"></image></view><uni-drawer class="drawer" ref="showLeft" mode="left" :width="150" @change="change($event,'showLeft')"><br><br><navigator url="demo" hover-class="navigator-hover"><button type="default" >聯系我們</button></navigator><navigator url="ceshi" hover-class="navigator-hover"><button type="default" >測試</button></navigator></uni-drawer></view>

第二步：
注意第一個跳轉是我寫的一個公司Logo點擊它跳轉到主頁，在Logo圖片上寫上top="goto_Home"就可以跳轉到主頁了，也要加上navigator url="index"

methods: {//跳轉goto_Home() {uni.switchTab({url: '/pages/index/index'});},//打開盒子confirm(){},// 打開窗口showDrawer(e) {this.$refs[e].open()},// 關閉窗口closeDrawer(e) {this.$refs[e].close()},// 抽屜狀態(tài)發(fā)生變化觸發(fā)change(e, type) {console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打開' : '關閉'));this[type] = e}},onNavigationBarButtonTap(e) {if(this.showLeft){this.$refs.showLeft.close()}else{this.$refs.showLeft.open()}},// app端攔截返回事件 ，僅app端生效onBackPress() {if (this.showRight || this.showLeft) {this.$refs.showLeft.close()this.$refs.showRight.close()return true}},

總結

以上是生活随笔為你收集整理的uniapp左侧抽屉抽屉的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。