vue手机商城项目实战(4)-首页轮播图组件实现

Web前端 潘老师 1年前 (2020-09-19) 893 ℃ (0) 扫码查看

本文接:vue手机商城项目实战(3)-首页搜索框组件实现

1、下载3张图片放进assets\img目录,方便轮播图测试使用。

2、在views下新建Banner.vue代码如下:

<template>
    <div id="banner">
        <mt-swipe :auto="4000">
          <mt-swipe-item v-for="(item,index) in pics" :key="index">
            <img :src="item.url">
          </mt-swipe-item>
        </mt-swipe>
    </div>
</template>
<script>
export default {
  name:'Banner',
  data(){
      return {
          pics:[
                  {url:require('../assets/img/pic1.jpg')},
                  {url:require('../assets/img/pic2.jpg')},
                  {url:require('../assets/img/pic3.jpg')}
          ]
      }
  }
}
</script>
<style scoped>
    .mint-swipe {
      height: 180px;
    }
    .mint-swipe img {
      width: 100%;
      height: 180px;
    }
</style>

3、修改Home.vue如下:

<template>
    <div id="home">
        <!-- 顶部导航栏 -->
        <mt-header fixed title="首页">
            <mt-button icon="search" slot="right" @click="search"></mt-button>
        </mt-header>
        <!-- 由于顶部导航栏固定,所以轮播图要上边距占据其高度 -->
        <div style="height: 40px;"></div>
        <!-- 轮播图 -->
        <Banner></Banner>
    </div>
</template>

<script>
    // 导入轮播图组件
    import Banner from './Banner.vue'
    export default {
        methods:{
            // 点击搜索按钮,跳转到搜索组件
            search(){
                this.$router.push({name:"Search"});
            }
        },
        // 注册组件
        components:{
            Banner
        }
    }
</script>

<style scoped>
</style>

vue手机商城项目实战(4)-首页轮播图组件实现


版权声明:本站所有文章,如无特殊说明,均为本站原创。全部下载资源版权归原作者所有。任何个人或组织,若未征得本站同意,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。若需转载请注明文章来源。
本文链接:vue手机商城项目实战(4)-首页轮播图组件实现
喜欢 (6)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】

您也可以 微信登录 来发表评论!