前端|如何制作MUI静态页面的轮播图

 

问题描述

     

当我们打开很多APP时映入我们眼帘的是页面上方的轮播图，这个轮播图占了我们页面大概三分之一的大小，在这个轮播图上面是最近的热门消息。例如我们经常要用到的淘宝、京东等相关软件，所以轮播图也在软件中扮演这越来越重要的角色。

解决方案

     

我们在制作轮播图之前我们首先要熟悉几个知识点。

第一就是MUI的官方文档：http://dev.dcloud.net.cn/mui/ui/，在这个网站当中有着很多我们在前端框架所需要的组件，当我们需要时我们就可以直接从官方文档里面去拷贝这个组件的代码就好了。所以我们一定要对官方文档里面的组件要比较熟悉。这里我们制作轮播图所需要的就是一个轮播组件：slide（轮播组件）

                           

我们在写轮播图的时候一定要注意：除了固定栏之外，其它内容都要包裹在.mui-content 中

<div>

  <divclass="mui-slider-group">

    <!--第一个内容区容器-->

    <divclass="mui-slider-item">

      <!-- 具体内容 -->

      <img src=dad8bf31-e662-4e76-ac5f-418f15889bb3.jpg>

    </div>

    <!--第二个内容区-->

    <divclass="mui-slider-item">

      <!-- 具体内容 -->

      <img src=lJjpIwqDZUTJ=u0t6k3CwE9QIkwI5C0pVNwDGY6clB2bh1535423901817compressflag.jpg>

    </div>

  </div>

</div>

这样一个轮播图的HTML部分代码就完成了。效果如下：

 

结语

     

所有的代码除了固定栏之外，其它内容都要包裹在.mui-content 中，注意图片的引用方式，我们还要熟悉很多官方文档里面的组件哦。

 

 

 

标签：轮播,mui,文档,组件,MUI,我们,页面
来源： https://blog.51cto.com/u_15281984/2960483