-
2019-07-30 16:59:55
一般来说的话,总有点需要下拉并且能够搜索选择的需求。
首先wxml
<!-- 下拉菜单 --> <view class='menu-po'> <!-- 请选择 --> <view class='menu'> <view class='menu-list'> <view class="{{item.key==menuNums&&openPicker?'menu-nav2':'menu-nav'}}" wx:for="{{ msgList }}" wx:for-index="idx" data-key='{{item.key}}' wx:key="key" data-hi="{{ idx }}" data-name='{{item.name}}' bindtap="menuClick"> <text class='menu-text'>{{ item.name }}</text> <image class='menu-image' src='/pages/img/pull.png'></image> </view> </view> </view> <!-- 列表栏 --> <view class='menu-if'> <!-- 区域 --> <view class="meun-txt over-auto" hidden='{{ meunShow[0].isShows ? true : false }}'> <scroll-view scroll-y="true" style="height: 446rpx"> <text wx:for="{{ sousuoList }}" data-id="{{item.id}}" class='meun-city-txt meun-city-txt-price' bindtap='souSearch' data-name='{{item.name}}'>{{ item.name }}</text> </scroll-view> </view> </view> </view>
其次是wxss
.menu-po { position: relative; left: 0; top: 0; right: 0; bottom: 0; width: 25%; margin-left: 5%; display: inline-block; margin-top: 10px; margin-bottom: 10px; } .menu-list { display: flex; justify-content: space-between; } .menu-nav { display: flex; align-items: center; justify-content: center; } .menu-nav2 { display: flex; align-items: center; justify-content: center; } .menu-nav2 image { width: 24rpx; height: 15rpx; } .menu-nav2 text { font-size: 14px; } .menu-nav image { width: 24rpx; height: 15rpx; } .menu-nav text { color: #696969; font-size: 14px; } .shadow { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); z-index: 1; position: absolute; top: 210rpx; } .menu-if { background-color: #fff; box-sizing: border-box; position: absolute; z-index: 9; margin-left: -15px; width: 100%; } .swiper-item { background: #fff; width: 100%; height: 600rpx; display: none; position: absolute; top: 100rpx; z-index: 333333; left: 0; animation: displays 1s; } .meun-txt { height: auto; color: #696969; } .menu-text-list { position: relative; left: 0; top: 0; right: 0; bottom: 0; } .menu-text-list-left { width: 100%; background-color: #fff; box-sizing: border-box; padding-left: 35rpx; } /* text样式 */ .meun-city-txt { display: block; border-bottom: 1rpx solid #e9e9e9; width: 100%; padding: 25rpx 0; font-size: 14px; } .meun-city-txt-price { display: flex; justify-content: center; } .menu-text-list-rig { width: 50%; position: absolute; top: 0; right: 0; background-color: #f9f9f9; z-index: 10; box-sizing: border-box; padding-left: 35rpx; }
最后是js文件
Page({ /** * 页面的初始数据 */ data: { msgList: [{ key: 1, name: '请选择' }], // 判断导航栏列表是否显示 meunShow: [{ isShows: true }], sousuoList: [{ id: 1, name: '新房' }, { id: 2, name: '二手房' }, { id: 3, name: '写字楼' }, { id: 4, name: '商铺' }, { id: 5, name: '出租' }], }, souSearch: function (e) { var that = this; var openPicker = this.data.openPicker; var house_name = e.target.dataset.name; var msgList = that.data.msgList; this.setData({ openPicker: !openPicker, }) for (var i = 0; i < msgList.length; i++) { var keys = msgList[i].key; if (keys == 1) { msgList[i].name = house_name; that.setData({ msgList: msgList, house_name: house_name }) } } var menuNum = that.data.menuNum; var meunShow = this.data.meunShow; var menuSrc = "meunShow[" + menuNum + "].isShows"; // console.log('menuNum:' + menuNum); for (var n = 0; n < meunShow.length; n++) { // 拼接 ,使我们可以获取到menuShow里面每一个isSHows var menuSrcs = meunShow[n].isShows; // console.log('menuSrcs:' + menuSrcs); // 解决重复点击不能隐藏的问题 if (n != menuNum) { this.setData({ menuSrcs: true }); }; }; // 给当前点击的去反data中设置的meunShow,使之显示, 只写此处只会显示不能隐藏 this.setData({ [menuSrc]: !this.data.meunShow[menuNum].isShows }); }, menuClick: function (e) { // 获取通过wxml data-hi="{{ idx }}" 传过来的索引 var that = this; var menuNum = e.currentTarget.dataset.hi; that.setData({ menuNum: menuNum }) var name = e.currentTarget.dataset.name; if (name == that.data.name) { // console.log('=='); that.setData({ openPicker: !this.data.openPicker, }) } else { // console.log('!='); that.setData({ openPicker: true, }) } that.setData({ name: name }) // console.log(name + ',' + menuNum); // 拼接 ,使我们可以获取到menuShow里面每一个isSHows var menuSrc = "meunShow[" + menuNum + "].isShows"; // console.log('picker:' + this.data.openPicker); this.setData({ needAnimation: true, menuNums: menuNum + 1 }); // 循环data中设置的meunShow for (var n = 0; n < this.data.meunShow.length; n++) { // 拼接 ,使我们可以获取到menuShow里面每一个isSHows var menuSrcs = "meunShow[" + n + "].isShows"; // 解决重复点击不能隐藏的问题 if (n != menuNum) { // 初始化,每次点击时先全部隐藏,但是重复点击不会隐藏 this.setData({ [menuSrcs]: true }); }; }; // 给当前点击的去反data中设置的meunShow,使之显示, 只写此处只会显示不能隐藏 this.setData({ [menuSrc]: !this.data.meunShow[e.currentTarget.dataset.hi].isShows }); }, })
这就是下拉选择框的全部代码了。
更多相关内容 -
微信小程序 下拉菜单的实现
2020-11-27 18:49:49微信小程序 下拉菜单 看下实现效果图: 实例: //wcss /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; ... -
微信小程序自定义select下拉选项框组件的实现代码
2021-01-03 08:26:53微信小程序中没有select下拉选项框,所以只有自定义。自定义的话,可以选择模板的方式,也可以选择组件的方式来创建。 这次我选择了组件,这样只需引入组件和添加数据,其它的不用管,就能实现多个地方重复使用了。 ... -
微信小程序中下拉选择中带手动输入搜索的实现
2022-02-10 08:29:41微信小程序中下拉选择中带手动输入搜索的实现 -
微信小程序 select 下拉框组件功能
2020-10-16 10:40:58主要介绍了微信小程序 select 下拉框组件功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 -
微信小程序picker组件下拉框选择input输入框的实例
2020-08-29 08:51:35主要介绍了微信小程序picker组件下拉框选择input输入框的实例的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下 -
微信小程序下拉选择框—相当于网页的select
2018-08-02 14:50:00//选择的下拉列表下标 }, // 点击下拉显示框 selectTap() { this .setData({ show: ! this .data.show }); }, // 点击下拉列表 optionTap(e) { let Index = e.currentTarget.dataset.index; //...index.html
<view class='select_box'> <view class='select' catchtap='selectTap'> <text class='select_text'>{{selectData[index]}}</text> <image class='select_img {{show&&"select_img_rotate"}}' src=''></image> </view> <view class='option_box' style='height:{{show?(selectData.length>5?300:selectData.length*60):0}}rpx;'> <text class='option' style='{{index==selectData.length-1&&"border:0;"}}' wx:for='{{selectData}}' wx:key='this' data-index='{{index}}' catchtap='optionTap'>{{item}}</text> </view> </view>
index.wxss
page{ background: #f3f7f7; } .select_box{ background: #fff; width: 80%; margin: 30rpx auto; position: relative; } .select{ box-sizing: border-box; width: 100%; height: 70rpx; border:1px solid #efefef; border-radius: 8rpx; display: flex; align-items: center; padding: 0 20rpx; } .select_text{ font-size: 30rpx; flex: 1; } .select_img{ width: 40rpx; height: 40rpx; display: block; transition:transform 0.3s; } .select_img_rotate{ transform:rotate(180deg); } .option_box{ position: absolute; top: 70rpx; width: 100%; border:1px solid #efefef; box-sizing: border-box; height: 0; overflow-y: auto; border-top: 0; background: #fff; transition: height 0.3s; } .option{ display: block; line-height: 40rpx; font-size: 30rpx; border-bottom: 1px solid #efefef; padding: 10rpx; }
index.js
Page({ data: { show: false,//控制下拉列表的显示隐藏,false隐藏、true显示 selectData: ['1', '2', '3', '4', '5', '6'],//下拉列表的数据 index: 0//选择的下拉列表下标 }, // 点击下拉显示框 selectTap() { this.setData({ show: !this.data.show }); }, // 点击下拉列表 optionTap(e) { let Index = e.currentTarget.dataset.index;//获取点击的下拉列表的下标 this.setData({ index: Index, show: !this.data.show }); }, onLoad: function (options) { } })
-
微信小程序实现下拉框功能
2020-10-16 17:04:10主要为大家详细介绍了微信小程序实现下拉框功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
微信小程序下拉筛选菜单WXDropDownMenu组件
2021-03-29 21:01:47先来看下效果图: (此图片来源于网络,如有侵权,请联系删除! ) 思路与步骤: 布局方面,整体使用dl来写,二级包在dd中,用ul li来写;... 1.使用dt做出第一级菜单 2.使用dd嵌套第二级菜单,初始隐藏、position为... -
微信小程序下拉选择器-普通选择器picker
2021-11-05 11:15:39微信小程序下拉选择器-普通选择器picker .wxml <view class="pick"> <picker mode="selector" range="{{array}}" value="{{index}}" bindchange="bindPickerChange"> <view>{{array[index]}}&...效果
.wxml
<view class="pick"> <picker mode="selector" range="{{array}}" value="{{index}}" bindchange="bindPickerChange"> <view>{{array[index]}}</view> </picker> </view>
.js
data: { array:['1','2','3','4'], index:0 }, bindPickerChange:function(e){ console.log('picker发送选择改变,携带值为', e.detail.value) this.setData({ index: e.detail.value }) },
-
微信小程序实现单列下拉菜单效果
2020-12-29 15:16:52接下来我想做的是一个下拉菜单用来分类的,但是在网上搜了一下,基本上全都是比较复杂的分类菜单,...--选择框--> <!--条件选择--> <view bindtap=opens data-item=1 class=chioce-item hover-class= -
微信小程序中的上拉、下拉菜单功能
2020-11-21 14:40:12上下拉菜单在微信小程序中起提示、选项的功能,当点击它时会弹出属于这个菜单的相应选项。使用vant组件库,将 dist 文件提前下载好然后保存到项目中。在小程序中调用组件库,并在正确引用就可以实现了菜单功能了。 ... -
微信小程序select下拉框实现
2020-10-16 01:04:22主要介绍了微信小程序select下拉框实现源码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 -
微信小程序下拉选项框
2019-02-18 11:55:06效果图 test.js /** * 页面的初始数据 */ data: { shows: false, //控制下拉列表的显示隐藏,false隐藏、true显示 selectDatas: ['消费... indexs: 0, //选择的下拉列 表下标, }, // 点击下拉显示框 s...效果图
test.js/** * 页面的初始数据 */ data: { shows: false, //控制下拉列表的显示隐藏,false隐藏、true显示 selectDatas: ['消费账户', '平台返利账户', '微信钱包'], //下拉列表的数据 indexs: 0, //选择的下拉列 表下标, }, // 点击下拉显示框 selectTaps() { this.setData({ shows: !this.data.shows, }); }, // 点击下拉列表 optionTaps(e) { let Indexs = e.currentTarget.dataset.index; //获取点击的下拉列表的下标 console.log(Indexs) this.setData({ indexs: Indexs, shows: !this.data.shows }); },
test.wxml
<view class='fenlei'> <text>地址</text> <!-- 下拉框 --> <view class='select_box'> <view class='select' catchtap='selectTaps'> <text class='select_text'>{{selectDatas[indexs]}}</text> <!-- <image class='words_img' src='../../images/sanjiao.png'></image> --> <image class='select_img {{shows&&"select_img_rotate"}}' src='../../images/sanjiao.png'></image> </view> <view class='option_box' style='height:{{shows?(selectDatas.length>5?300:selectDatas.length*60):0}}rpx;'> <text class='option' style='{{indexs==selectDatas.length-1&&"border:0;"}}' wx:for='{{selectDatas}}' wx:key='this' data-index='{{index}}' catchtap='optionTaps'>{{item}}</text> </view> </view> </view>
test.wxss
/* fenlei */ .fenlei{ margin: 0 25rpx; height: 90rpx; line-height: 90rpx; border-bottom: 1rpx solid #e6e6e6; display: flex; align-items: center; } .fenlei text{ font-size: 30rpx; color: #999999; margin-left: 15rpx; } /* 下拉框 */ .select_box { background: #fff; width: 620rpx; /* margin: 0 auto; */ height: 90rpx; line-height: 90rpx; text-align: left; position: relative; } .select { box-sizing: border-box; width: 100%; height: 86rpx; /* border: 1px solid #efefef; */ border-radius: 8rpx; display: flex; align-items: center; padding: 0 20rpx; } .select_text { font-size: 28rpx; flex: 1; color: rgb(102, 102, 102); line-height: 86rpx; height: 86rpx; } .select_img { width: 40rpx; height: 40rpx; display: block; transition: transform 0.3s; } .select_img_rotate { transform: rotate(180deg); } .option_box { position: absolute; top: 86rpx; width: 100%; /* border: 1px solid #efefef; */ box-sizing: border-box; height: 0; overflow-y: auto; border-top: 0; background: #fff; transition: height 0.3s; z-index: 100; } .option { display: block; line-height: 40rpx; font-size: 28rpx; border-bottom: 1px solid #efefef; padding: 10rpx; color: rgb(102, 102, 102); }
-
微信小程序实现顶部下拉菜单栏
2020-12-09 23:43:48本文实例为大家分享了微信小程序实现下拉菜单栏的具体代码,供大家参考,具体内容如下 js代码 var cityData = require('../../utils/city.js'); Page({ data: { //选择的终点城市暂存数据 endselect: "", //... -
微信小程序自定义select下拉选项框
2021-10-26 15:43:56} select.js Component({ /** * 组件的属性列表 */ properties: { propArray: { type: Array, } }, /** * 组件的初始数据 */ data: { selectShow: false, //初始option不显示 nowText: "请选择", //初始内容 ... -
自定义微信小程序下拉选择框组件
2018-09-21 21:54:45自定义微信小程序下拉选择框组件如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能... -
微信小程序实现下拉菜单切换效果
2021-01-03 08:06:59本文实例为大家分享了微信小程序实现下拉菜单切换展示的具体代码,供大家参考,具体内容如下 效果图: wxml: <!-- 下拉菜单 --> ... -
微信小程序实现多选功能
2020-10-17 19:02:35主要为大家详细介绍了微信小程序实现多选功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
微信小程序实现下拉选择及手动输入查询
2022-02-10 08:23:39实现效果如图: 实现关键:picker-view 点击查看实现代码 -
微信小程序选择下拉框组件
2021-01-27 10:16:56微信小程序 select 下拉框组件 效果图 由于录屏图片质量不好,所以效果图你会看到有残影(捂脸) -
微信小程序下拉框选择
2021-04-16 19:11:31wxml代码 <view class='top-selected' bindtap='bindShowMsg'>...-- 下拉需要显示的列表 --> <view class="select_box" wx:if="{{select}}"> <view wx:for="{{grades}}" wx:key="unique"> <vi -
微信小程序——实现下拉框
2022-04-11 22:55:131.wxml 商品金额 ¥99.00 {{tihuoWay}} {select}}"> 重庆分店 东莞南城分店 东莞总店 上海分店 北京分店 成都分店 河南分店 2.js data: { select: false, tihuoWay: '选择类型' }, bindShowMsg() { this.setData({ ... -
微信小程序下拉框搜索功能的实现方法
2020-10-16 15:09:41主要介绍了微信小程序下拉框搜索功能的实现方法,内容比较简单容易理解 ,需要的朋友可以参考下 -
微信小程序下拉框选项框组件—点击自定义输入,弹出输入框获取值实例
2021-09-23 10:24:28① 选择自定义输入 ② 弹出输入框进行输入 ③ 输入完后自动selected ④ 再点击下拉框值还在,也还可以自定义输入 上代码 wxml代码 <view class="datum-item clearfix"> <... -
微信小程序之自定义select下拉选项框组件
2021-11-29 16:01:081index.wxml <view class='com-selectBox'> <view class='com-sContent' bindtap='selectToggle'> <view class='com-sTxt'>{{nowText}}</view> <image src='../../public/img/local... -
uniapp 仿微信的右边下拉选择弹出框的实现代码
2020-10-15 03:43:15主要介绍了uniapp 仿微信的右边下拉选择弹出框的实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 -
微信小程序的选择框和<checkbox>
2022-05-08 13:50:03<!--pages/test/test.wxml--> <view class="container"> <checkbox-group> <checkbox value="apple" checked />苹果 <checkbox value="banana" disabled />.../check -
微信小程序之自定义下拉列表框(新)
2022-05-10 16:59:38下拉列表中的值选中后,关闭列表,再打开,值可记忆,并显示相应的选中样式 .wxml <!--pages/component/custom-drop-down/index.wxml--> <view class="drop-container"> <view class="drop-main...
收藏数
7,427
精华内容
2,970