微信小程序开发之picker

一、绑定简单数组

通过bindChange控制index,使得当前选择值发生改变

示例1

data: {
        Data: ['A','B'],
        Index: 0,
    },

<picker class="picker" bindchange="bindChange" value="{{Index}}"  range="{{Data}}">
    <view >
      当前选择:{{Data[Index]}}
    </view>
</picker>

 二、绑定多维数组

通过bindChange控制index,使得当前选择值发生改变,value是真正想得到值,选择后通过index可获取并设置,name只是想显示的值,这里的id其实是index值。

这个方法经常会用到,因为我们要的实体id不会是顺序的012345...

示例2

data: {
        Data: [{id:0,value:'a',name:'A' },{id:1,value:'b',name:'B' }],
        Index: 0,      currentId
    },

<picker class="picker" bindchange="bindChange" value="{{Index}}"  range="{{Data}}" range-key="name">
    <view >
      当前选择:{{Data[Index].name}}
    </view>
</picker>

 

欢迎阅读本系列文章:微信小程序开发教程目录

 

时间: 2024-10-24 05:24:30

微信小程序开发之picker的相关文章

微信小程序开发之scroll-view

本文主要介绍通过scroll-view实现回至顶部,如下效果 一.页面代码 顶部的工具栏放一个查找按钮,滚动区域实现分页,目的就是为了点击上一页\下一页时,自动回到顶部. scroll-view必须指定scroll-y属性和该区域的高度 <view class="page"> <view class="swiper-tab border-top"> <view> <text class='text-primary'>查

微信小程序开发文档官方版发布

微信公众平台团队喜欢在深夜给人惊喜,这不,微信小程序开发文档昨晚23点半发出了,很多开发者表示要兴奋得睡不着了.和ytkah一起看看小程序文档吧!小程序文档包含:小程序简易教程.小程序框架.小程序组件.小程序API.小程序工具.Q&A 您不会错过这些内容:微信小程序设计指南官方版放出 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果.这个小程序的首页将会显示欢迎语以及当前用户的微信头像,点击头像,可以在新开的页面中查看当前小程序的启动日志.下载源码1. 获取微信小程

微信小程序开发教程目录

本系列教程是自己在工作中使用到而记录的,没有顺序之分 如有错误之处,请给与指正,也不希望误导了别人 微信小程序开发教程目录 微信小程序之注册和入门 微信小程序之HTTPS请求 微信小程序开发之选项卡 微信小程序开发之picker 微信小程序开发之图片预览 微信小程序开发之模板 微信小程序开发之模板消息 微信小程序之页面路由 微信小程序开发之scroll-view 微信小程序开发之常见BUG 微信小程序之使用本地接口开发 微信小程序开发之普通链接二维码  

微信小程序下载工具及调试详解_相关技巧

昨天晚些时候微信团队发布了微信小程序开发者工具.微信小程序开发文档和微信小程序设计指南,全新的开发者工具,集成了开发调试.代码编辑及程序发布等功能,帮助开发者简单和高效地开发微信小程序.以下是官方文档,内含小程序开发者工具下载地址及调试指南. 下载地址:开发者工具0.9.092300版 windows 64版:windows 32版:mac版 为了帮助开发者简单和高效地开发微信小程序,我们推出了全新的开发者工具,集成了开发调试.代码编辑及程序发布等功能. devtools 扫码登录 启动工具时,

使用TypeScript开发微信小程序的方法_C#教程

TypeScript简介: TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程.安德斯·海尔斯伯格,C#的首席架构师,已工作于TypeScript的开发. TypeScript扩展了JavaScript的语法,所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作.TypeScript是为大型应用之开发而设计,而编译时它产生 JavaScript 以确保兼容性.

微信小程序应用号开发教程!博卡君通宵吐血赶稿

微信应用号(微信公众平台小程序,「应用号」的新称呼)终于来了!开源中国社区的博卡君通宵吐血赶稿写出的微信公众平台应用号开发教程!大家赶紧来学习一下吧 对了,昨天晚间微信小程序开发文档官方版发布了 微信公众平台小程序目前还处于内测阶段,微信只邀请了部分企业参与封测.想必大家都关心应用号的最终形态到底是什么样子?怎样将一个「服务号」改造成为「小程序」? 我们暂时以一款简单的第三方工具的实例,来演示一下开发过程吧.(公司的项目保密还不能分享代码和截图.博卡君是边加班边偷偷给大家写教程.感谢「名片盒」团

微信小程序把玩(十八)picker组件

原文:微信小程序把玩(十八)picker组件 picker选择器分为三种,普通选择器,时间选择器, 日期选择器 用mode属性区分,默认是普通选择器.测试时时间和日期点击无反应不知道是BUG还是啥!没法手机测试现在也不知道咋回事!! 主要属性: 普通选择器 时间选择器 日期选择器 wxml <view>普通选择器</view> <!--mode默认selector range数据源value选择的index bindchange事件监听--> <picker mo

微信小程序TOP100揭晓,多数为低频APP

本文讲的是微信小程序TOP100揭晓,多数为低频APP[IT168评论]在不少的演讲论坛中都听过这样的一个概念,我们已经步入了应用经济时代,从14年底开始,大大小小的APP崛地而起,也催生了许多创业者揭竿而起的APP开发之路,仅2年的时间,作为应用时代的入口,APP就要被颠覆?这些都源于昨日正式上线的微信小程序,传闻中的APP终结者历经一年时间,终于揭开神秘面纱. 微信小程序是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打开应用.在16年12

微信小程序初体验(上)- 腾讯ISUX社交用户体验设计成员出品

微信小程序开放公测后一直很火,作为腾讯ISUX社交用户体验设计成员自然不能错过这样的好戏,下面就随ytkah一起来看看"小程序官方评测"吧,write by 腾讯ISUX练小习. 这段时间有幸加入了一个关于微信小程序的项目开发组,从无到有的根据文档自行学习了小程序的开发过程,前面已经有几位前辈的文章珠玉在前,我这里就先从前端界面的开发方面谈一谈小程序以及我所遇到的问题吧. 在结构和样式方面,小程序提供了一些常用的标签与控件,比如: view,小程序主要的布局元素,类似于html标签的d