微信小程序下拉菜单组件实现

article/2025/10/8 6:21:35

先看需求和效果,移动端设计比较常用的下拉菜单,主要用于筛选查询列表结果。下拉菜单的样式可以根据自己的具体需求进行修改。这里根据自己的实际需求开发了三种下拉类型:

效果展示

第一个是单选下拉菜单,单选之后立即收起。
在这里插入图片描述
第二个是复选下拉菜单,主要提供了多选的功能,显示确定和重置按钮用于修改复选结果。
在这里插入图片描述
第三种是自定义内容,提供给用户自己写组件内容的插槽。
在这里插入图片描述

要点

1. 组件间的关系

父组件WXML

<view class="mt_dropdown" id="mt_dropdown"><slot></slot>
</view>

DEMO运用组件

<mt-dropdown><mt-dropdown-item></mt-dropdown-item><mt-dropdown-item></mt-dropdown-item>
</mt-dropdown>

主要问题:子组件是放在slot插槽里面,如何和父组件进行沟通。因为遮罩层是嵌在子组件里的,所以需要点击打开一个下拉菜单子项的时候,去关闭其余下拉菜单子项。大家有空可以去看下vant-weapp的源码,这里处理的较为简单。最主要的问题就是<mt-dropdown-item><mt-dropdown>之间如何沟通。

遇事不决先看文档微信小程序-组件间关系,主要是relations定义段


微信小程序代码片段,可以在微信开发者工具中查看效果和代码。

我在小程序开发的过程中也开发了许多组件,可以在我的gitee地址中去查看,所有组件的API都可以在Wiki中查看(有的太懒就没写了),如果好的建议可以留言给我或者评论跟我讨论。如果对你有用可以点赞、收藏、分享。


http://chatgpt.dhexx.cn/article/tE870cVk.shtml

相关文章

微信小程序 实现从顶部弹出的下拉框

效果图&#xff1a; 我尝试了微信提供的API wx.animation去实现这个功能&#xff0c;但很是麻烦&#xff0c;而且对于我这刚接触小程序的渣渣而言&#xff0c;实现起来也很是困难。所以我换了种方法&#xff0c;采用CSS的动画去实现。 wxml: <image classfabiao src../ico…

微信小程序下拉菜单实例

微信小程序下拉菜单思路与步骤&#xff1a; 布局方面&#xff0c;整体使用dl来写&#xff0c;二级包在dd中&#xff0c;用ul li来写&#xff1b;交互方面&#xff0c;点击某一级菜单&#xff0c;关闭兄弟子菜单&#xff0c;点击某子菜单关闭所有菜单。 1.使用dt做出第一级菜单 …

微信小程序实现上拉下拉菜单

问题 在使用小程序的时候基本的页面的一般都是很简洁的&#xff0c;所以会有一些菜单来做简单的诠释说明&#xff0c;或者是提供一些选项。这些菜单的弹出方式一般是向上和向下&#xff0c;那么如何来设置这些上下拉的菜单呢&#xff1f; 方法 上下拉菜单在微信小程序中起提示、…

微信小程序例子——下拉列表

1、效果展示 2、关键代码 .js文件 Page({data:{// text:"这是一个页面"open:false},showitem:function(){this.setData({open:!this.data.open})},onLoad:function(options){// 页面初始化 options为页面跳转所带来的参数},onReady:function(){// 页面渲染完成},onS…

uni-app微信小程序——下拉多选框

插件来自&#xff1a;select-cy - DCloud 插件市场 1、组件代码 <template><view class"uni-select-cy" :style"{ z-index: zindex }"><view class"uni-select-cy-select" :class"{ active: active }" click.stop&quo…

微信小程序下拉框选择

wxml代码 <view classtop-selected bindtapbindShowMsg><text>{{grade_name}}</text> </view> <!-- 下拉需要显示的列表 --> <view class"select_box" wx:if"{{select}}"><view wx:for"{{grades}}" wx:…

微信小程序——自定义下拉框

微信小程序本身并没有自带的下拉框组件&#xff0c;我们可以通过view标签自定义一个下拉框。(仅供参考&#xff09; 目录 文件目录实现效果实现逻辑设置数据设置默认选项实现弹出下拉框提供选项值设置所选值 源码wxmlwxssjs 文件目录 文件的功能&#xff1a; xxx.js&#xff…

小程序如何实现下拉选项操作

wxml文件代码 <picker class"picker" mode"selector" bindchange"bindAccountChange" value"{{accountIndex}}" range-key"label"range"{{accounts}} "><view class"weui-select">{{accou…

小程序下拉列表框菜单

小程序下拉列表框菜单 <view classtop><view classtop-text> 选择班别</view><!-- 下拉框 --><view classtop-selected bindtapbindShowMsg><text>{{grade_name}}</text><image src/images/xia.png></image></view&…

微信小程序的简单下拉框组件

网上的下拉框组件都不是自己想要的于是就自己写了一个。 wxml 原代码上传竟然显示不出来&#xff0c;wxml只能截图了&#xff0c;然后是js部分 data: { dropdownData:[“综合排序”,”行政区”,”商业圈”],//下拉框的数组 selectData: [‘默认排序’, ‘距离我最近’, …

微信小程序组件 —— 树形下拉框

因为项目需求&#xff0c;需要一个树形下拉选择框&#xff0c;参考了网上的树形结构整理出了这样一个效果图 下载地址&#xff1a;wx_treeSelect下载 其实主要还是参考了treeview的递归思想 微信小程序实现简单的树形图treeview 绘制出下拉框内的内容&#xff0c;在加个状态判…

微信小程序 一个简单的select下拉框

微信小程序 一个简单的select下拉框 用的是transform过渡&#xff0c;没用动画 看看效果 废话不多说&#xff0c;直接上代码 wxml: <view class"item"><label class"first"><text>*</text>公司/商户类型&#xff1a;</labe…

微信小程序下拉选项框

效果图 test.js /*** 页面的初始数据*/data: {shows: false, //控制下拉列表的显示隐藏&#xff0c;false隐藏、true显示selectDatas: [消费账户, 平台返利账户, 微信钱包], //下拉列表的数据indexs: 0, //选择的下拉列 表下标,},// 点击下拉显示框selectTaps() {this.setDa…

微信小程序select下拉框实现。

小程序中是没有h5中的下拉 标签的 所以要实现下拉功能就必须自己动手写拉 这里为了更清楚的显示层级 就把源码直接复制过来了 <view classlist-msg><view classlist-msg1><text>商品金额</text><text>&#xffe5;99.00</text></view&…

微信小程序之select下拉框

wxml&#xff1a; <view class"classify-kuangjia"><view class"classify-kuangjia2"><view>商品分类:</view><!-- 下拉框 --><view classclassify bindtapbindShowMsg><text>{{grade_name}}</text><…

微信小程序原生的下拉框组件

前言 近日开发微信小程序时&#xff0c;需要一个下拉框的组件&#xff0c;使用和PC端下拉框一样的方式会显得很丑&#xff0c;于是发现微信官方API有个wx.showActionSheet&#xff0c;但是有诸多限制&#xff0c;例如&#xff1a;最大长度只能是6项&#xff0c;多选等等。 由…

微信小程序实现下拉菜单效果

问题 下拉菜单在各类网页&#xff0c;app或者小程序中都是比较常见的输入控件。下拉菜单的下拉选项的多少可以根据自身需求进行调节&#xff0c;常运用于时间范围选择&#xff0c;地点区域选择&#xff0c;价格区间选择&#xff0c;等等。提供下拉菜单的目的是帮助用户更快更准…

使用微信小程序做一个简易的下拉框,无动画效果,纯原生写法(下拉列表框)

最近在开发的时候&#xff0c;需要使用下拉的效果&#xff0c;但是之前并没有进行书写过&#xff0c;今天做一个简单的demo&#xff0c;来记录一下微信小程序开发的下拉框效果。 微信小程序和jquery最大的区别就是是否操作dom&#xff0c; 微信小程序无需操作dom&#xff0c;可…

微信小程序下拉选择

微信小程序中下拉框选择一般的交互方式有以下两种 直接下拉选择点击选择框后&#xff0c;弹出浮层进行选择 下边分别介绍两种方式的实现。在微信小程序中&#xff0c;这两种实现都需要修改三个文件 js 文件&#xff1a;下拉选择逻辑的具体实现 wxml 文件&#xff1a;下拉组件…

小程序——下拉选择框组件

一、效果 二、说明 最近在开发微信小程序&#xff0c;但是用的lin-ui和vant 都没有下拉选择框组件。在网上搜索一番后&#xff0c;发现了一个挺简单且很好用的下拉框组件。 链接在这里&#xff1a;https://blog.csdn.net/WeiflR10/article/details/121494131 原文中是直接写入…