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 7 cloudera-manager5.16.2,CDH5.16.2安装升级spark2.4.0
1.在已经安装好系统的linux服务器上关闭selinux和iptables 2.在所有linux服务器上配置ntp服务并设置ntp时间同步 3.在所有linux服务器上安装好cm和cdh版本所需要对 ...
- C++学习 之 程序的组成部分（部分知识笔记）
1.预处理器编译指令#include: 预处理器是在程序编译前运行的工具.预处理器编译指令是向预处理器发送的命令,总是以#为标识,include便是其中常见的一种,用于引用文件,比如:iostream ...
- php网络请求
get请求 /** * get请求 * @param $url,请求地址 * @return bool|string */ function getRequest($url){ $headerArra ...
- python虚拟环境的的使用
基于创建虚拟环境 virtualenv 安装 pip3 install virtualenv 通过virtulaenv创建虚拟环境 virtualenv luffycity --python=C:\P ...
- springboot打包的jar项目，不需要安装jdk环境启动
因为服务器上是JDK7,而springboot至少用JDK8才行,但是又因为是很老的项目,不是很清楚能不能换JDK8,有风险,因此选择以前项目用JDK7,而新的springboot用JDK8.步骤一: ...
- Codeforces 1238F. The Maximum Subtree
传送门 考虑构造一些区间使得树尽可能的 "大" 发现这棵树最多就是一条链加上链上出去的其他边连接的点 构造的区间大概长这样(图比较丑请谅解..$qwq$,图中每一个 "└ ...
- C# HttpWebRequest向远程地址Post文件
HttpWebRequest向远程地址Post文件 /// <summary> /// 上传文件到远程服务器 /// </summary> /// <param name ...
- 发明专利定稿&递交申请啦，开心
也不想写些什么,只是想简单的分享一下当前的心情! 第一版到最后一版中间因为各种事情耽误,一直弄到现在.5月中旬找的专利代理局中间连续修改很多次,从大改到小改,再到微调真的是学习到了! 下面就是搞定&l ...
- 常用的Java工具类——十六种
常用的Java工具类——十六种 在Java中,工具类定义了一组公共方法,这篇文章将介绍Java中使用最频繁及最通用的Java工具类.以下工具类.方法按使用流行度排名,参考数据来源于Github上随机选 ...
- 使用JFreeChart创建柱状图的工具类
package cn.xfz.oa.util; import java.awt.Font; import java.util.List; import org.jfree.chart.ChartFac ...