微信小程序下拉选择框

 一般来说的话，总有点需要下拉并且能够搜索选择的需求。

首先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里面每一个isSHowsvar 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里面每一个isSHowsvar menuSrc = "meunShow[" + menuNum + "].isShows";// console.log('picker:' + this.data.openPicker);this.setData({needAnimation: true,menuNums: menuNum + 1});// 循环data中设置的meunShowfor (var n = 0; n < this.data.meunShow.length; n++) {// 拼接 ，使我们可以获取到menuShow里面每一个isSHowsvar menuSrcs = "meunShow[" + n + "].isShows";// 解决重复点击不能隐藏的问题if (n != menuNum) {// 初始化，每次点击时先全部隐藏，但是重复点击不会隐藏this.setData({[menuSrcs]: true});};};// 给当前点击的去反data中设置的meunShow，使之显示， 只写此处只会显示不能隐藏this.setData({[menuSrc]: !this.data.meunShow[e.currentTarget.dataset.hi].isShows});},})

这就是下拉选择框的全部代码了。

微信小程序下拉选择框相关推荐

小程序——下拉选择框组件
一.效果二.说明最近在开发微信小程序,但是用的lin-ui和@vant 都没有下拉选择框组件.在网上搜索一番后,发现了一个挺简单且很好用的下拉框组件. 链接在这里:https://blog.csd ...
微信小程序下拉选项框
效果图 test.js /*** 页面的初始数据*/data: {shows: false, //控制下拉列表的显示隐藏,false隐藏.true显示selectDatas: ['消费账户', '平台 ...
微信小程序下拉框插件_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等一.省市三级联动使用注意mode = ...
下拉多选框微信小程序_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等一.省市三级联动使用注意mode = ...
下拉多选框微信小程序_微信小程序下拉框功能的实例代码
微信小程序组件里没有下拉框,正好要用到,记下来以后参考 wxml代码选择接收班级 {{grade_name}} {{item}} wxss代码 /* 顶部 */ .top{ width: 100vw ...
下拉多选框微信小程序_微信小程序下拉框组件使用方法
这篇文章主要为大家详细介绍了微信小程序下拉框组件的使用方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正.[推荐教程:小程序开发教程] 适用场景 ...
html下拉刷新原理,微信小程序下拉刷新及上拉加载原理解析
这篇文章主要介绍了微信小程序下拉刷新及上拉加载实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.下拉刷新的概念及应用场景. 概念: 下拉 ...
微信小程序--下拉刷新
实现微信小程序下拉刷新步骤一 json文件配置(若需要全局配置,则在app.json 反正就配置本界面得到json即可) {"enablePullDownRefresh": tr ...
android 自定义Scrollview实现淘宝二层楼效果新版微信小程序下拉效果
android 自定义Scrollview实现淘宝二层楼效果新版微信小程序下拉效果由于最近一段时间真的是太忙了,没有顾上即使更新博客,还请粉丝们见谅,最近要实现这样一个效果,这个效果跟淘宝二层楼和新 ...

微信小程序下拉选择框

微信小程序下拉选择框相关推荐

最新文章

热门文章