滑动菜单栏(一)开源项目SlidingMenu的使用

一、SlidingMenu简介
相信大家对
SlidingMenu都不陌生了,它是一种比较新的设置界面或配置界面的效果,在主界面左滑或者右滑出现设置界面效果,能方便的进行各种操作。很多优秀的应用都采用了这种界面方案,像facebook、人人网、everynote、Google+等等。如下图所示:
                                                                                                                                                                                                                                                                                                           

              Google+界面效果图                                                                                                  
                    
                       everynote界面效果图 
 

     因为效果确实比较新颖,所以在很多的应用开发中去实现此效果,解决的办法也是不尽相同。诸多比较以后发现,还是GitHub上的开源项目SlidingMenu提供了最佳的实现:定制灵活、各种阴影和渐变以及动画的滑动效果都很不错。不过这是一个开源库,而不是一个完整的项目,要把它作为libary引入到你自己的工程里,简单配置一下就可以实现SlidingMenu的效果。


二、SlidingMenu使用
slidingmenu_library下载地址

要想能够实现SlidingMenu的效果,首先必须要将它作为libary导入到你的工程,先看一下它的目录结构,如图:
这里面的代码我就不详细讲解了,主要是教大家怎么直接拿过来用,不过博主对代码进行了一些非常详细的注
释,有兴趣的同学可以好好学习研究一下。

1、下载完毕之后,将此项目导入Eclipse开发环境中,然后执行如下几个步骤:
<1> 点击右键,点击“Import”按钮,弹出对话框选项;
<2> 选中“Existing Projects into Workspace”选项;
<3> 再单击“Browser”按钮后,弹出选项项目对话框,选中要导入的项目;
<4> 点击“Finish”完成。

2、导入项目之后,然后在新建一个Android项目,将slidingmenu_library导入新建的Android项目中,步骤如下:
<1> 右键点击新建的Android项目,然后点击最下方的“Properties”选项;
<2> 点击弹出对话框之后,在最左侧选择“Android”选项,然后再点击右下方的“Add”按钮;
<3> 点击后弹出对话框,选中之前导入的slidingmenu_library项目;
<4> 选中之后如图所示;
<5> 这就说明了导入库已经成功了,导入成功之后会在Android的引用包中出现一个slidingmenu_library.jar包;
注意:这里有个地方需要大家特别注意一下,在新建完Android项目之后,较新的Eclipse版本都会在Android目录下
生成一个libs的文件夹,里面会有一个android-support-v4.jar的jar包,这个jar一定要记得删掉,否则运行程序的时候
会出现异常,提示是找不到类的异常,博主在这个地方纠结了好长时间。最后发现出现异常的原因是因为在导入
slidingmenu_library类库的时候,这个类库里面本身就包含了android-support-v4.jar的jar包,所以运行的时候就会出
现异常,系统不知道去调用哪个路径的下的包,所以程序崩溃,提示找不到类。

这篇博文引自CSDN   yangyu20121224          http://blog.csdn.net/yangyu20121224/article/details/9255829  
本人在查找资料时发现这篇博文,感觉对自己很有帮助,特此借花献佛。



slidingmenu_library.zip

512.12 KB, 下载次数: 3041, 下载积分: 下载豆 -2

SlidingMenu库

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以帮你编写一个使用 Vue 3 的菜单栏滑动组件。以下是一个简单的示例: ```vue <template> <div class="menu-container"> <div class="menu" ref="menu" @mousemove="handleMouseMove"> <!-- 菜单项 --> <div class="menu-item" v-for="(item, index) in menuItems" :key="index"> {{ item }} </div> </div> </div> </template> <script> import { ref } from 'vue'; export default { data() { return { menuItems: ['菜单项1', '菜单项2', '菜单项3', '菜单项4', '菜单项5'], // 菜单项数组 menuWidth: 0, // 菜单宽度 mouseX: 0, // 鼠标X轴位置 }; }, mounted() { this.menuWidth = this.$refs.menu.offsetWidth; }, methods: { handleMouseMove(event) { this.mouseX = event.clientX; }, }, computed: { menuPosition() { const containerWidth = this.$el.offsetWidth; const maxTranslateX = containerWidth - this.menuWidth; const translateX = (this.mouseX / containerWidth) * maxTranslateX; return `translateX(-${translateX}px)`; }, }, }; </script> <style> .menu-container { width: 100%; overflow: hidden; } .menu { display: flex; transition: transform 0.3s ease; white-space: nowrap; } .menu-item { padding: 10px; } </style> ``` 在上述示例中,我们使用了 Vue 3 的 Composition API,通过 `ref` 创建了响应式的 `menuWidth` 和 `mouseX` 变量。`menuWidth` 用于保存菜单的宽度,`mouseX` 用于保存鼠标的 X 轴位置。 通过监听菜单容器的 `mousemove` 事件,我们可以实时更新 `mouseX` 的值。然后,通过计算属性 `menuPosition`,我们根据鼠标的位置计算出需要应用到菜单项容器的 `transform` 样式,实现菜单项的滑动效果。 最后,我们在模板中使用 `v-for` 循环渲染菜单项,并将计算出的 `menuPosition` 应用到菜单项容器上。 这只是一个简单的示例,你可以根据自己的需求进行修改和扩展。希望对你有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值