轮播图

用户登录到首页之后， 第一个看到的内容，就是轮播图。 (见前面的原型图)

所以，我们接下来，要为首页增加它。

1. 增加路由

路由文件(src/router/index.js)，对应位置，增加： 

  1. import Index from '@/views/shops/index'
  3. Vue.use(Router)
  5. export default new Router({
  6.   routes: [
  7.     {
  8.       path: '/',
  9.       name: 'Home',
  10.       component: Index
  11.     }
  12.   ]

2. 增加对应页面

src/views/shops/index.vue

  1. <template>
  2.   <div class="background">
  3.     <div class="home">
  4.       <div class="m_layout">
  5.         <!-- 轮播图-->
  6.         <HomeBannerView></HomeBannerView>
  7.         <!--导航-->
  8.         <HomeNavView></HomeNavView>
  10.         <span class="divider" style="height: 4px;"></span>
  11.         <div class="product_top">
  12.           <div class="product_left">
  13.             <div>商品列表</div>
  14.           </div>
  15.         </div>
  16.         <span class="divider" style="height: 2px;"></span>
  17.         <!-- 特产商品 -->
  18.         <SpecialMarket :id="good.id" :name="good.name" :description="good.description" :image_url="good.image_url" v-for="good in goods"></SpecialMarket>
  19.       </div>
  20.     </div>
  21.     <NavBottomView :is_shops_index="is_shops_index"></NavBottomView>
  22.   </div>
  23. </template>
  24. <script>
  25.     // 轮播图需要的js文件
  26.     import {bindEvent,scrollPic} from '../../libs/index.js'
  27.     // 轮播图需要的前台文件
  28.     import HomeBannerView from '../../components/HomeBanner.vue';
  29.     // 商品分类
  30.     import HomeNavView from '../../components/HomeNav.vue';
  32.     // 特产，商品的列表
  33.     import SpecialMarket from '../../components/SpecialMarket.vue';
  35.     // 底部4个TAB， 下一节会讲到
  36.     import NavBottomView from '../../components/NavBottom.vue';
  38.     export default{
  39.       data () {
  40.         return {
  41.           goods: [],
  42.           is_shops_index: true,
  43.         }
  44.       },
  45.        components:{
  46.         HomeHeaderView,
  47.         HomeBannerView,
  48.         HomeNavView,
  49.         HomeMainView,
  50.         SpecialMarket,
  51.         NavBottomView
  52.        },
  53.        mounted () {
  54.         //bindEvent();
  55.         scrollPic();
  56.         this.loadPage ();
  57.        },
  58.        computed:  {
  59.        },
  60.        methods: {
  61.          loadPage () {
  62.            this.$http.get(this.$configs.api + 'goods/get_goods').then((response)=>{
  63.              console.info(response.body)
  64.              this.goods= response.body.goods
  65.            },(error) => {
  66.              console.error(error)
  67.            });
  68.          },
  69.        }
  70.     }
  71. </script>

上面的代码中，

  • 先是读取了一个API
  • 渲染数据
  • 实现首页的轮播图

3. 增加轮播图

我们做开发的核心方法论： 不要造轮子。

一定要造轮子的话， 先搜索一下是否已经有了现成的轮子。

轮播图是最最常见的组件， 所以一定会有别人写好的第三方包， 我们拿过来用就好。

经过一番考察， 我们发现这个项目不错：

所以， 直接拿过来用。

3.1 轮播图的组件

我们需要在src/views/shops/index.vue中，增加： 

  1. import {bindEvent,scrollPic} from '../../libs/index.js'

然后， 增加对应的文件（libs/index.js)

  2. function $id(id) {
  3.     return document.getElementById(id);
  4. }
  6. function bindEvent() {
  7.     var sea = $id("my_search");
  8.     /*banner对象*/
  9.     var banner = $id("my_banner");
  10.     /*高度*/
  11.     var height = banner.offsetHeight;
  12.     window.onscroll = function() {
  13.         var top = document.body.scrollTop;
  14.         /*当滚动高度大于banner的高度时候颜色不变*/
  15.         if (top > height) {
  16.             sea.style.background = "rgba(201,21,35,0.85)";
  17.         } else {
  18.             var op = top / height * 0.85;
  19.             sea.style.background = "rgba(201,21,35," + op + ")";
  20.         }
  21.     };
  22. }
  24. function scrollPic() {
  25.     var imgBox = document.getElementsByClassName("banner_box")[0];
  26.     var width = $id("my_banner").offsetWidth;
  27.     var pointBox = document.getElementsByClassName("point_box")[0];
  28.     var ols = pointBox.children;
  29.     var indexx = 1;
  30.     var timer = null;
  31.     var moveX = 0;
  32.     var endX = 0;
  33.     var startX = 0;
  34.     var square = 0;
  36.     function addTransition() {
  37.         imgBox.style.transition = "all .3s ease 0s";
  38.         imgBox.style.webkitTransition = "all .3s ease 0s";
  39.     }
  41.     function removeTransition() {
  42.         imgBox.style.transition = "none";
  43.         imgBox.style.webkitTransition = "none";
  44.     }
  46.     function setTransfrom(t) {
  47.         imgBox.style.transform = 'translateX(' + t + 'px)';
  48.         imgBox.style.webkitTransform = 'translateX(' + t + 'px)';
  49.     }
  51.     // 开始动画部分
  52.     pointBox.children[0].className = "now";
  53.     for (var i = 0; i < ols.length; i++) {
  54.         ols[i].index = i; // 获得当前第几个小li 的索引号
  55.         ols[i].onmouseover = function() {
  56.             // 所有的都要清空
  57.             for (var j = 0; j < ols.length; j++) {
  58.                 ols[j].className = "";
  59.             }
  60.             this.className = "now";
  61.             setTransfrom(-indexx * width);
  62.             square = indexx; 
  63.         }
  64.     }
  65.     timer = setInterval(function() {
  66.         indexx++;
  67.         addTransition();
  68.         setTransfrom(-indexx * width);
  69.         // 小方块
  70.         square++;
  71.         if (square > ols.length - 1) {
  72.             square = 0;
  73.         }
  74.         // 先清除所有的
  75.         for (var i = 0; i < ols.length; i++) 
  76.         {
  77.             ols[i].className = "";
  78.         }
  79.         // 留下当前的
  80.         ols[square].className = "now"; 
  81.     }, 3000);
  83.     imgBox.addEventListener('transitionEnd', function() {
  84.         if (indexx >= 9) {
  85.             indexx = 1;
  86.         } else if (indexx <= 0) {
  87.             indexx = 8;
  88.         }
  89.         removeTransition();
  90.         setTransfrom(-indexx * width);
  91.     }, false);
  93.     imgBox.addEventListener('webkitTransitionEnd', function() {
  94.         if (indexx >= 9) {
  95.             indexx = 1;
  96.         } else if (indexx <= 0) {
  97.             indexx = 8;
  98.         }
  99.         removeTransition();
  100.         setTransfrom(-indexx * width);
  101.     }, false);
  103.     /**
  104.      * 触摸事件开始
  105.      */
  106.     imgBox.addEventListener("touchstart", function(e) {
  107.         console.log("开始");
  108.         var event = e || window.event;
  109.         //记录开始滑动的位置
  110.         startX = event.touches[0].clientX;
  111.     }, false);
  113.     /**
  114.      * 触摸滑动事件
  115.      */
  116.     imgBox.addEventListener("touchmove", function(e) {
  117.         console.log("move");
  118.         var event = e || window.event;
  119.         event.preventDefault();
  121.         //清除定时器
  122.         clearInterval(timer);
  123.         //记录结束位置
  124.         endX = event.touches[0].clientX;
  125.         //记录移动的位置
  126.         moveX = startX - endX;
  127.         removeTransition();
  128.         setTransfrom(-indexx * width - moveX);
  129.     }, false);
  131.     /**
  132.      * 触摸结束事件
  133.      */
  134.     imgBox.addEventListener("touchend", function() {
  135.         console.log("end");
  136.         //如果移动的位置大于三分之一，并且是移动过的
  137.         if (Math.abs(moveX) > (1 / 3 * width) && endX != 0) {
  138.             //向左
  139.             if (moveX > 0) {
  140.                 indexx++;
  141.             } else {
  142.                 indexx--;
  143.             }
  144.             //改变位置
  145.             setTransfrom(-indexx * width);
  146.         }
  147.         //回到原来的位置
  148.         addTransition();
  149.         setTransfrom(-indexx * width);
  150.         //初始化
  151.         startX = 0;
  152.         endX = 0;
  154.         clearInterval(timer);
  155.         timer = setInterval(function() {
  156.             indexx++;
  157.             square++;
  158.             if (square > ols.length - 1) {
  159.                 square = 0;
  160.             }
  161.             // 先清除所有的
  162.             for (var i = 0; i < ols.length; i++) 
  163.             {
  164.                 ols[i].className = "";
  165.             }
  166.             // 留下当前的
  167.             ols[square].className = "now"; 
  168.             addTransition();
  169.             setTransfrom(-indexx * width);
  171.         // 每3秒钟轮播图变化一次。
  172.         }, 3000);
  173.     }, false);
  174. };
  176. module.exports = {
  177.     bindEvent,
  178.     scrollPic
  179. }

3.2 轮播图的视图层

  1. <!-- 轮播图-->
  2. <HomeBannerView></HomeBannerView>

上面的代码， 会直接生成一个轮播图。

我们创建这个component, 增加： src/components/HomeBanner.vue, 

  1. <template>
  2.     <div class="home_ban">
  3.         <div class="m_banner clearfix" id="my_banner">
  4.             <ul class="banner_box">
  5.                 <!-- 更改这里就可以替换轮播图的图片了 -->
  6.                 <li><img src="http://siweitech.b0.upaiyun.com/image/silulegou/2FgHsjCz7qfpSQr0.jpeg" alt="" /></li>
  7.                 <li><img src="http://siweitech.b0.upaiyun.com/image/silulegou/uJawxX6H3PBRcfMO.jpeg" alt="" /></li>
  8.             </ul>
  9.             <ul class="point_box" >
  10.                 <li></li>
  11.                 <li></li>
  12.             </ul>
  13.         </div>
  14.     </div>
  15. </template>

这个component的内容非常简单。 它只是一个轮播图组件的View. 我们只需要更换上面代码中的两个图片文件就好了。

4. 增加物品分类

  1. <!--商品分类-->
  2. <HomeNavView></HomeNavView>

上面的代码， 会直接生成一个物品分类区域

我们创建这个component: 增加： src/components/HomeNav.vue

  1. <template>
  2.     <div class="home_n">
  3.         <nav class="m_nav">
  4.                 <ul>
  5.                     <li class="nav_item">
  6.                         <a href="#" class="nav_item_link">
  7.                             <img src="../assets/images/nav0.png" alt="">
  8.                             <span>草原特色肉</span>
  9.                         </a>
  10.                     </li>
  11.                     <li class="nav_item">
  12.                         <a href="#" class="nav_item_link">
  13.                             <img src="../assets/images/nav1.png" alt="">
  14.                             <span>特色干果</span>
  15.                         </a>
  16.                     </li>
  17.                     <li class="nav_item">
  18.                         <a href="#" class="nav_item_link">
  19.                             <img src="../assets/images/nav9.png" alt="">
  20.                             <span>特色瓜子</span>
  21.                         </a>
  22.                     </li>
  23.                     <li class="nav_item">
  24.                         <a href="#" class="nav_item_link">
  25.                             <img src="../assets/images/nav8.png" alt="">
  26.                             <span>特色大米</span>
  27.                         </a>
  28.                     </li>
  29.                 </ul>
  30.             </nav>
  31.     </div>
  32. </template>

之所以这样写， 是考虑到前期的商品分类不多。 在下一个版本会改成读取后台的接口。

看效果

默认页面效果如下：

图1

三秒钟之后， 轮播图发生了滚动：

图2

总结

我们使用了 现成的轮播图组件。 可以看到， 非常简单。 步骤是：

  1. 复制对应组件的js 文件到src/lib下。
  2. 复制对应组件的vue文件到src/components下
  3. 在对应的vue文件中使用它们。