AUI 滚动视图使用

来源：互联网发布：注册淘宝账号需要什么编辑：程序博客网时间：2024/06/08 15:01

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>

0 0