轮播器html_手机web开发软件「建议收藏」

在NView模板中，仅允许使用有限的标签(可以认为是HTML的子集)，标签嵌套顺序及支持的属性，均有较为严格的限制。一个NView模板文件，固定结构如下：

module.exports = {

//通过JS处理数据

};

template/nviews/script这些是表示特定结构的标签，并不生成UI元素；另外还有一些标签，如font/button等，则会生成相应的UI元素。

大多数标签都是可以通过属性设置的元素的样式，比如位置、边框等。我们讲大多数模板标签均具备的属性，称为标签通用属性，主要包括id/onclick/style三个属性，详细说明参考这里。本文在介绍模板标签时，除非该标签有特殊限制，否则不会介绍通用属性。

a标签在原生view上绘制一个超链接(底部带下划线的文本)，目前标签仅支持在容器下使用。

属性

richtext容器下的a标签，还支持href属性，但点击不会触发页面跳转。若需处理a标签的跳转，则需监听richtext容器的onclick事件，通过点击回调中获取点击目标对象的href属性，然后通过JS API实现窗口跳转。

子标签

br标签用于插入一个简单的换行符，类似于HTML5中的br标签，目前仅可以在richtext容器下使用。

br标签不支持任何属性及子标签。

用于在原生View上绘制按钮，button标签内部仅支持放置文字，按钮文字上下、左右居中显示。

### 属性

处于canvas和richtext容器下时，支持属性不同。

**canvas**

button位于绝对布局容器canvas标签下时，支持id、onclick、style通用属性；style中可以定义background、border、font、position样式，详细参考[模板样式](http://ask.dcloud.net.cn/article/12790)。

**richtext**

暂不支持、即将支持。

### 子标签

button标签下不支持嵌套子标签。

## 表示绝对布局容器，默认和父容器nview具备相同的宽高，子节点全部为绝对定位，关于绝对布局参考[模板布局](http://ask.dcloud.net.cn/article/12784).

### 属性

canvas支持id、onclick、style通用属性，style属性中支持background、position样式定义，详细参考[模板样式](http://ask.dcloud.net.cn/article/12790)

### 子标签

canvas标签下允许使用a、button、font、img、input、hr标签；

##

用于在原生View上绘制文本，

### 属性

font处于canvas和richtext容器下时，支持属性不同。

**canvas**

font位于绝对布局容器canvas标签下时，支持id、onclick、style通用属性；style中可以定义align、background、font、position样式，详细参考[模板样式](http://ask.dcloud.net.cn/article/12790)

**richtext**

font位于流式布局容器richtext标签下时，支持id、style属性，不支持onclick属性；style中可以定义align、font样式，详细参考[模板样式](http://ask.dcloud.net.cn/article/12790)；不支持background、position样式。

### 子标签

font标签下不支持嵌套子标签。

##

hr标签在原生view上创建一条水平分割线，从而可以将展示内容分割成各个部分。

### 属性

hr标签支持id、style通用属性，不支持onclick属性；

hr标签的style属性可以定义align(水平对齐)、border、position中的宽高(width/height)，width支持绝对像素值和百分比，百分比是根据父容器宽度自动计算。

另外，hr处于canvas容器下时，还支持position中的left/top等坐标位置设置；处于richtext容器下是流式布局，不支持left/top等坐标设置。

### 子标签

hr标签下不支持嵌套子标签。

##

imageslider是原生渲染的图片轮播组件，不允许嵌套子标签。imageslider支持id、style通用属性，style属性中可以设置background、position样式，具体参考[NView模板样式](http://ask.dcloud.net.cn/article/12790)；另外，imageslider还支持images、loop、fullscreen属性，详细说明如下。

**images**

配置轮播组件的图片信息，具体信息包括：

* src: 图片地址，支持本地地址(相对地址、绝对路径、RelativeURL、本地路径URL)； 也支持网络地址(http://或https://)；

* align: 图片水平对齐方式，仅在图片显示的宽度与图片轮播控件宽度不一致时有效，可取值： “left” – 图片在轮播控件中水平居左对齐； “center” – 图片在轮播控件中水平居中对齐； “right” – 图片在轮播控件中水平居右对齐。 默认值为”center”。

* height: 图片显示的高度，可取值： 像素值，如”100px”； 百分比，如”10%”，现对于图片轮播控件的高度； 自动计算”auto”，如果指定图片宽度(width)，则按图片实际大小等比缩放图片高度值，如果没有指定宽度(width值为”auto”)则自动缩放图片至可完整显示。

* width: 图片显示的宽度，可取值： 像素值，如”100px”； 百分比，如”10%”，相对于图片轮播控件的宽度； 自动计算”auto”，如果指定图片高度(height)，则按图片实际大小等比缩放图片宽度值，如果没有指定高度(height值为”auto”)则自动缩放图片至可完整显示。 默认值为”auto”。

* verticalAlign: 图片垂直对齐方式，仅在图片显示的高度与图片轮播控件宽度不一致时有效，可取值： “top” – 图片在轮播控件中垂直居顶对齐； “middle” – 图片在轮播控件中垂直居中对齐； “bottom” – 图片在轮播控件中垂直居底对齐。 默认值为”middle”。

因为配置信息较为复杂，这里需要使用NView模板的[插值方式](http://ask.dcloud.net.cn/article/12759)赋值，如下是一个示例：

“`html

“`

如上images属性值中，外层{}表示当前为JavaScript表达式，内部的[]表示当前为一个Array数组，数组中的每个元素是{}包裹的json对象；

**loop**

设置轮播图片是否可循环播放，可取值：

* true – 支持循环轮播；

* false – 不支持循环轮播

默认值为false。

**fullscreen**

用户点击轮播图片时，是否全屏显示图片，可取值：

* true – 全屏显示，用户点击轮播图片时全屏显示；

* false – 不可全屏显示，用户点击轮播图片时无响应。

默认值为true。

### 子标签

imageslider不支持嵌套子标签。

##

用于在原生View上绘制图片。

### 属性

除了通用标签属性，img还支持src属性，用于设置图片资源路径。

img处于canvas和richtext容器下时，支持的通用属性不同。

**canvas**

img位于绝对布局容器canvas标签下时，支持id、onclick、style通用属性；style中可以定义position样式，详细参考[模板样式](http://ask.dcloud.net.cn/article/12790)

**richtext**

img位于流式布局容器richtext标签下时，支持id、style属性，不支持onclick属性；style中仅支持position样式中的width、height属性，不支持left、top等坐标样式，详细参考[模板样式](http://ask.dcloud.net.cn/article/12790)。

### 子标签

img标签下不支持嵌套子标签。

## 标签可以在原生View上绘制输入框，输入文本内容在指定区域水平向左、垂直居中显示。

目前input标签仅支持在canvas容器下使用，richtext容器下无法使用。

### 属性

input标签支持id、style通用属性，style属性中支持设置font中的font-size样式、border边框样式；input标签不支持onclick属性；另外，input标签还支持type、placeholder、oncomplete属性。

**type**

type属性设置输入框类型，可取值：

* email – 邮箱地址输入框；

* number – 数字输入框；

* search – 搜索文本输入框；

* tel – 电话号码输入框；

* text – 普通文本输入框；

* url – URL地址输入框。

**placeholder**

设置输入框的提示文本，当用户未输入内容时显示在编辑框中(灰色文字)。

**oncomplete**

弹出软键盘完成输入后，点击软键盘上的“完成”、“前往”按钮时触发，如下为示例：

“`html

module.exports = {

methods: {

//inpu输入完成的回调

handleInput:function(){

plus.nativeUI.toast(“input complete”);

}

}

};

“`

### 子标签

input标签下不支持嵌套子标签。

##

item表示list组件下的列表项，参考[NView模板绘制原生列表教程](http://ask.dcloud.net.cn/article/12803)

##

list是NView模板封装的列表组件，参考[NView模板绘制原生列表教程](http://ask.dcloud.net.cn/article/12803)

##

nviews位于template节点下，一个NView模板文件有且仅有一个nviews节点；

### 属性

nviews仅支持cachemaxage一个属性。

**cachemaxage**

subNView缓存时间，单位为秒，默认为1天(86400秒)；wap2app会将subNView的计算结果缓存起来，在缓存期内再次打开同一页面时，将直接使用缓存数据渲染subNView，而不会再次发起网络请求。

### 子节点

nviews节点下只允许嵌套使用nview一种标签，数量不限。

##

nview表示一个布局容器，类似于HTML5中的div标签，但不支持nview标签的互相嵌套。

### 属性

nview支持id、onclick、style通用属性，style属性中支持background、position样式，详细参考[模板样式](http://ask.dcloud.net.cn/article/12790)。

另外，nview标签还支持intercept、autoclose属性，详细定义参考下文描述。

**intercept**

nview事件拦截配置，详细参考[事件监听 – NView模板](http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/12760)文章中的事件拦截章节。

**autoclose**

nview是否自动关闭，默认为false，即不关闭；开发者可以通过配置autoclose=”loaded”实现下层webview加载完毕后，自动关闭上层的nview控件。

**Tips：**subNView作为webview的子控件，在webview上层使用原生技术，提前渲染，在窗口动画期间就完成主要内容的渲染工作；若下层webview加载的HTML页面完全渲染结束，则subNView的主要工作已完成，是否继续存在则可以根据具体场景而定。

若subNView上部分元素需要响应用户的点击操作，则通常有三种方法：

* 配置相应元素的onclick属性，编写对应的触发函数

* 设置nview的intercept属性为false，将触屏事件透传给下层的webview，由dom元素响应事件，此种方案可能出现半屏遮罩的问题(webview的全屏div遮罩，但无法遮住上层的subNView控件)。

* 配置nview的autoclose属性，在webview加载完毕后自动关闭subNView，则用户触屏时就直接触发dom元素的响应事件

### 子节点

节点下允许使用、、、4个标签。

## 表示流式布局容器，默认和父容器nview具备相同的宽高，子节点全部为流式布局。关于流式布局参考[模板布局](http://ask.dcloud.net.cn/article/12784).

### 属性

richtext支持id、onclick、style通用属性，style属性中支持background、position样式定义，详细参考[模板样式](http://ask.dcloud.net.cn/article/12790)。

//TODO richtext点击事件描述

### 子标签

richtext标签下允许使用font、img、a、br、hr标签；

##

script节点下可以进行数据计算，一个模板文件仅允许出现一个script节点，默认代码如下：

“`html

module.exports = {

data: {

//默认数据

},

init: function(url) {

//动态初始化数据

},

methods: {

//方法

}

};

“`

script标签不支持设置任何属性，也不允许嵌套子标签。

##

模板标签根节点，一个NView模板文件有且仅有一个template节点，不支持设置属性；

template节点下仅允许嵌套nviews标签，且仅允许嵌套一个nviews标签。