微信小程序picker下拉框

<view class="main" style="margin-top:120rpx"><text>审批操作</text><view class="weui-form-preview__item title" data-index='1' catchtap='switchDetailShow'></view> <view class="weui-form-preview__hd"><view class="weui-form-preview__item"><view class="db1"><picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"><view class="weui-form-preview__label" style="font-size:24rpx;">请选择审批方式  <span style="color:black; margin-left:8rpx">{{array[index]}}</span></view></picker></view><view class="weui-form-preview__item" wx:if="{{showuIndex == 1}}"><view style="background-color:#fff;height:11rpx;"></view><view bindtap="selectUserName" class="weui-form-preview__label" style="background-color:#fafafa;">点击此处查找指定人员</view></view></view></view>
</view>

.label-1, .label-2{margin-bottom: 15px;}.label-1__text, .label-2__text {display: inline-block;vertical-align: middle;}.label-1__icon {position: relative;margin-right: 10px;display: inline-block;vertical-align: middle;width: 18px;height: 18px;background: #CAE1FF;}.label-1__icon-checked {position: absolute;top: 3px;left: 3px;width: 12px;height: 12px;background: #1f1e1e;}.label-2__icon {position: relative;display: inline-block;vertical-align: middle;margin-right: 10px;width: 18px;height: 18px;background: rgb(144, 145, 143);border-radius: 50px;}.label-2__icon-checked {position: absolute;left: 3px;top: 3px;width: 12px;height: 12px;background: #111111;border-radius: 50%;}.section__title{display: block;text-align: center;color: #9400D3;}.content{padding-bottom: 15px;}

Page({data: {statusBarHeight: getApp().globalData.statusBarHeight,navigationBarTitle: '',index: 0,showuIndex: 0,array: ['通过', '转办', '拒绝'],objectArray: [{id: 0,name: '通过 '},{id: 1,name: '转办'},{id: 2,name: '拒绝'},],},onLoad: function (options) {},bindPickerChange(e) {console.log(e.detail);console.log('picker country 发生选择改变，携带值为', e.detail.value);// console.log(this.data.approvalType[e.detail.value].typeID);var typeID = e.detail.value;//this.data.approvalType[e.detail.value].typeID;// console.log(this.data.approvalType[e.detail.value].typeName);this.setData({index: e.detail.value,});console.log("typeID is :" + typeID);if (typeID == 1) {this.setData({showuIndex: 1,});}else {this.setData({showuIndex: 0,});}},onShareAppMessage: function () {}
})

下拉框选择通过和拒绝显示如图：

选择转办：

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

小程序picker下拉框选择时间，只需要年和月
小程序picker下拉框选择时间,只需要年和月官方提供的组件可以选择到日我们现需要选择到月,只需要在代码里加上fields="month" <view class=&qu ...
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 ...
微信小程序——自定义下拉框
微信小程序本身并没有自带的下拉框组件,我们可以通过view标签自定义一个下拉框.(仅供参考) 目录文件目录实现效果实现逻辑设置数据设置默认选项实现弹出下拉框提供选项值设置所选值源码 ...
php 类似微信下拉菜单,微信小程序模拟下拉菜单开发实例
本文主要和大家分享微信小程序模拟下拉菜单开发实例,希望能帮助到大家. 一.知识点 1.实现动态显示和隐藏某个控件列表1data:{ open:false }, showitem:function() ...
微信小程序实现下拉刷新
微信小程序实现下拉刷新配置json文件在js文件中写下拉刷新方法注意配置json文件如果需要全局使用下拉刷新就在app.json中设置如果为单页面使用则在页面json设置即可 " ...
微信小程序实现下拉菜单效果
问题下拉菜单在各类网页,app或者小程序中都是比较常见的输入控件.下拉菜单的下拉选项的多少可以根据自身需求进行调节,常运用于时间范围选择,地点区域选择,价格区间选择,等等.提供下拉菜单的目的是帮助用 ...

微信小程序picker下拉框

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

最新文章

热门文章