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

本文主要是介绍微信小程序仿闲鱼『下拉菜单』，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

https://gold.xitu.io/user/58277c482f301e00584f3ecf下拉菜单我们非常常见了，但是要在微信小程序中实现并不容易，今天带来的是仿闲鱼下拉菜单，相信对您有一定的帮助~~

先看效果：

展示效果

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

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/srcvar city_data={"北京市":{"北京市":["东城区","西城区","崇文区","宣武区","朝阳区","丰台区","石景山区"...

index.js文件

this.setData({show : city[currentcity]                              
});

解释起来就是说，当点击xx市的时候，就可以通过city[xx市]获取该市里面的所有县区。

源码下载

这篇关于微信小程序仿闲鱼『下拉菜单』的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---