微信小程序仿闲鱼『下拉菜单』

爱被打了一巴掌 2022-05-23 13:49 226阅读 0赞

下拉菜单我们非常常见了，但是要在微信小程序中实现并不容易，今天带来的是仿闲鱼下拉菜单，相信对您有一定的帮助~~

先看效果：

![764c2d70caf9d3af102e.gif][]展示效果

麻雀虽小五脏俱全，此效果很复杂，我们将其拆分为多个步骤来分析~

### 1）tab状态的切换 ###

先看效果：

![b04310875865f32f6f2c.gif][]tab切换

wxml代码：

*  class中有个三目运算符
 *  点击的时候切换navindex值即可
 *  获得active，表示切换到另一种状态

### 2）菜单自上而下的动效 ###

先看效果：

![ac373a28011c15418380.gif][]自上而下动效

wxss代码：

@keyframes slidown{
        from{
            transform:  translateY(-100%);
        }
        to{
            transform:  translateY(0%);
        }
    }
    
    @keyframes slidup{
        from{
            transform:  translateY(0%);
        }
        to{
            transform:  translateY(-100%);
        }
    }

原理其实就是利用css3中的translateY做位移，就能实现自上而下的动效。

### 3）背景蒙层缓慢消失 ###

先看效果：

![d9ebca0abe14bfc427d5.gif][]蒙层缓慢消失

wxss代码：

.fullbg{
        background: rgb(1, 1, 1);
        transition: all 2s;
        opacity: 0;
    }
    .fullopacity{
        opacity: .5;
    }

好吧，这里就是对opacity透明度做了一个transtion的过渡效果而已，so easy~~

### 4）省市区联动选择器 ###

先看效果：

![cc00ee52765983511e65.gif][]联动选择器  
city.js文件：

//下载地址：https://github.com/overtrue/city.js/tree/master/src
    
    var city_data={
        "北京市":{
        "北京市":["东城区","西城区","崇文区","宣武区","朝阳区","丰台区","石景山区"...

index.js文件

this.setData({
        show : city[currentcity]                              
    });

解释起来就是说，当点击xx市的时候，就可以通过city\[xx市\]获取该市里面的所有县区。

[764c2d70caf9d3af102e.gif]: https://lc-mhke0kuv.cn-n1.lcfile.com/764c2d70caf9d3af102e.gif
[b04310875865f32f6f2c.gif]: https://lc-mhke0kuv.cn-n1.lcfile.com/b04310875865f32f6f2c.gif
[ac373a28011c15418380.gif]: https://lc-mhke0kuv.cn-n1.lcfile.com/ac373a28011c15418380.gif
[d9ebca0abe14bfc427d5.gif]: https://lc-mhke0kuv.cn-n1.lcfile.com/d9ebca0abe14bfc427d5.gif
[cc00ee52765983511e65.gif]: https://lc-mhke0kuv.cn-n1.lcfile.com/cc00ee52765983511e65.gif