Vue系列入门教程(7)——实现简单轮播图

Web前端 潘老师 2个月前 (09-05) 243 ℃ (0) 扫码查看

我们现在将学习的Vue知识应用一下,去实现简单轮播图效果,下面我们来一起看一下实现过程。

1、在HBuildX中使用vue-cli创建vue项目,名为lbt
2、删除无用文件,如图:
Vue系列入门教程(7)——实现简单轮播图
3、修改index.html如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>演示轮播图</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

4、修改App.vue如下(清空组件、模板、样式):

<template>
  <div id="app">
  </div>
</template>

<script>

export default {
  name: 'app',
  components: {
      
  }
}
</script>

<style>
</style>

5、修改main.js,去掉Vue.config.productionTip = false即可

以上基本项目准备已经完成。

1、在assets目录下,新建images文件夹,从网上下载几张图片,放在其中,以便演示,我这里从淘宝首页下载了3张,大小520*280
Vue系列入门教程(7)——实现简单轮播图
2、在assets目录下,新建style目录,在目录中新建名为global.css的全局样式文件,内容如下

*{
    padding: 0;
    margin: 0;
}

3、在main.js中导入全局样式

//导入全局样式
import './assets/style/global.css'

注意一定要以./开头。
4、在components目录下新建名为Lbt.vue的轮播图组件
Vue系列入门教程(7)——实现简单轮播图
5、在Lbt.vue中输入vbase快速创建组件基础模板:
Vue系列入门教程(7)——实现简单轮播图
模板代码如下:

<template>
    <div>

    </div>
</template>

<script>
    export default {
        
    }
</script>

<style scoped>

</style>

6、开始开发轮播图组件,代码如下:

<template>
    <!-- 轮播图模板 -->
    <div class="out">
        <div class="btn btn-left" @click="prePic"><</div>
        <img class="pic" :src="pics[num].imgUrl" alt=""/>
        <div class="btn btn-right" @click="nextPic">></div>
    </div>
</template>

<script>
    // 默认导出组件
    export default {
        name:'Ltb',
        data(){
            return{
                // 记录图片数组索引
                num: 0,
                // 图片数组,图片地址绑定需要使用require
                pics: [
                        {imgUrl:require("../assets/images/pic1.jpg")},
                        {imgUrl:require("../assets/images/pic2.jpg")},
                        {imgUrl:require("../assets/images/pic3.jpg")},
                     ]
            }
        },
        methods:{
            // 上一个图片
            prePic(){
                if(this.num == 0){
                    this.num = this.pics.length-1;
                }else{
                    this.num--;
                }
            },
            // 下一个图片
            nextPic(){
                if(this.num == this.pics.length-1){
                    this.num = 0;
                }else{
                    this.num++;
                }
            }
        }
    }
</script>
<!-- 组件样式代码 scoped限制样式范围只在该组件有效-->
<style scoped>
.out {
    width: 520px;
    height: 280px;
    margin: 100px auto;
    position: relative;
}
.out .btn {
    width: 30px;
    height: 60px;
    color: white;
    background: rgba(0,0,0,0.3);
    position: absolute;
    top: calc(50% - 30px);
    line-height: 60px;
    text-align: center;
    font-size: 20px;
    font-family: "宋体";
    cursor: pointer;
}
.out .btn-left {
    left: 0;
}
.out .btn-right {
    right: 0;
}
</style>

注意:使用vue-cli,在template中图片如果使用绑定方式,则在data中的图片地址必须要使用require引入之后才能显示,否则无法显示,因为vue-cli会将图片打包到img目录下。但是如果在temeplate中直接引用如下:
<img class=”pic” src=”../assets/images/pic1.jpg” alt=””/>
是能够正常显示的。

7、在App.vue引入、注册、使用Lbt.vue组件

<template>
  <div id="app">
      <!--3、使用组件 -->
      <Lbt></Lbt>
  </div>
</template>

<script>
// 1、导入组件
import Lbt from './components/Lbt.vue'
export default {
  name: 'app',
  ///2、注册组件
  components: {
      Lbt
  }
}
</script>

<style>
</style>

8、运行到浏览器访问,成功实现轮播效果
Vue系列入门教程(7)——实现简单轮播图
9、我们这里只实现了点击轮播,有兴趣的可以再自行实现自动轮播效果


版权声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系潘老师进行处理。
喜欢 (7)
请潘老师喝杯Coffee吧!】
分享 (0)
发表我的评论
取消评论
表情 贴图 签到 代码

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

  • 昵称 (必填)
  • 邮箱 (必填【保密】)
  • 网址