`

Flex 自定义List实现在切换Item前判断条件

    博客分类:
  • Flex
阅读更多

目前项目中需要在List的Item切换前根据条件决定是否切换,在网上找到这样的思路:

 

自己实现的PreList基于List,代码如下:

 


<?xml version="1.0" encoding="utf-8"?>
<mx:List xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="onComplete();">
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.events.CloseEvent;
			import mx.events.ListEvent;
			
			public var _lastIndex:Number = 0;
			
			public function onComplete():void
			 {
				 addEventListener(ListEvent.CHANGE,onChange);
				 persistLastIndex();
			 }
			
			public function persistLastIndex():void
			{
				_lastIndex = selectedIndex;
			}
			
			public function onChange(e:ListEvent):void
			{
				Alert.show("Are you sure to change the item?","Alert",Alert.OK|Alert.CANCEL,null,onAlertClicked);
			}
			
			public function onAlertClicked(e:CloseEvent):void
			{
				if(Alert.OK == e.detail)
				{
					_lastIndex = selectedIndex;
				}
				else
				{
					selectedIndex = _lastIndex;
				}
			}
			
		]]>
	</fx:Script>
	
</mx:List>

 

使用自定义的PreList:

 

 

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:my="org.puremvc.as3.*"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
	</fx:Declarations>
	<mx:VBox id="dd">
	   <my:PreList>
		   <my:dataProvider>
			   <fx:Array>
				   <fx:Object data="1" label="Value 1" />
				   <fx:Object data="2" label="Value 2" />
			   </fx:Array>
		   </my:dataProvider>
	   </my:PreList>
	</mx:VBox>	
	
</s:Application>
 
分享到:
评论

相关推荐

    自定义小程序的tabbar组件,利用templdates实现

    在微信小程序开发中,自定义tabBar是提升用户体验和满足个性化设计的重要手段。小程序默认的tabBar样式有限,无法充分满足复杂多样的设计需求。此时,开发者可以通过自定义tabBar组件来实现更灵活的定制。本文将深入...

    小程序自定义tabbar

    在微信小程序中,开发者有时需要根据自己的应用设计和交互需求,对系统默认的tabbar进行自定义,以提供更个性化的用户体验。标题“小程序自定义tabbar”所指的就是这个过程,即通过编写HTML和JavaScript代码,来创建...

    自定义微信底部导航栏,示例代码

    在微信小程序开发中,自定义底部导航栏是提升用户体验和个性化设计的重要环节。本文将深入讲解如何实现这一功能,提供示例代码,并介绍相关知识点。 首先,了解微信小程序的底部导航栏(tabBar)默认样式和配置。...

    微信小程序自定义tabBar,中间圆形凸起

    在微信小程序开发中,自定义`tabBar`是提升用户界面体验的重要环节。原生的微信小程序`tabBar`虽然提供了基本的样式和功能,但往往无法满足开发者对个性化设计的需求。本文将深入探讨如何实现一个中间圆形凸起的...

    微信小程序自定义标签栏(TabBar) 组件.zip

    在微信小程序开发中,自定义标签栏(TabBar)组件是一项关键功能,它为用户提供了一种直观、便捷的导航方式,使用户能够轻松地在不同的页面间切换。本教程将深入探讨如何在微信小程序中创建并自定义TabBar组件,以...

    html css 仿微信底部自定义菜单

    在构建Web应用时,尤其是针对移动端,为用户提供良好的交互体验至关重要。微信作为一款广泛使用的社交应用,其底部自定义菜单的设计被许多开发者所借鉴。本文将深入探讨如何使用HTML和CSS来实现类似微信底部自定义...

    微信小程序自定义tabbar

    在微信小程序中,`tabBar`是底部导航栏,用于展示核心功能模块,用户可以通过它轻松切换不同的页面。自定义`tabBar`可以让开发者根据自己的需求和设计风格来调整其外观和行为,提升用户体验。 ### 1. 微信小程序 ...

    微信小程序自定义tabbar中间突起样式

    本文将深入探讨如何在微信小程序中自定义`tabbar`,特别是实现中间突起的样式。 1. **自定义tabbar的基本步骤** 在微信小程序中,我们可以通过以下步骤来创建自定义的`tabbar`: - 首先,在`app.json`文件中配置...

    原生JS实现京东同款轮播图

    在本文中,我们将深入探讨如何使用原生JavaScript(JS)来实现京东同款的轮播图效果。轮播图是网页设计中常见的元素,用于展示多张图片或内容,通过自动切换或者用户交互来实现动态浏览。京东的轮播图通常具有平滑...

    js原生实现轮播图无限轮播手势轮播

    在JavaScript的世界里,轮播图(Carousel)是一种常见的网页组件,用于展示一组可滑动的图片或内容...在实现过程中,可以参考现有的开源轮播库,如Swiper.js,它们已经解决了许多常见问题,可以作为学习和借鉴的资源。

    用tabbar实现首页、消息页、联系页, 其中首页包括轮播图、九宫格、图片三区域, 有导航栏的相关配置

    总结,这个项目主要是利用微信小程序的特性,通过 TabBar 实现首页、消息页和联系页的切换,首页中包括轮播图、九宫格和图片展示,同时对导航栏进行了自定义配置,以提供用户友好的界面和流畅的导航体验。...

    带箭头左右轮播效果网页特效

    在网页设计领域,轮播效果是一种常见的展示方式,它能够以有限的空间展示多个内容,比如图片、文字或者...在实际应用中,开发者可以利用现成的库如Bootstrap的Carousel组件或Swiper等,也可以根据项目需求自定义实现。

    js tab栏切换代码实例解析

    在JavaScript中,Tab栏切换是一种常见的用户界面交互设计,它允许用户在多个视图或内容之间切换,而无需重新加载整个页面。这个实例主要讲解如何使用JavaScript实现这种功能。我们将探讨以下几个关键知识点: 1. **...

    CSS Accordion

    `accordion-item`通常设置为垂直堆叠,使用`display: flex`和`flex-direction: column`。 2. **隐藏内容**:默认情况下,所有`accordion-content`应该被隐藏,可以使用`display: none`实现。当对应的`accordion-...

    用swiper-slide模仿微信小程序之scroll-view

    3. **滑动配置**:在Swiper组件的属性中,我们可以设置`circular`为`true`来实现循环滚动,`autoplay`和`interval`可以控制是否自动播放以及切换间隔时间。此外,还可以通过`indicator-dots`来显示指示点。 4. **...

    javascript 不规则TAB选项卡效果

    在实现不规则TAB选项卡效果时,JavaScript扮演了关键角色,它提供了动态切换内容、添加交互性以及自定义动画等功能。下面我们将详细探讨如何使用JavaScript来创建这种效果: 1. **基础HTML结构**:首先,我们需要...

    Vue使用vue-draggable 插件在不同列表之间拖拽功能

    `vue-draggable`是基于Sortable.js封装的Vue组件,它允许我们在Vue应用中实现拖放功能,支持Vue 2.x。 首先,你需要通过npm安装`vue-draggable`库: ```bash npm install vuedraggable ``` 然后在你的组件中导入...

    portfolio:使用HTML,CSS和Vanilla JS制作的个人作品集网站

    在这个作品集中,可能还会包括自定义的CSS样式或JavaScript文件的引入。 接着,`&lt;body&gt;`标签内包含所有用户可见的内容。例如,可以使用`&lt;h1&gt;`至`&lt;h6&gt;`标签为每个作品设定标题,`&lt;p&gt;`标签添加描述,`&lt;img&gt;`标签插入...

Global site tag (gtag.js) - Google Analytics