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 ...
随机推荐
- hdu 4471 区间条件统计 区间 不超过 x 的元素的个数
题目传送门//res tp hdu 目的 对长度为n的区间,m次询问,每次提供一个区间两端点与一个值x,求区间内不超过x的元素个数 n 1e5 m 1e5 ai [1,1e9] (i∈[1,n]) 多 ...
- PC端判断屏幕宽度到达手机宽度的时候，直接跳转手机页面
<script> // //判断屏幕宽度到达手机宽度的时候,直接跳转手机页面 // window.addEventListener("resize", function ...
- socket传送文件格式的问题
在python3中socket传送文件只能传送‘bytes'类型,如下例子: import socket client = socket.socket()client.connect(("l ...
- windows 控制台默认为UTF-8显示的方法
这里需要先了解些内容: CHCP CHCP是MS DOS中的命令,用来显示或设置活动代码页编号的.用法是: CHCP [nnn] 其中nnn指定的是代码页的编号.这个参数是可选的,在命令行下如果不指定 ...
- 北电之死：谁谋杀了华为的对手？——银湖资本（Silver Lake）董事总经理爱德华·詹德出任CEO，既不了解华为，也不重视中国，直截了当地否决了收购华为
作者:戴老板:微信公众号:饭统戴老板(ID: worldofboss) 2003年5月,北京SARS疫情紧张,摩托罗拉集团总裁迈克·扎菲罗夫斯基(Mike Zafirovski)却准备不走寻常路,决定 ...
- 11-Perl 运算符
1.Perl 运算符运算符是一种告诉编译器执行特定的数学或逻辑操作的符号,如: 3+2=5.Perl 语言内置了丰富的运算符,我们来看下常用的几种: 算术运算符,比较运算符,逻辑运算符,赋值运算符,位 ...
- Laravel 查询或写入Enum字段出错的bug解决办法
查询: if($request->filled('type')){ $where[] = ['type', strval(intval($request->input('type')))] ...
- LeetCode：176.第二高的薪水
题目链接:https://leetcode-cn.com/problems/second-highest-salary/ 题目 编写一个 SQL 查询,获取 Employee 表中第二高的薪水(Sal ...
- JS-数值转换
JS数值转换 JS数值转换的方式有4种:Number(),parseInt(),parseFloat(),数据类型*1或者/1. 他们的区别在于: 1.Number():可以将非数值转为数值 如果是B ...
- bus事件总线传值
import Vue from 'vue' var bus = new Vue() export default bus 监听事件: // header组件 <template> ...