AUI 滚动视图使用

1、滚动视图类似手机上的scroll

---

1.1 引入aui样式：

  <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-slide.css" />

1.2 需要自己设置图片的样式 如下：

    .aui-slide-node img{
// 宽度 自适应
            width:auto;
//高度 百分百
            height:100%;
        }

        .bg-dark {
//设置背景颜色 
//!important  只是针对css样式的引入
//link 可以引入 html ， 也可以引入css
            background: #333333 !important;
    }

3.3 声明 id 用于 aui-js的初始化 如下：

 <!--最外层的盒子  背景 用来aui初始化使用  没有用aui的样式-->    
 <div id="aui-slide">

初始化方法如下：

//      相当于初始化方法
    var slide = new auiSlide({
//      指定 获取当前页的函数  必须实现
        currentPage:currentFun,
//      获取最外层div元素
        container:document.getElementById("aui-slide"),
//      高度
        "height":260,
//      速度
        "speed":300,
//      是否显示
        "pageShow":true,
//      点风格显示
        "pageStyle":'dot',
//      是否循环 滚动
        "loop":true,
//      点的位置
        'dotPosition':'center',
    })

3.4 具体页面设置 代码如下：

<!--最外层的盒子  背景 用来aui初始化使用  没有用aui的样式--> 
    <div id="aui-slide">
<!--最外面第二层  没有用aui的样式  控制滚动区域的大小--> 
        <div class="aui-slide-wrap">
<!--最外面第三层   aui有自己的样式-->       
            <div class="aui-slide-node">
<!--设置类似九宫格的样式-->   
                <ul class="aui-grid-nine">
<!--设置一个cell 文本居中-->    
                    <li class="aui-col-xs-4 aui-text-center"> 
                        <span class="aui-iconfont aui-icon-edit"></span>
                        <p>栏目</p>
                    </li>

                    <li class="aui-col-xs-4 aui-text-center">
                        <span class="aui-iconfont aui-icon-emoji aui-text-danger"></span>
                        <p>栏目</p>
                    </li>
                    <li class="aui-col-xs-4 aui-text-center">
                        <span class="aui-iconfont aui-icon-favor aui-text-warning"></span>
                        <p>栏目</p>
                    </li>
                    <li class="aui-col-xs-4 aui-text-center">
                        <span class="aui-iconfont aui-icon-phone aui-text-pink"></span>
                        <p>栏目</p>
                    </li>
                    <li class="aui-col-xs-4 aui-text-center">
                        <span class="aui-iconfont aui-icon-taxi aui-text-dark"></span>
                        <p>栏目</p>
                    </li>
                    <li class="aui-col-xs-4 aui-text-center">
                        <span class="aui-iconfont aui-icon-camera aui-text-info"></span>
                        <p>栏目</p>
                    </li>
                </ul>
            </div>
            <!-- 设置第二页  居中 -->  
            <div class="aui-slide-node aui-slide-node-middle aui-slide-node-center">
<!--添加 内容 内间距 15px-->   
                <div class="aui-content aui-padded-15">
                            <!--span  设置行内 块样式-->   
                    <span class="aui-text-danger">AUI Slide</span> 轮播组件不只局限于放置图片，可以自定义内容，分页样式有圆点(dot)，线条(line),结合AUI Flex来实现图片及内容的水平、垂直居中
                </div>
            </div>

            <div class="aui-slide-node aui-bg-warning aui-slide-node-middle aui-slide-node-center">
                <div class="aui-content aui-padded-15">
                    <span class="aui-text-danger">AUI Slide</span>提供了常用的配置属性，可以自定义宽度，高度，自动播放，分页器样式等，支持无缝循环轮播
                </div>
            </div>
                    <!--span  设置图片 样式-->    
            <div class="aui-slide-node bg-dark">
                <img src="../image/l1.png" />
            </div>
            <div class="aui-slide-node bg-dark">
                <img src="../image/l2.png" />
            </div>
            <div class="aui-slide-node bg-dark">
                <img src="../image/l3.png" />
            </div>
            <div class="aui-slide-node aui-bg-warning">
                <img src="../image/demo5.png" />
            </div>

        </div>
                <!--必须设置 才能分页 -->   
        <div class="aui-slide-page-wrap"><!--分页容器--></div>
    </div>