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 ...
随机推荐
- centos7安装oracle1201c
root身份安装依赖包: yum -y install binutils compat-libcap1 compat-libstdc++-33 compat-libstdc++-33*.i686 el ...
- Centos修改时间
1. 普通用户 a. 获取超级用户root权限 命令:su或者su -或者su - root b. passwd 用户名 2. 超级用户 a. 打开system-auth文件 命令:vi /etc/p ...
- PAT A1011 World Cup Betting(20)
AC代码 #include <cstdio> #include <algorithm> const int max_n = 3; using namespace std; /* ...
- Vue.js学习笔记-script标签在head和body的区别
初学JavaScript,项目需要没有系统学习,只能边查资料边码代码,埋下的坑不知道有多少,还是建议时间充足的情况下系统的将Javascript学习一遍 ,涉及的HTML知识也务必了解. 问题 最开始 ...
- centos编译安装python3怎么做?
照着我的博客操作 你一定能成功的!因为我就是一步一步的做出来的,虽然只有文档,但是希望你能有耐心!!!! 编译安装难么麻烦,为什么还要编译安装? 那我告诉你想进步就要折腾!你习惯了windows的安装 ...
- OpenCV-图像处理
直方图比较方法-概述 对输入的两张图像计算得到直方图H1与H2,归一化到相同的尺度空间 然后可以通过计算H1与H2的之间的距离得到两个直方图的相似程度进 而比较图像本身的相似程度.Opencv提供的比 ...
- 并不对劲的复健训练-p5212 SubString
题目大意 有一个串\(s\),一开始只知道它的一个前缀.有\(q\)(\(q\leq 10^4\))个操作,操作有两种:1.给一个字符串,表示\(s\)(\(s\)总长\(\leq 6\times 1 ...
- lsof---列出当前系统打开的文件信息
lsof---list open file,一个列出当前系统打开文件的工具 1.lsof查找原理 在Linux系统中,系统为了方便管理进程,会在/proc下为每一个运行中的进程创建一个目录,目录名就是 ...
- 3-Perl 基础语法
Perl 基础语法Perl借用了C.sed.awk.shell脚本以及很多其他编程语言的特性,语法与这些语言有些类似,也有自己的特点.Perl 程序有声明与语句组成,程序自上而下执行,包含了循环,条件 ...
- List与Set区别
List: 元素有序放入,元素可重复 Set: 元素无序保存,元素不可重复(通过==判断,非基本类型判断的是引用地址),因为set是无序的,故只能通过迭代器循环.ps:说是无序,但是其实set中的元素 ...