微信小程序仿閒魚『下拉菜單』

轉載：請寫明掘金原文連接及做者名 '小小小'
一個潛心研究小程序QQ羣：139128168 ← 點擊加羣

下拉菜單咱們很是常見了，可是要在微信小程序中實現並不容易，今天帶來的是仿閒魚下拉菜單，相信對您有必定的幫助~~

先看效果：

展現效果

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

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市]獲取該市裏面的全部縣區。

源碼下載

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