uniapp左侧抽屉抽屉

效果图如下：点击右上角左边就会弹出抽屉，点击抽屉左边就会出现抽屉

第一步：
①使用的是uni-drawer 组件在uniapp官网就可以找到
②先下载插件到项目里抽屉插件
③利用这个来进行跳转<navigator url=“”>
④如果发生抽屉变形，就调节一下这个宽度

<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()},// 抽屉状态发生变化触发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左侧抽屉抽屉相关推荐

B端设计指南 —— 弹窗究竟应该如何设计
这篇文章是我自己在工作中受到各种摧残.无数次开会讨论总结而来,如果你现在深处B端行业,强烈建议大家一定要看完. 收到很多同学关于弹窗的疑问,因为在B端的设计过程中,会接触到很多信息展示方面的疑惑,他们 ...
Android Studio 选项菜单和动画结合_Android 应用与iOS 应用之间的设计差异对比！
同一个App,为什么iOS 和Android 的交互操作有那么大的区别?本文将用大量原生设计案例,为你一一说明它们为什么应该这样做,赶紧学起来! 了解并适当结合平台规范与优势,才能做到最佳的用户体验. ...
B端数据表格设计实战指南（建议收藏）
作者:nick (转载已取得作者授权) 1. 前言在企业级中后产品中,通常大量使用表格来展示结构化的数据.合理地设计表格能给用户带来高效的信息获取率,但如何言而有物地设计表格,相信是绝大数刚入行B端 ...
数据表格应该这样设计
作者:nick (转载已取得作者授权) 1. 前言在企业级中后产品中,通常大量使用表格来展示结构化的数据.合理地设计表格能给用户带来高效的信息获取率,但如何言而有物地设计表格,相信是绝大数刚入行B ...
干货！iOS 与 Android 的APP 设计差异
了解并适当结合平台规范与优势,才能做到最佳的用户体验.在<最新Android & iOS设计尺寸规范>一文中介绍 APP 设计规范(https://ds.mockplus.cn), ...
物联网低代码平台常用《组件介绍》
物联网低代码平台包含了大量组件,单击"组件"标签,左侧项目区域切换为组件区域,显示系统所有的组件,下面分别介绍AIRIOT物联网低代码平台各类常用组件. 组件认识所有组件共分为2 ...
华为手机备忘录闹钟铃声怎么设置？
现如今,华为手机不仅成为了国内市场的主流品牌,同时在外观设计和性能方面也日渐完善,而且还支持安装多种类型的软件工具,比如说手机备忘录. 而且有的不仅能够满足我们分条记事并设置提醒的需求,并在提醒到期后 ...
DrawerLayout 官方文档
(新手一枚,多包涵) 摘要: 嵌套类 |继承XML的ATTRS | 常量 | 继承的常量 | 继承的字段 | 构建函数 | 方法 | 保护方法 | 继承的方法 | [全部展开] 公共类 DrawerL ...
Andrpid评测分析-安兔兔V6.0技术解…
安兔兔V6.0版本发布后在行业内引起了不小的轰动,相信通过我们官方的评测文章,大家对安兔兔V6.0版本也能有个大致的认识.今天这篇文章,笔者再次和大家分享一些V6.0版本的细节,通过这些细节让大家可以 ...
C++指针与地址详解 _0
指针的概念 ◆ 1."存储器"的概念文件柜–>文件柜上的抽屉–>抽屉上的编号对应于: 存储器-–>存储单元-–>存储单元的地址 ◆ 2.存储器的使用 1 ...

uniapp左侧抽屉抽屉

uniapp左侧抽屉抽屉相关推荐

最新文章

热门文章