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

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

先看效果：

展示效果

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

1）tab状态的切换

先看效果：

tab切换

wxml代码：

<view class="{{navindex == 1? 'active' : ''}}">
    <view class="content">区域</view>
</view>
<view class="{{navindex == 2? 'active' : ''}}" >
    <view class="content">女装</view>
</view>
<view class="{{navindex == 3? 'active' : ''}}" >
    <view class="content">排序</view>
</view>

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

2）菜单自上而下的动效

先看效果：

自上而下动效

wxss代码：

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

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

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

3）背景蒙层缓慢消失

先看效果：

蒙层缓慢消失

wxss代码：

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

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

4）省市区联动选择器

先看效果：

联动选择器
city.js文件：

//下载地址：https://github.com/overtrue/city.js/tree/master/src

var city_data={"北京市":{"北京市":["东城区","西城区","崇文区","宣武区","朝阳区","丰台区","石景山区"...

index.js文件

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

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