下拉選單我們非常常見了，但是要在微信小程式中實現並不容易，今天帶來的是仿閒魚下拉選單，相信對您有一定的幫助~~

先看效果：

麻雀雖小五臟俱全，此效果很複雜，我們將其拆分為多個步驟來分析~

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市]獲取該市裡面的所有縣區。

原始碼下載

『咻咻咻咻duang，是不是又忘了關注~~』