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

先看效果：

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

1）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市]获取该市里面的所有县区。