• 轮播图
    • 1. 增加路由
    • 2. 增加对应页面
    • 3. 增加轮播图
    • 4. 增加物品分类
    • 看效果
    • 总结

    轮播图

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

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

    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文件中使用它们。