微信小程式仿閒魚『下拉選單』

小小小發表於2016-12-11
微信小程式
轉載：請寫明掘金原文連結及作者名 '小小小'
一個潛心研究小程式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，是不是又忘了關注~~』

相關文章