DCloud_UNI_CHB
DCloud_UNI_CHB
  • 发布:2017-09-13 17:10
  • 更新:2017-09-13 17:10
  • 阅读:3669

NView模板绘制原生列表教程

分类:wap2app

NView模板封装了list组件,可以绘制原生列表,本文详细介绍list组件的用法。

模板结构

<list>是列表容器标签,<item>是列表项标签,列表组件的模板结构如下:

<list>  
    <item>  
    	<!-- 第一个列表项内容 -->  
    </item>  
    <item>  
    	<!-- 第二个列表项内容 -->  
    </item>  
</list>

<list>标签必须嵌套在<nview>标签下,默认和父容器<nview>具备相同的宽高;<list>标签支持id、onclick、style通用属性,style属性中支持设置background、position样式。<list>标签内部仅允许嵌套<item>子标签。

<item>表示列表项,默认也和父容器<list>具备一样的宽高,因此实际使用中,需要设置每个列表项的宽高。<item>标签支持id、onclick、style通用属性,style属性中支持设置background、position样式。<item>下允许使用<canvas>、<richtext>两个布局标签,在<canvas>、<richtext>布局容器下,可以绘制图片、文字、按钮等元素。

如下是一个简单的纯文本列表示例:

<nview id="nview1" style="height: 150px;">  
	<list id="list">  
		<item style="height: 30px;">  
			<canvas>  
				<font style="align: left;left: 15px;top:15px;">Item 1</font>  
			</canvas>  
		</item>  
		<item style="height: 30px;">  
			<canvas>  
				<font style="align: left;left: 15px;top:15px;">Item 2</font>  
			</canvas>  
		</item>  
		<item style="height: 30px;">  
			<canvas>  
				<font style="align: left;left: 15px;top:15px;">Item 3</font>  
			</canvas>  
		</item>  
	</list>  
</nview>

运行结果如下:

{.mobile-screenshot}

n-for指令

除了拼凑静态NView标签外,NView模板也支持通过n-for指令将数组中的数据渲染成原生列表,n-for指令需使用item in items的特殊语法,如下是一个示例:

<template>  
	<nviews cachemaxage="86400">  
		<nview style="height: 200px;">  
			<list style="top:10px;">  
				<item style="height: 50px;" n-for="item in data.items">  
					<canvas>  
						<!--Logo图片-->  
						<img src={item.icon} style="left: 15px;width: 35px;height: 35px;"  />  
						<!--产品名称-->  
						<font style="align: left;left: 65px;height:35px;">  
							{item.name}  
						</font>  
					</canvas>  
				</item>  
			</list>  
		</nview>  
	</nviews>  
</template>  
<script>  
	module.exports = {  
		data: {  
			items: [  
				{name: "HBuilder",icon: "icon1.png"},  
				{name: "5+Runtime",icon: "icon2.png"},  
				{name: "mui",icon: "icon3.png"}  
			]  
		}  
	};  
</script>

{.mobile-screenshot}

点击事件

<list>标签支持onclick事件属性,参考模板事件

<item>标签也支持onclick事件属性,不同于其它标签的是,若列表是通过n-for指令渲染生成的,则<item>标签的点击回调中,可以获得当前列表项对应的数据及当前列表项索引值,如下是一个示例:

<template>  
	<nviews cachemaxage="86400">  
		<nview style="height: 200px;">  
			<list style="top:10px;">  
				<!--列表项增加onclick点击事件-->  
				<item style="height: 50px;" n-for="item in data.items" onclick={this.clickItem}>  
					<canvas>  
						<!--Logo图片-->  
						<img src={item.icon} style="left: 15px;width: 35px;height: 35px;"  />  
						<!--产品名称-->  
						<font style="align: left;left: 65px;height:35px;">  
							{item.name}  
						</font>  
					</canvas>  
				</item>  
			</list>  
		</nview>  
	</nviews>  
</template>  
<script>  
	module.exports = {  
		data: {  
			items: [  
				{name: "HBuilder",icon: "icon1.png"},  
				{name: "5+Runtime",icon: "icon2.png"},  
				{name: "mui",icon: "icon3.png"}  
			]  
		},  
		methods: {  
			//item:当前列表项的数据对象  
			//index:当前列表项索引  
			clickItem:function(item,index,event){  
				plus.nativeUI.alert("name:"+item.name+",index:"+index);  
			}  
		}  
	};  
</script>
5 关注 分享
Trust 2***@qq.com 很好爱爱啊 51ZionLin 雪之梦技术驿站

要回复文章请先登录注册

cydida

cydida

回复 很好爱爱啊 :
我这边也是一样的
2018-05-11 09:07
cydida

cydida

动态更新数据怎么弄?你这是静态测试数据
2018-05-11 08:48
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 2***@qq.com :
感谢指正,文档已修复
2017-12-04 20:33
2***@qq.com

2***@qq.com

n-for指令的代码片段少了 n- 吧
2017-12-04 17:06
光光阿斯蒂芬

光光阿斯蒂芬

什么时候更新版本啊...
2017-09-19 16:45
51ZionLin

51ZionLin

我在网吧,看到周末发布,很激动,期待很久。
2017-09-13 21:13
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 很好爱爱啊 :
尚未正式发版,预计本周末发版
2017-09-13 18:17
很好爱爱啊

很好爱爱啊

为什么我用Nview在5+中 全是空白
2017-09-13 17:59