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>

运行结果如下：

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>

点击事件

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

之前写过一篇类似的文章，最近重启这个项目，又琢磨了一个新的方法，自认为这个比之前的方法简单一点。这次这个方法不需要修改自带的js啦。

mui提供的例子中 ：
<div class="mui-indexed-list-alert"></div>
<div class="mui-indexed-list-inner">
<div class="mui-indexed-list-empty-alert">没有数据</div>
<ul class="mui-table-view">
<li data-group="A" class="mui-table-view-divider mui-indexed-list-group">A</li>
<li data-value="AKU" data-tags="AKeSu" class="mui-table-view-cell mui-indexed-list-item">阿克苏机场</li>
.....................
</ul>
</div>
</div>
</div>
所以 按照数据是这种格式去添加，即可很容易的实现索引列表。
再js中还是按照官方的例子写，
mui.ready(function() {

            var header = document.querySelector('header.mui-bar');  
            var list = document.getElementById('list');  
            //calc hieght  
            list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';  
            //create  
            window.indexedList = new mui.IndexedList(list);  
            setdata(0);  
        });  

setdata(0); 是我请求网络数据的方法。
然后根据你后台返回的数据格式 进行想对应的修改即可。
function setdata(noDepartment){
console.log("通讯录走这了url" + url+"///tag"+noDepartment);
mui.ajax(url, { //
data: {
noDepartment: noDepartment
},
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒；
success: function(data) {
var table = document.body.querySelector('.mui-table-view');
var htmla = document.createElement('li');
.....
var a = 0,
b = 0,
......

                for(var i = 0; i < data.length; i++) {  
                    //插入数据                                                        
                    var s = makePy(data[i].cRealName) + ""; //将名字 转化为首字母缩写  
                    var shouzimu = s.substr(0, 1); //获取首字母                                                        
                    //首字母 为 Ａ的  
                    if(shouzimu == "A") {  
                        if(a == 0) {  
                            htmla.innerHTML += '<li data-group="A" class="mui-table-view-divider mui-indexed-list-group active">A</li><li data-value=' + s + 'data-tags=' + s + ' class="mui-table-view-cell mui-indexed-list-item"><div class="indexed-list-item oa-contact-avatar mui-table-cell"><img src="../../images/60x60.gif"></div><div class="indexed-list-item" ><h4 id="comtact-name"  class="oa-contact-name">' + data[i].cRealName + '</h4><span id="comtact-zhiwu" class="oa-contact-position mui-h6">' + data[i].cDepartmentName +  
                                '</span><p id="comtact-phone" class="oa-contact-emailmui-h6">' +  
                                data[i].cTelephoneNumber +  
                                '</p></div>' + '</li>';  

                            a = a + 1;  
                        } else {  
                            htmla.innerHTML += '<li data-value=' + s + 'data-tags=' + s + ' class="mui-table-view-cell mui-indexed-list-item active" "><div class="indexed-list-item oa-contact-avatar mui-table-cell"><img src="../../images/60x60.gif"></div><div class="indexed-list-item" ><h4 id="comtact-name"  class="oa-contact-name" >' + data[i].cRealName +  
                                '</h4><span id="comtact-zhiwu" class="oa-contact-position mui-h6">' + data[i].cDepartmentName +  
                                '</span><p id="comtact-phone" class="oa-contact-emailmui-h6">' +  
                                data[i].cTelephoneNumber +  
                                '</p></div>' + '</li>'  
                        }  
                    }  
                        table.appendChild(htmla);  
                              .....  
                                   .....  

.},
error: function(xhr, type, errorThrown) {
console.log(type);
mui.toast(type + "请求服务超时，请重新请求")
}
});
}
makePy(data[i].cRealName) + ""; //将名字 转化为首字母缩写
这个方法是因为后台返回的数据格式全是汉字所以需要这样一个方法，如果你的后台已经给你返回 A ，B 的标签 直接添加到htmla 。。。上面即可.
这样你的界面就会出现数据了 ，如果没法滑动和索引的联动 屏蔽掉mui.IndexedList.js 里面一些方法即可。
我因为 没有搜索功能 对应 搜索功能的 html代码和js全部屏蔽

        这个方法屏蔽了 里面的内容  
        var findEnd = function(event) {  

// self.el.alert.classList.remove('active');
// self.el.bar.classList.remove('active');
// if (pointElement) {
// pointElement.classList.remove('active');
// pointElement = null;
// }
};
这个 全部屏蔽
// bindSearchEvent: function() {
// var self = this;
// self.el.searchInput.addEventListener('input', function() {
// var keyword = this.value;
// self.search(keyword);
// }, false);
// $(self.el.search).on('tap', classSelector('icon-clear'), function() {
// self.search('');
// }, false);
// },
这个 屏蔽一个
bindEvent: function() {
var self = this;
self.bindBarEvent();
// self.bindSearchEvent();
}
});

当popover时，让弹出窗体的某一个input自动得到焦点，直接下$('').focus(),第一次是可以的，但是第二次再弹窗就不行了，
这个时候要加一个settimeout,把设置焦点的代码放到settimeout里面，这样就可以了

NView模板标签属性赋予元素意义和语境，下面的属性可用于绝大部分的模板标签，因此我们单独抽离出来，称为通用标签。

id

规定模板元素的唯一id，可选；

style

定义NView模板的控件样式，可选；除template/script标签外，其它NView模板标签均支持style属性。style属性可定义的样式参考模板样式。

注意：每个控件可定义的样式不同，具体参考模板标签教程中的说明。

onclick

事件属性，可选；用户点击时触发，使用方式参考模板事件教程中的onclick章节。

NView模板中的大部分标签均支持onclick点击事件，只有如下几个标签存在特殊性：

• imageslider：不支持，用户点击后默认触发轮播图片的全屏预览
• br/hr：不支持
• richtext标签下的font：不支持，但canvas标签下的font支持onclick事件属性

阿里百川插件集成，或其他插件集成，离线打包 微信闪退 等各种问题解决 QQ：37894663

以前有写过一个例子，还有待完善，分享给大家，可以有点灵感， 有好的想法，大家也可以分享出来。

下图片，是动态效果图，

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <meta name="apple-mobile-web-app-status-bar-style" content="white">  
        <meta name="HandheldFriendly" content="true"/>  
        <meta name="MobileOptimized" content="320"/>  
    <title></title>  
        <style>   
        *{ margin: 0px; padding: 0;}  
        .txt{ position: relative; padding-left: 10px; padding-right: 10px;}  
        .input{    
            width:97%;    
            height:34px;    
            line-height:34px;    
            font-size:14px;    
            border:1px solid #ddd;  
            padding-left: 10px;   
        }    
        .setNumber{display: inline-block; position: relative;top:0px;font-size: 16px;}  
        .cursor-blink   
        {  
             animation: blink 1s infinite steps(1, start);   
            -webkit-animation:blink 1s infinite steps(1, start);   
            -moz-animation:blink 1s infinite steps(1, start);   
            width:1px; height:20px;  display: inline-block;  
            position: relative;top:5px;  left:-70px; display: none;  

        }  
        @keyframes blink {  
            0%, 100% {  
                background-color: #000;  
                color: #aaa;  
            }  
            50% {  
                background-color: #bbb; /* not #aaa because it's seem there is Google Chrome bug */  
                color: #000;  
            }  
        }  

    .footer{position: fixed; bottom:0px;  padding:10px; padding-bottom: 10px; background-color:#999999; display: none;}  
    .footer .number b,.footer .del_close b{ width:80px; height:50px; display: inline-block; background-color: white; border:1px solid #ddd; text-align: center; line-height:40px; margin-bottom: 10px;  }  
    .footer .number{ width:80%; float: left;}  
    .footer .del_close b{width:65px; width:18%;}  
        </style>  
    </head>  
    <body style=" padding:0px; padding-top: 50px; ">  

    <div class="txt">  

    <div class="input" ><span class="setNumber">输入编号</span> <span class="cursor-blink"><span></div>    

    </div>  
    <div class="footer">  
    <div class="number">  
    <b>1</b>  
    <b>2</b>   
    <b>3</b>  
    <b>4</b>  
    <b>5</b>   
    <b>6</b>   
    <b>7</b>  
    <b>8</b>  
    <b>9</b>  
    </div>    
    <div class="del_close">  
    <b id="close">关闭</b>  
    <b id="del">回删</b>  
    </div>  
    </div>  

    <script>  

            //点击DIV输入框  
        var input_txt=document.querySelector(".input");  
            input_txt.addEventListener('click',function()  
            {  
                document.querySelector(".cursor-blink").style.display="inline-block";  
                document.querySelector(".footer").style.display="block";  
            },false);  

            //给每个数字，添加点击事件  
         var b_num=document.querySelectorAll(".number>b");   
         var setNumber=document.querySelector(".setNumber");  

             for(var i=0;i<b_num.length;i++)  
             {  
                b_num[i].addEventListener('click',function()  
                {  
                    var num=this.innerText;  
                    document.querySelector(".cursor-blink").style.left="0px";  
                    var txt=setNumber.innerHTML; //获得DIV文本  
                        if(isNaN(txt))  
                        {  
                        setNumber.innerHTML=""; //删掉输入编号文字  
                                        txt=""; //  
                        }  
                       setNumber.innerHTML=txt+""+num;   

                },false);     
             }  
            ///  

            //回删数字  
        var del=document.querySelector("#del");  
            del.addEventListener('click',function()  
            {  
                 var setNumber=document.querySelector(".setNumber");  
                 var txtnum=setNumber.innerText;  
                     if(isNaN(txtnum))  
                     {  
                        return;  
                     }  
                 var news_num="";  
                     for(var i=0;i<txtnum.length-1;i++)  
                     {  
                     news_num+=""+txtnum[i];      
                     }  
                     setNumber.innerText=news_num;  
                     if(news_num=="")  
                     {  
                        setNumber.innerText="输入编号";  
                        document.querySelector(".cursor-blink").style.left="-70px";  
                     }  
            },false);     

         //关闭数字键盘  
        var close=document.querySelector("#close");  
            close.addEventListener('click',function()  
            {  
                 document.querySelector(".cursor-blink").style.display="none";  
                 document.querySelector(".footer").style.display="none";  

            },false);     
    </script>  

    </body>  
</html>  

软件是新装的，也还原过配置，都没用，新版运行时带了参数，各种浏览器都会带上参数，老版的没有这个问题
图片中带参数的是8.8版本的
不带参数的是7.3版本的
虽然不影响测试，但是我这种强迫症根本受不了呀，希望有人能告诉我怎么去掉那个参数，谢谢

《JavaScript 快速提高视频教程》 js基础快速提高课程 【免费】
http://www.hcoder.net/course/info_229.html

《MUI 视频教程》【免费】
http://www.hcoder.net/course/info_211.html

《h.js 视频教程》【免费】
http://www.hcoder.net/tutorials/info_147.html

《HTML 5 + 开发教程》【免费】
http://www.hcoder.net/course/info_212.html

《APP开发实例教程 - 窗口切换 》【免费】
http://www.hcoder.net/course/info_218.html

《HBuilder 8.0.1 APP开发 - 新功能全接触》【免费】
http://www.hcoder.net/course/info_227.html

--------- 实战收费教程 ------------------------

MUI、H5+ APP 实战教程 - 仿《有道词典》
https://ke.qq.com/course/194834

H5+ 跨平台APP开发电商项目实战教程 -《仿京东优选商城》
https://ke.qq.com/course/225830

更多课程中心
http://www.hcoder.net/course

个推的传透消息很难用，小米推送的ios很不稳定。
强烈建议官方接入极光推送，强烈建议官方接入极光推送，强烈建议官方接入极光推送强烈建议官方接入极光推送，强烈建议官方接入极光推送，强烈建议官方接入极光推送强烈建议官方接入极光推送，强烈建议官方接入极光推送，强烈建议官方接入极光推送强烈建议官方接入极光推送，强烈建议官方接入极光推送，强烈建议官方接入极光推送强烈建议官方接入极光推送，强烈建议官方接入极光推送，强烈建议官方接入极光推送。

Dawn

Dawn 取「黎明、破晓」之意，原为「阿里云·业务运营团队」内部的前端构建和工程化工具，现已完全开源。它通过 pipeline 和 middleware 将开发过程抽象为相对固定的阶段和有限的操作，简化并统一了开发人员的日常构建与开发相关的工作。

项目地址：https://github.com/alibaba/dawn （感兴趣请赏个 Star）

特点

• 采用中间件技术，封装常用功能，易于扩展，方便重用
• 支持 pipeline 让多个 task 协同完成构建任务
• 简单、一致的命令行接口，易于开发人员使用
• 根据模板快速生成项目工程结构
• 支持基于「中心服务」管理中件间和工程模板
• 支持搭建私有中心服务，并统一下发构建规则，易于团队统一管理

安装

$ npm install dawn -g

使用

# 1. 创建 & 初始化  
$ dn init -t front  

# 2. 开发 & 实时编译  
$ dn dev  

# 3. 语法检查 & 测试  
$ dn test  

# 4. 构建 & 打包  
$ dn build

示例（.dawn.yml 或 .dawn 目录）

# 启动开发服务  
dev:  
  - name: webpack  
    entry: ./src/*.js  
    template: ./assets/*.html  
    watch: true  
  - name: server  
    port: 8001  

# 直接构建  
buid:  
  - name: webpack  
    entry: ./src/*.js  
    template: ./assets/*.html

文档

• 使用入门：getting-started.md
• 配置 Pipeline：pipeline.md
• 中件间：middleware.md
• 更多文档：https://alibaba.github.io/dawn/docs/

-- end --