效果圖如下：點(diǎn)擊右上角左邊就會(huì)彈出抽屜，點(diǎn)擊抽屜左邊就會(huì)出現(xiàn)抽屜

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

<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" >聯(lián)系我們</button></navigator><navigator url="ceshi" hover-class="navigator-hover"><button type="default" >測(cè)試</button></navigator></uni-drawer></view>

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

methods: {//跳轉(zhuǎn)goto_Home() {uni.switchTab({url: '/pages/index/index'});},//打開盒子confirm(){},// 打開窗口showDrawer(e) {this.$refs[e].open()},// 關(guān)閉窗口closeDrawer(e) {this.$refs[e].close()},// 抽屜狀態(tài)發(fā)生變化觸發(fā)change(e, type) {console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打開' : '關(guān)閉'));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}},

總結(jié)

以上是生活随笔為你收集整理的uniapp左侧抽屉抽屉的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。