微信小程序picker组件下拉框选择input输入框的实例


Posted in Javascript onSeptember 20, 2017

微信小程序picker组件下拉框选择input输入框的实例

实现效果图:

微信小程序picker组件下拉框选择input输入框的实例

页面

<view class="row-wrap">
     <view class="label">预约项目</view>
     <picker bindchange="bindCasPickerChange" value="{{casIndex1}}" range="{{casArray}}">
      <view>
       <text>{{casArray[casIndex]}}</text>
      </view>

     </picker>
    </view>

   </view>
<view class="section {{reply?'on':'off'}}">
    <input name="other" placeholder="请输入所预约项目" type="text"/>
  </view>

js

data: {
  nickName: "",
  avatarUrl: "",
  casArray: ['双眼皮', 'TBM', '隆胸', '减肥', '手动输入'],
  userName: '',
  mobile: '',
  Gender: 'female',
  casIndex: 0,
 },

 /**
 * 生命周期函数--监听页面加载
  */

 bindCasPickerChange: function (e) {
  console.log('乔丹选的是', this.data.casArray[e.detail.value])
  if (e.detail.value == 4) {
   this.setData({ reply: true })
  } else {
   this.setData({ reply: false })
  }
  this.setData({
   casIndex: e.detail.value
  })

 },

添加input框的样式

.section{
   font-size:28rpx;
   margin-left: 50rpx;
   margin-top: 30rpx;
  }
  .on{display: block}
  .off{display: none}

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript模拟实现C# String.format函数功能代码
Nov 25 Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
js跨域问题浅析及解决方法优缺点对比
Nov 08 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
Dec 05 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
Apr 06 Javascript
JavaScript与jQuery实现的闪烁输入效果
Feb 18 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
Dec 21 Javascript
微信小程序 页面跳转传值实现代码
Jul 27 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
Jan 05 Javascript
Node.Js中实现端口重用原理详解
May 03 Javascript
vue-router的钩子函数用法实例分析
Oct 26 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 #jQuery
微信小程序授权获取用户详细信息openid的实例详解
Sep 20 #Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 #jQuery
Vue-cli创建项目从单页面到多页面的方法
Sep 20 #Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
Sep 20 #Javascript
vue学习笔记之v-if和v-show的区别
Sep 20 #Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 #jQuery
You might like
php+mysql实现用户注册登陆的方法
2015/01/03 PHP
一张表搞清楚php is_null、empty、isset的区别
2015/07/07 PHP
php文件扩展名判断及获取文件扩展名的N种方法
2015/09/12 PHP
关于WordPress的SEO优化相关的一些PHP页面脚本技巧
2015/12/10 PHP
PHP图像识别技术原理与实现
2016/10/27 PHP
thinkphp修改配置进入默认首页的方法
2017/02/07 PHP
input、button的不同type值在ajax提交表单时导致的陷阱
2009/02/24 Javascript
JavaScript计算两个日期时间段内日期的方法
2015/03/16 Javascript
JQuery鼠标移到小图显示大图效果的方法
2015/06/10 Javascript
js利用appendChild对标签进行排序的实现方法
2016/10/16 Javascript
Vue.js实现简单ToDoList 前期准备(一)
2016/12/01 Javascript
老生常谈js-react组件生命周期
2017/05/02 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
node 标准输入流和输出流代码实例
2019/09/19 Javascript
countup.js实现数字动态叠加效果
2019/10/17 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
[26:50]2018完美盛典DOTA2表演赛
2018/12/17 DOTA
[06:07]DOTA2-DPC中国联赛 正赛 Ehome vs VG 选手采访
2021/03/11 DOTA
Python解释执行原理分析
2014/08/22 Python
Django中URL视图函数的一些高级概念介绍
2015/07/20 Python
点球小游戏python脚本
2018/05/22 Python
python实现身份证实名认证的方法实例
2019/11/08 Python
python 解决flask 图片在线浏览或者直接下载的问题
2020/01/09 Python
在tensorflow下利用plt画论文中loss,acc等曲线图实例
2020/06/15 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
Django xadmin安装及使用详解
2020/10/26 Python
100%羊绒:NakedCashmere
2020/08/26 全球购物
金鑫耀Java笔试题
2014/09/06 面试题
大学生表扬信范文
2014/01/09 职场文书
婚前协议书范本
2014/04/15 职场文书
护士节活动总结
2014/08/29 职场文书
2014年民警工作总结
2014/11/25 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android
Ruby处理YAML和json数据
2022/04/18 Ruby