微信小程序本身并没有自带的下拉框组件，我们可以通过view标签自定义一个下拉框。(仅供参考）

文件目录

文件的功能：
xxx.js：决定用户操作和界面的交互；
xxxw.wxml：决定界面有什么内容；
xxx.wxss：决定内容长什么样子。

实现效果

实现逻辑

设置数据

在js文件设置下拉框的数据：是否隐藏（默认隐藏），默认选项，可选值；

data:{//test对象数据test:{//默认为隐藏hidden:true,//默认值为adefault:"a",//可选值为:"a","b","c"txt:["a","b","c"]}}

设置默认选项

在wxml中设置选项的默认值：test中的default。
用{{}}引用js的数据

<view class="select" bindtap="showSelect" id="{{index}}">
{{test.default}}
</view>

实现弹出下拉框

当下拉框为隐藏时，点击默认值，使下拉框的hidden属性为false，显示出下拉框；
当下拉框显示时，点击默认值，使下拉框的hidden属性为true，显收回下拉框；
即每次点击变更下拉框的hidden属性，用bindtap捕捉点击动作，在js文件编写对应函数。

 //展示或隐藏选项showSelect:function(e){//获取当前数据var data= this.data.test;console.log("打开区域下拉框")//变更hidden属性data["hidden"]=!data.hidden;//执行变更this.setData({test:data})},

提供选项值

下拉框展示出来，所在的view应该拥有对应的选项值供选择。
在wxml文件中，遍历test中的txt值。

wx:for:用于单纯的数组循环
wx:for-item:定义循环中访问子元素的属性名
data-index:获取数据索引值

 <view wx:for="{{test.txt}}" wx:for-item="test_item" data-index="{{index}}"  wx:for-index="index">{{test_item}}</view>

设置所选值

当用户点击下拉框中的选项时，将选中的值设置为当前值

//设置选项的值SelectVal:function(e){// 获取到点击的列表下标，因为是在下拉的父元素点击，所以获取到menus下标var index= e.target.dataset.index;var data =this.data.test;//获取选中的选项的值var test_name = data.txt[index];console.log("选择了选项:"+test_name);//设置区域默认值和隐藏data["default"]=test_name;data["hidden"]=!data.hidden;this.setData({test:data})},

源码

wxml

<!--pages/index/test.wxml-->
<view class="top"><view class="select" bindtap="showSelect" id="{{index}}">{{test.default}}</view>
<view class="top"><view class="option" hidden="{{test.hidden}}" bindtap="SelectVal" ><view wx:for="{{test.txt}}" wx:for-item="test_item" data-index="{{index}}"  wx:for-index="index">{{test_item}}</view></view>
</view>
</view>

wxss

.top{
display: flex;
align-items: center;
justify-content: center;
border: 2rpx solid #ffffff;
}
.select{
width:100%;
font-size:23px;
display: flex;
align-items: center;
justify-content: center;
background-color: #686767;
}
.option{
position:absolute;
top:62rpx;
width:100%;
font-size:20px;
background-color:#ffffff;
}

js

//展示或隐藏选项showSelect:function(e){//获取当前数据var data= this.data.test;console.log("打开区域下拉框")//变更hidden属性data["hidden"]=!data.hidden;//执行变更this.setData({test:data})},//设置选项的值SelectVal:function(e){// 获取到点击的列表下标，因为是在下拉的父元素点击，所以获取到menus下标var index= e.target.dataset.index;var data =this.data.test;//获取选中的选项的值var test_name = data.txt[index];console.log("选择了选项:"+test_name);//设置区域默认值和隐藏data["default"]=test_name;data["hidden"]=!data.hidden;this.setData({test:data})}

微信小程序——自定义下拉框相关推荐

vue uniapp 微信小程序搜索下拉框模糊搜索
vue uniapp 微信小程序搜索下拉框模糊搜索话不多说直接贴代码 template <template><view class="index"> ...
微信小程序 select 下拉框组件
一.源码地址 GitHub - imxiaoer/WeChatMiniSelect: 微信小程序 select 下拉框组件二.效果图录屏图片质量较差,所以大家会看到残影(捂脸) 三.组件源码 1. ...
微信小程序搜索下拉框排名原理及使用方法「干货」
自从2017年1月份微信推出小程序以来,小程序的火热程度大家是有目共睹的,从一开始的精确搜索,到后面的模糊搜索,小程序的更新速度远远超过了外界的期待!虽然小程序目前已经有五十几个入口,但是关键词搜索这 ...
php 类似微信下拉菜单,微信小程序实现下拉框（附代码）
微信小程序里没有和HTML里的下拉框一样的组件,想要相同的效果只能自己写一个,先看效果下面来看一下代码: 首先WXML {{selectData[index]}} {{item}} 然后WXSS(如 ...
微信小程序实现下拉框功能
微信小程序里没有和HTML里的下拉框一样的组件,想要相同的效果只能自己写一个,先看效果下面来看一下代码: 首先WXML <view class='select_box'><view ...
ios微信小程序下拉刷新怎么配_[wx]微信小程序自定义下拉刷新
需求: 在小程序内存在列表等形式的页面内增加下拉刷新功能,提高用户体验感,加强界面操作与交互性: 实现方法: 1.小程序提供的下拉刷新(无法自定义刷新动画) 在页面设置内开启下拉(单独页面设置): { ...
微信小程序自定义下拉选择框与分页加载--自用【随笔】
效果图展示下拉加载上拉加载编码实现 wxml  <view><vie ...
微信小程序自定义授权弹框
微信小程序自定义授权弹框最近微信获取用户信息的接口有调整,就是这货:wx.getUserInfo(OBJECT),文档描述如下: 此接口有调整,使用该接口将不再出现授权弹窗,请使用 <butt ...
php 类似微信下拉菜单,微信小程序模拟下拉菜单开发实例
本文主要和大家分享微信小程序模拟下拉菜单开发实例,希望能帮助到大家. 一.知识点 1.实现动态显示和隐藏某个控件列表1data:{ open:false }, showitem:function() ...

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

目录