AD:靠谱的微信小程序外包开发

admin

admin

发表于 2017-07-01 13:02:40

摘要:微信小程序开发者社区(www.mntuku.cn)为您提供:微信小程序仿闲鱼『下拉菜单』,省市区联动选择器(附源码) ... ...
相关的资讯,希望对您有帮助。

微信小程序仿闲鱼『下拉菜单』,省市区联动选择器(附源码) ... ...

本文作者:xiaoxiaoxiao;已经获得授权,来自原文地址;你如需转载分享,请在原地址内征得作者的授权同意;下拉菜单我们非常常见了,但是要在微信小程序中实现并不容易,今天带来的是仿闲鱼下拉菜单,相信对您有一定 ...

本文作者:xiaoxiaoxiao;已经获得授权,来自原文地址;你如需转载分享,请在原地址内征得作者的授权同意;

下拉菜单我们非常常见了,但是要微信小程序中实现并不容易,今天带来的是仿闲鱼下拉菜单,相信对您有一定的帮助~~

先看效果:

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

1)tab状态的切换

先看效果:

wxml代码:

  1. <view class={{navindex == 1? active : }}>
  2. <view class=content>区域view>
  3. view>
  4. <view class={{navindex == 2? active : }} >
  5. <view class=content>女装view>
  6. view>
  7. <view class={{navindex == 3? active : }} >
  8. <view class=content>排序view>
  9. view>
  • class中有个三目运算符
  • 点击的时候切换navindex值即可
  • 获得active,表示切换到另一种状态

2)菜单自上而下的动效

先看效果:

wxss代码:

  1. @keyframes slidown{
  2. from{
  3. transform: translateY(-100%);
  4. }
  5. to{
  6. transform: translateY(0%);
  7. }
  8. }
  9. @keyframes slidup{
  10. from{
  11. transform: translateY(0%);
  12. }
  13. to{
  14. transform: translateY(-100%);
  15. }
  16. }

原理其实就是利用CSS3中的translateY做位移,就能实现自上而下的动效。

3)背景蒙层缓慢消失

先看效果:

wxss代码:

  1. .fullbg{
  2. background: rgb(1, 1, 1);
  3. transition: all 2s;
  4. opacity: 0;
  5. }
  6. .fullopacity{
  7. opacity: .5;
  8. }

好吧,这里就是对opacity透明度做了一个transtion的过渡效果而已,so easy~~

4)省市区联动选择器

先看效果:

city.js文件:

  1. //下载地址:https://github.com/overtrue/city.js/tree/master/src
  2. var city_data={北京市:{北京市:[东城区,西城区,崇文区,宣武区,朝阳区,丰台区,石景山区...

index.js文件

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

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

项目地址:https://github.com/didiaohu/xiaoxiaoxiao/tree/master/drop-down-menu/menudown

项目下载:menudown.zip


28阅读 | 0评论
你的回应
写文章

6981