使用ivx实现移动端单选功能的经验总结

单选选择器是各种案例中都经常会使用到一种功能,今天就对ivx中实现单选择器的方法进行一个汇总,希望对大家有所帮助。

1.下拉菜单
第一种方法是添加一个下拉菜单组件,它位于拓展组件的交互与表单类中。添加之后在选项列表中输入选项并用英文逗号隔开(数据绑定的话可以绑定一个一维数组)。


或者选中下拉菜单,打开自定义选项,再点击拓展组件添加下拉菜单选项,定义好每个下拉菜单选项的内容。

最后给下拉菜单添加事件,当我们选择一个选项后下拉菜单会反回给我们一个参数就是它当前的选中值。

2.手机单项选择器
第二种方法就是使用手机单项选择器组件。手机单项选择器也是拓展组件的一种,位于拓展组件中选择器类。

跟下拉菜单类似,我们可以在选项列表输入选项并用逗号隔开,或者数据绑定一个一维数组。

要注意的是本身单项选择器是不显示的,其初始状态为隐藏。这里我们给文本组件添加了一个事件,点击文本组件使选择器显示。

当选择器选中一个选项时,单项选择器会返回一个参数——当前选中值,我们就可以将该值赋给我们设定好的变量。

3.循环创建
第三种就是使用循环创建,循环创建需要数组来作为数据来源,我们先将数据写入一维数组之中,然后进行数据绑定。至此就可以把选项都创建出来,效果如图。

接下来我们给for容器下的文本组件添加一个事件,当点击文本的时候将当前文本的数据赋值给我们设定好的一个文本变量——“选中的内容”。这样,每一时刻循环创建下的选项都只有一个选项和“选中的内容”是相同的。(如果你没设置两个或两个以上的选项名称完全相同的话,应该不会这么无聊吧)

最后就是使选中选项的显示效果能与其它选项区别开来。这里使用了三元表达式,当前数据就是每个文本组件显示的11,22,33等等,“选中的内容”是11,22,33等选项中的一个,即我们之前点击的那个文本组件的当前数据1。每个文本组件会判断自己的当前数据1与“选中的内容”是否相等,相等则背景颜色显示蓝色#5FA2DD,文字颜色显示#FFFFFF,不相等则背景颜色显示空,即透明,字体颜色显示灰色#999999。

总结
这三种就是移动端最常用到的单项选择功能的实现方法了,欢迎大家继续补充。关于单项选择,最主要的就是能够展示列表,并且获取用户选择了哪个选项然后将其返回,只要能满足这个就可以认为它实现了单项选择功能。

原文地址:https://blog.51cto.com/14556317/2481404

时间: 2024-11-09 04:48:22

使用ivx实现移动端单选功能的经验总结的相关文章

使用ivx实现图片预览功能的经验总结

在实际案例中经常会需要展示一个图片列表,但是列表中由于图片数量比较多,所以每张图片都会比较小.这时我们需要一个功能,能够点击某一张图片就显示这张图片的大图,今天就是说一下ivx中如何实现这种预览效果. 1.图片列表demo中的图片列表是用循环组件创建的,图片资源已经存放在对象数组里,for容器下的图片组件已经绑定了当前数据中的图片资源.父容器是一个行并且开启了自动换行,每行显示两张图片.2.小图与大图上面循环创建出来的就是小图,我们还需要用一个大的图片组件来显示我们点击后的大图.这里使用了一个横

关于ivx中通用变量排序功能的经验总结

在ivx中通用变量是经常使用到的一种变量,而且它的元素类型可以为数组,因此也常用作循环创建的数据来源,当我们要对循环创建出来的列表进行排序时,操作上其实就是对通用变量内部元素的一个排序,今天就说一下这种排序的具体操作. 我们以这个通用变量为例,通用变量内包含一个元素employees,这个元素的属性是一个数组,每个数组元素包含两个子元素,number和lastName.为了便于观察,我们将通用变量的元素employees数组作为数据来源进行循环创建,循环创建中的文本绑定当前数据的number和l

自定义GrildView实现单选功能

首先看实现功能截图,这是一个自定义Dialog,并且里面内容由GrildView 绑定数据源,实现类似单选功能. 首先自定义Dialog,绑定数据源 自定义Dialog弹出框大小方法 最主要实现的就是点击颜色切换的功能,默认GrildView的每一项都是蓝色背景,当点击时候切换成红色.这里缓存了一个view,每次点击给这个view重新赋值,改变颜色 数据源Adapter代码: public class ZheKouAdapter extends BaseAdapter { private Con

[Asp.net 开发系列之SignalR篇]专题二:使用SignalR实现酷炫端对端聊天功能

一.引言 在前一篇文章已经详细介绍了SignalR了,并且简单介绍它在Asp.net MVC 和WPF中的应用.在上篇博文介绍的都是群发消息的实现,然而,对于SignalR是为了实时聊天而生的,自然少了不像QQ一样的端对端的聊天了.本篇博文将介绍如何使用SignalR来实现类似QQ聊天的功能. 二.使用SignalR实现端对端聊天的思路 在介绍具体实现之前,我先来介绍了使用SignalR实现端对端聊天的思路.相信大家在前篇文章已经看到过Clients.All.sendMessage(name,

checbox复选框实现radio单选框的单选功能

checbox复选框实现radio单选框的单选功能:大家知道复选框可以一次选中多个,单选按钮每次只能够选中其中的一个,但是单选按钮比较霸道,你选中以后,只能够且必须选中其中一个,所有下面就通过checkbox复选框模拟实现单选按钮的功能,但是能够取消选中的项.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author"

T端多功能魔兽NPC脚本-Tools Npc脚本代码

已经有很多的功能性的NPC的Trinity-Core魔兽世界私服单机 的脚本代码.这里我在弄一个可能大家都会比较喜欢的NPC脚本代码1.适用于怀旧魔兽私服Trinity-Core 3.3.5版本最新2.此脚本是npc 的C++脚本,脚本名称要加到creature_template对应的NPC的脚本处3.你需要知道如何在T端中增加对应的脚本功能4.下面是一些该脚本的功能描述 NPC 功能包含: ? 恢复血量和法力值 ? 重置所有的副本进度 ? 重置所有的技能冷却时间 ? 重置战斗状态 ? 移除虚弱

C# winform项目中ListView控件使用CheckBoxes属性实现单选功能

在做项目时需要使用ListView控件的CheckBoxes属性显示,还要在点击行时自动选中CheckBoxes和点击选中CheckBoxes时自动显示正行选中状态的单选功能. 效果图: 主要利用两个事件:listView1_ItemCheck和listView1_SelectedIndexChanged事件. 上代码: [csharp] view plain copy print? private void listView1_ItemCheck(object sender, ItemChec

Vue.js与 ASP.NET Core 服务端渲染功能整合

http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/ 原作者:Mihály Gy?ngy?si 译者:oopsguy.com 我真的很喜欢在前端使用 Vue.js,Vue 服务端渲染直到第二个版本才被支持. 在本例中,我想展示如何将 Vue.js  服务端渲染功能整合 ASP.NET Core. 我们在服务端使用了 Microsoft.AspNetCore.SpaServices 包,该包提供 ASP.N

微信点餐系统(十)-卖家端通用功能和上下架

章节感悟 1.使用freemarke的包含语句 2.复制的代码需要仔细检查才能使用 卖家端通用功能和上下架 1.实现边栏(通用界面公用) 1)将给好的边栏放入项目中,并且响应css一起放入项目 2)在之前的订单list页面引入边栏,使用freemarke的语法 3)提取出所有ftl文件的公共头部分 4)修改bootstrap版本为3.3.5,于是被分为三个部分的页面,这里其实可以把分页提取出来,但是视频没有说,我这里就不写了 5)对详情页进行同样的操作 2.实现商品列表 1)新建SellerPr