微信小程序下拉框选择

wxml代码

<view class='top-selected' bindtap='bindShowMsg'><text>{{grade_name}}</text>
</view>
<!-- 下拉需要显示的列表 -->
<view class="select_box" wx:if="{{select}}"><view wx:for="{{grades}}" wx:key="unique"><view class="select_one" bindtap="mySelect" data-name="{{item}}">{{item}}</view></view>
</view>

js代码

Page({data: {select:false,grade_name:'--请选择--',grades: ['北京市','深圳市','上海市','广州市',]},bindShowMsg() {this.setData({select: !this.data.select})},/*** 已选下拉框*/mySelect(e) {console.log(e)var name = e.currentTarget.dataset.namethis.setData({grade_name: name,select: false})},  })

wxss代码

/* 顶部 */
.top{width: 400rpx ;height: 80rpx;padding: 0 20rpx;border: 1px solid;line-height: 80rpx;font-size: 34rpx;border-bottom: 1px solid #000;}/* 下拉框 */.top-selected{width: 100px;border: 1px solid #ccc;padding: 0 10rpx;}/* 下拉内容 */.select_box {background-color: #fff;width: 100px;position: relative;right: 0;z-index: 1;text-align: left;font-size: 30rpx;}.select_one {padding-left: 20rpx;width: 100%;height: 60rpx;position: relative;line-height: 60rpx;border: 1px solid #ccc;}

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

微信小程序下拉框插件_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等一.省市三级联动使用注意mode = ...
下拉多选框微信小程序_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等一.省市三级联动使用注意mode = ...
下拉多选框微信小程序_微信小程序下拉框功能的实例代码
微信小程序组件里没有下拉框,正好要用到,记下来以后参考 wxml代码选择接收班级 {{grade_name}} {{item}} wxss代码 /* 顶部 */ .top{ width: 100vw ...
下拉多选框微信小程序_微信小程序下拉框组件使用方法
这篇文章主要为大家详细介绍了微信小程序下拉框组件的使用方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正.[推荐教程:小程序开发教程] 适用场景 ...
mpvue微信小程序下拉框搜索组件
初始下拉选择如(图一) 最终效果如(图二) 思路左边是输入框,可以进行模糊查询,右边图标进行选择(简单就是根据input输入值进行过滤) 具体代码 <template><div c ...
微信小程序下拉框组件使用
适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等一.省市三级联动使用注意mode = region,以及value = "一维数组" //.w ...
微信小程序下拉框插件_微信小程序自定义select下拉选项框组件的实现代码_清玖_前端开发者...
知识点:组件,animation,获取当前点击元素的索引与内容微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件, ...
微信小程序下拉框弹出菜单，select选择器_picker标签
效果: <view class="weui-cell weui-cell_input"><view class="weui-cell__hd" ...
微信小程序下拉框选项框组件—点击自定义输入，弹出输入框获取值实例
功能说明 ① 选择自定义输入 ② 弹出输入框进行输入 ③ 输入完后自动selected ④ 再点击下拉框值还在,也还可以自定义输入上代码 wxml代码 <view class="da ...

微信小程序下拉框选择

wxml代码

js代码

wxss代码

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

最新文章

热门文章