微信小程序下拉菜单功能的实现

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

页面wxml代码如下:

  <!-- 下拉菜单栏 --><view class='list'><ul class="font_s30"><li bindtap="getNav" data-id='area' style="color:{{c_area}}"><view><span class = "l_name" id="area">{{area}}</span><image src='{{url}}' style='width:20rpx; height:16rpx'></image></view></li><li bindtap="getNav" data-id='position' style="color:{{c_position}}"><view><span class = "l_name" id="position" >{{position}}</span><image src='{{url1}}' style='width:20rpx; height:16rpx'></image></view></li><li bindtap="getNav" data-id='price' style="color:{{c_price}}"><view><span class = "l_name" id="price">{{price}}</span><image src='{{url2}}' style='width:20rpx; height:16rpx'></image></view></li><li bindtap="getNav" data-id='cast' style="color:{{c_cast}}"><view><span class = "l_name" id="cast">{{cast}}</span><image src='{{url3}}' style='width:20rpx; height:16rpx'></image></view></li></ul></view><!-- 下拉显示列表--><view class='area' hidden="{{show}}"><view class='selectList'><p wx:for="{{content}}" wx:key="item.code" id="{{item.code}}" data-name="{{item.name}}" class="s_list font_s33 {{listColor==tap+ item.code?'a_color':''}}"  bindtap="liCheck">{{item.name}}</p></view></view>

js代码如下:

  data: {show:true,content:",},
getNav: function(e) {var id = e.currentTarget.dataset.id; var that = this;var url = "/apid/r/4";var pram = "";if(id == "area"){that.setData({url: "/images/menu/unselect.png",})    }else if(id == "position"){that.setData({url1: "/images/menu/unselect.png",}) }else if(id == "price"){that.setData({url2: "/images/menu/unselect.png",}) } else if (id == "cast") {that.setData({url3: "/images/menu/unselect.png",}) }util.wxRequest(url, pram, null, function(data) {data.push({code:'',name:'不限'})that.setData({show: false,content:data})}, null, that);},

实现效果如下:
在这里插入图片描述


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

相关文章

微信小程序-自定义下拉框组件

知识点&#xff1a;组件&#xff0c;animation&#xff0c;获取当前点击元素的索引与内容 微信小程序中没有select下拉选项框&#xff0c;所以只有自定义。自定义的话&#xff0c;可以选择模板的方式&#xff0c;也可以选择组件的方式来创建。 这次我选择了组件&#xff0c;这…

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

先看需求和效果&#xff0c;移动端设计比较常用的下拉菜单&#xff0c;主要用于筛选查询列表结果。下拉菜单的样式可以根据自己的具体需求进行修改。这里根据自己的实际需求开发了三种下拉类型&#xff1a; 效果展示 第一个是单选下拉菜单&#xff0c;单选之后立即收起。 第…

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

效果图&#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;可…