vue实例之组件开发：图片轮播组件
一、普通方式：
其中，index是关键。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
html, body{
margin: 0;
padding: 0;
}
.photo-player{
width: 456px;
height: 670px;
overflow: hidden;
position: relative;
}
.photo-player-lists{
list-style-type: none;
margin: 0;
padding: 0;
width: 456px;
height: 670px;
}
.photo-player-lists li{
list-style-type: none;
width: 456px;
height: 670px;
}
.photo-player-lists li img{
width: 456px;
height: 670px;
}
.photo-player-button{
position: absolute;
margin: 0;
padding: 0;
bottom: 30px;
left: 198px;
list-style-type: none;
}
.photo-player-button li{
list-style-type: none;
width: 10px;
height: 10px;
margin-left: 5px;
margin-right: 5px;
border-radius: 6px;
float: left;
cursor: pointer;
}
.white{
background: #ffffff;
}
.active{
background: #0000ff;
}
</style>
<title>Title</title>
</head>
<body>
<div id="app">
<my-player :photos="photos"></my-player>
<my-player :photos="photos"></my-player>
<my-player :photos="photos"></my-player>
</div>
<script src="libs/vue.js"></script>
<script>
Vue.component("my-player", {
template: `<div class="photo-player">
<ul class="photo-player-lists">
<li v-for="(value, key) in photos" v-if="key==index"><img :src="value" /></li>
</ul>
<ul class="photo-player-button">
<li v-for="(value, key) in photos" :class="['white', {'active': key == index}]" @click="index = key"></li>
</ul>
</div>`,
props: ["photos"],
data: function(){
return {
index: 0
}
},
methods: {
change(){
let that = this;
let len = this.photos.length;
setInterval(function(){
that.index++;
if(that.index == len){
that.index = 0;
}
}, 1000*3);
}
},
mounted(){
this.change();
}
});
let app = new Vue({
el: "#app",
data: {
photos: ["images/08.jpg", "images/13.jpg", "images/16.jpg"]
}
});
</script>
</body>
</html>
二、单文件组件形式：
PhotoPlayer.vue：
<template>
<div class="photo-player">
<ul class="photo-player-lists">
<li v-for="(value, key) in photos" v-if="key==index" :key="key"><img :src="value" /></li>
</ul>
<ul class="photo-player-button">
<li v-for="(value, key) in photos" :class="['white', {'active': key == index}]" @click="index = key" :key="key"></li>
</ul>
</div>
</template>
<script>
export default {
data(){
return {
index: 0
}
},
props: ["photos"],
methods: {
change(){
let that = this;
let len = this.photos.length;
setInterval(function(){
that.index++;
if(that.index == len){
that.index = 0;
}
}, 1000*5);
}
},
mounted(){
this.change();
}
}
</script>
<style scoped>
html, body{
margin: 0;
padding: 0;
}
.photo-player{
width: 456px;
height: 670px;
overflow: hidden;
position: relative;
}
.photo-player-lists{
list-style-type: none;
margin: 0;
padding: 0;
width: 456px;
height: 670px;
}
.photo-player-lists li{
list-style-type: none;
width: 456px;
height: 670px;
}
.photo-player-lists li img{
width: 456px;
height: 670px;
}
.photo-player-button{
position: absolute;
margin: 0;
padding: 0;
bottom: 30px;
left: 198px;
list-style-type: none;
}
.photo-player-button li{
list-style-type: none;
width: 10px;
height: 10px;
margin-left: 5px;
margin-right: 5px;
border-radius: 6px;
float: left;
cursor: pointer;
}
.white{
background: #ffffff;
}
.active{
background: #0000ff;
}
</style>
使用时：
在某个单文件组件中引用PhotoPlayer.vue
<template>
<div>
<PhotoPlayer :photos="photos"></PhotoPlayer>
</div>
</template>
<script>
import PhotoPlayer from './PhotoPlayer'
export default {
data() {
return {
photos: [require("../assets/08.jpg"), require("../assets/13.jpg"), require("../assets/16.jpg")]
}
},
components: {
PhotoPlayer
}
};
</script>
<style scoped=""></style>
注意：
定义了一个数组，数组里面装有图片的路径，使用for循环渲染页面时，图片路径对但是图片不显示。
解决办法：
数组里面图片的路径要写成如下：
image:require('../assets/login.png')
渲染的时候要写：
<img :src="item.image" />
vue实例之组件开发：图片轮播组件的更多相关文章
- 循序渐进BootstrapVue，开发公司门户网站（4）--- 使用b-carousel-slide组件实现图片轮播以及vue-awesome-swiper实现图片滑动展示
在BootstrapVue组件库里面,提供了很多对Bootstrap同等类似的组件封装,其中图片轮播可以采用b-carousel-slide组件实现,而有一些小的图片,如客户/合作伙伴Logo或者友情 ...
- Vue学习—Vue写一个图片轮播组件
1.先看效果: 熟悉的图片轮播,只要是个网站,百分之90以上会有个图片轮播.我认为使用图片轮播. 第一可以给人以一种美观的感受,而不会显得网站那么呆板, 第二可以增加显示内容,同样的区域可以显示更多内 ...
- 用Vue实现一个简单的图片轮播
本文已收录至https://github.com/likekk/studyBlog欢迎大家star,共同学习,共同进步.如果文章有错误的地方,欢迎大家指出.后期将在将GitHub上规划前端学习的路线和 ...
- 一分钟搞定AlloyTouch图片轮播组件
轮播图也涉及到触摸和触摸反馈,同时,AlloyTouch可以把惯性运动打开或者关闭,并且设置min和max为运动区域,超出会自动回弹. 除了一般的竖向滚动,AlloyTouch也可以支持横向滚动,甚至 ...
- Angular2组件与指令的小实践——实现一个图片轮播组件
如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图.而除了直接看的见的躯体之外,一个完整的" ...
- Omi-touch实战 移动端图片轮播组件的封装
pc端的轮播,移动端的轮播都很常见.一年前,我还为手机端没有左滑,右滑事件从而封装了一个swipe库,可以自定义超过多少滑动时间就不触发,也可以设置滑动多少距离才触发,这一个功能的代码就达到400多行 ...
- 如何将angular-ui的图片轮播组件封装成一个指令
在项目开发中我们经常会遇到图片轮播的功能点: 如果我们开发人员自己原生手写,将会花费很多的时间,最终得不偿失. 接下来就详细说说如何使用angular-ui发热图片轮播模块,并且将它写成一个指令(便于 ...
- 如何将angular-ui-bootstrap的图片轮播组件封装成一个指令
在项目开发中我们经常会遇到图片轮播的功能点: 如果我们开发人员自己原生手写,将会花费很多的时间,最终得不偿失. 接下来就详细说说如何使用angular-ui发热图片轮播模块,并且将它写成一个指令(便于 ...
- iOS开发--图片轮播
直接上代码了,比较简单.演示下载地址:Demo // // UYViewController.m // 图片轮播器 // // Created by jiangys on 15/5/23. // Co ...
- ios开发图片轮播器以及定时器小问题
一:图片轮播器效果如图:能实现自动轮播,到最后一页时,轮播回来,可以实现拖拽滚动 二:代码: #import "ViewController.h" ; @interface Vie ...
随机推荐
- CentoS里Tomcat端口开放
1.发现安装好tomcat后,发现无法访问tomcat首页,后来发现防火墙没有开放8080端口. 需注意的是:CentOS 7防火墙换用Friewalld了,所以要用以下命令将端口号加进防火墙: fi ...
- JAVA 中为什么String 是immutable的
本文翻译自:http://www.programcreek.com/2013/04/why-string-is-immutable-in-java/ 这是一个很老但很流行的问题,这里有几个原因Stri ...
- PAT A1005 Spell It Right (20)
书中AC代码 #include <cstdio> #include <cstring> #include <iostream> char num[10][10] = ...
- Annotation Type ManyToMany->>>>>Oracle
Example 1: // In Customer class: @ManyToMany @JoinTable(name="CUST_PHONES") public Set< ...
- CentOS 7安装Maven
echo "安装Java环境,先安装JDK" yum -y install java-openjdk echo "切换到/usr/local/src下载目录" ...
- 28-Perl POD 文档
1.Perl POD 文档Perl 中可以在模块或脚本中嵌入 POD(Plain Old Documentation) 文档.POD 是一种简单而易用的标记型语言(置标语言).POD 文档使用规则: ...
- NPOI_winfrom导出Excel表格（二）(直接打开Excel软件，将数据填充在当前的sheet中)
//// 存储路径弹框选择 SaveFileDialog saveDialog = new SaveFileDialog(); saveDialog.DefaultExt = "xls&qu ...
- C# WPF 数据绑定
后台通知: public event PropertyChangedEventHandler PropertyChanged; protected void OnPropertyChanged(str ...
- QT获取屏幕分表率（PC、安卓）
QRect screenRect = QGuiApplication::primaryScreen()->geometry(); double devicePixelRatio = QGuiAp ...
- js之语句——案例
以下为js语句的案例题,虽然简单,但是里面涉及到语句的嵌套,多个参数,需要好好分析. 1.求出1-100之间所有奇/偶数之和 <script> var sum = 0; for (var ...