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

转载：请写明掘金原文连接及做者名 '小小小'
一个潜心研究小程序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，是否是又忘了关注~~』