NView模板绘制原生列表教程

      2020-08-02 10:48      HTML5

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

模板结构\n

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

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

<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>
\n

运行结果如下:

n-for指令\n

除了拼凑静态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;" 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>
\n

点击事件\n

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

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

<template>
<nviews cachemaxage="86400">
<nview style="height: 200px;">
<list style="top:10px;">
<!--列表项增加onclick点击事件-->
<item style="height: 50px;" 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>
\n