仿天猫、淘宝的侧滑菜单栏

作者: 码工人生 | 来源:发表于2018-01-30 21:51 被阅读165次

    最近项目需求,需要写一个筛选功能的侧滑菜单栏。像京东、淘宝、天猫都有这种效果,尤其天猫的效果最好,于是就按照天猫的效果封装了一个侧滑菜单栏工具。
    先看下天猫的点击右上角筛选,会有这个侧滑效果:


    a1.gif

    然后Demo基本实现了和天猫类似的功能:


    a2.gif
    功能看似简单,但打开天猫app,然后查看它的筛选功能,背景色的变化,以及侧滑效果,还是有很多细节需要注意的。
    层级结构分为三层:
    a3.png

    最下面是一个ViewController ,整个可滑动控件是一个View,这个View有黑色半透明背景,View里有个子ContentView。半透明view加入了Tap手势,ContentView里加了Pan手势。使用起来,也很简单。


    a4.png
    另外,实现这个功能时,我思考了几种方法:
    1.侧滑的View使用ScrollView,这样滑动效果自动就能实现;
    2.右侧滑动部分使用controller,这样利用navigationController自带的返回手势来实现;
    3.但以上两种都有弊端,于是我选择目前这种,自定义一个View,添加pan手势和tap手势实现。
    下载运行后,本demo对应路径如图: a7.jpg

    Demo地址

    相关文章

      网友评论

        本文标题:仿天猫、淘宝的侧滑菜单栏

        本文链接:https://www.haomeiwen.com/subject/lirhzxtx.html