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

2023-12-19 00:38

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

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市]获取该市里面的所有县区。


源码下载

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



http://www.chinasem.cn/article/510344

相关文章

使用Docker构建Python Flask程序的详细教程

《使用Docker构建PythonFlask程序的详细教程》在当今的软件开发领域,容器化技术正变得越来越流行,而Docker无疑是其中的佼佼者,本文我们就来聊聊如何使用Docker构建一个简单的Py... 目录引言一、准备工作二、创建 Flask 应用程序三、创建 dockerfile四、构建 Docker

java向微信服务号发送消息的完整步骤实例

《java向微信服务号发送消息的完整步骤实例》:本文主要介绍java向微信服务号发送消息的相关资料,包括申请测试号获取appID/appsecret、关注公众号获取openID、配置消息模板及代码... 目录步骤1. 申请测试系统2. 公众号账号信息3. 关注测试号二维码4. 消息模板接口5. Java测试

Python基于微信OCR引擎实现高效图片文字识别

《Python基于微信OCR引擎实现高效图片文字识别》这篇文章主要为大家详细介绍了一款基于微信OCR引擎的图片文字识别桌面应用开发全过程,可以实现从图片拖拽识别到文字提取,感兴趣的小伙伴可以跟随小编一... 目录一、项目概述1.1 开发背景1.2 技术选型1.3 核心优势二、功能详解2.1 核心功能模块2.

python编写朋克风格的天气查询程序

《python编写朋克风格的天气查询程序》这篇文章主要为大家详细介绍了一个基于Python的桌面应用程序,使用了tkinter库来创建图形用户界面并通过requests库调用Open-MeteoAPI... 目录工具介绍工具使用说明python脚本内容如何运行脚本工具介绍这个天气查询工具是一个基于 Pyt

Ubuntu设置程序开机自启动的操作步骤

《Ubuntu设置程序开机自启动的操作步骤》在部署程序到边缘端时,我们总希望可以通电即启动我们写好的程序,本篇博客用以记录如何在ubuntu开机执行某条命令或者某个可执行程序,需要的朋友可以参考下... 目录1、概述2、图形界面设置3、设置为Systemd服务1、概述测试环境:Ubuntu22.04 带图

Python程序打包exe,单文件和多文件方式

《Python程序打包exe,单文件和多文件方式》:本文主要介绍Python程序打包exe,单文件和多文件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录python 脚本打成exe文件安装Pyinstaller准备一个ico图标打包方式一(适用于文件较少的程

Python程序的文件头部声明小结

《Python程序的文件头部声明小结》在Python文件的顶部声明编码通常是必须的,尤其是在处理非ASCII字符时,下面就来介绍一下两种头部文件声明,具有一定的参考价值,感兴趣的可以了解一下... 目录一、# coding=utf-8二、#!/usr/bin/env python三、运行Python程序四、

如何基于Python开发一个微信自动化工具

《如何基于Python开发一个微信自动化工具》在当今数字化办公场景中,自动化工具已成为提升工作效率的利器,本文将深入剖析一个基于Python的微信自动化工具开发全过程,有需要的小伙伴可以了解下... 目录概述功能全景1. 核心功能模块2. 特色功能效果展示1. 主界面概览2. 定时任务配置3. 操作日志演示

Redis迷你版微信抢红包实战

《Redis迷你版微信抢红包实战》本文主要介绍了Redis迷你版微信抢红包实战... 目录1 思路分析1.1hCckRX 流程1.2 注意点①拆红包:二倍均值算法②发红包:list③抢红包&记录:hset2 代码实现2.1 拆红包splitRedPacket2.2 发红包sendRedPacket2.3 抢

无法启动此程序因为计算机丢失api-ms-win-core-path-l1-1-0.dll修复方案

《无法启动此程序因为计算机丢失api-ms-win-core-path-l1-1-0.dll修复方案》:本文主要介绍了无法启动此程序,详细内容请阅读本文,希望能对你有所帮助... 在计算机使用过程中,我们经常会遇到一些错误提示,其中之一就是"api-ms-win-core-path-l1-1-0.dll丢失