实现了图片列表展示的功能,一次性可查看4张图,可向左向右点击查看,代码如下:

index.vue:

<template>
<div class="content-container">
<div class="content-container-item content">
<!-- 使用transition加过渡效果 -->
<transition-group tag="div" class="content-inner" name="list" mode="out-in">
<!-- 图片列表封装成组件,以便扩展 -->
<pic-list v-for="item in showPicList" :key="item.code" :picItem="item.picList"></pic-list>
</transition-group>
</div>
<!-- 向左点击查看图片按钮 -->
<div class="content-container-item icon-container left-icon-container">
<div @click="prevStation" class="shuffling-btn prev"></div>
</div>
<!-- 向右点击查看图片按钮 -->
<div class="content-container-item icon-container right-icon-container">
<div @click="nextStation" class="shuffling-btn next"></div>
</div>
</div>
</template> <script>
import picList from './pic-list';
export default {
name: 'pictureContainer',
data() {
return {
showPicList: [{
code: 1,
picList: './1.jpg'
},
{
code: 2,
picList: './2.jpg'
},
{
code: 3,
picList: './3.jpg'
},
{
code: 4,
picList: './4.jpg'
},
{
code: 5,
picList: './5.jpg'
},
{
code: 6,
picList: './6.jpg'
},
{
code: 7,
picList: './7.jpg'
},
{
code: 8,
picList: './8.jpg'
}],
watchList: [], //图片列表list
showListIndex: 0, //当前页面显示的第一个图片列表在watchList中的位置
}
},
components: {
picList
},
mounted() {
//加载图片列表
this.getWatchList();
},
methods: {
/**
* @description 获取可视范围图片列表
*/
getWatchList() {
this.watchList = this.showPicList;
if(this.watchList.length <= 4) {
this.showPicList = this.watchList;
} else {
this.showPicList = this.watchList.slice(0, 4);
}
},
/**
* @description 向右点击事件
*/
nextStation() {
if((this.showListIndex + 4) < this.watchList.length) {
this.showPicList = this.watchList.slice(++this.showListIndex, this.showListIndex + 4);
} else {
utils.showAlert('右侧已无数据');
}
},
/**
* @description 向左点击事件
*/
prevStation() {
if(this.showListIndex > 0) {
this.showPicList = this.watchList.slice(--this.showListIndex, this.showListIndex + 4);
} else {
utils.showAlert('左侧已无数据');
}
}
}
}
</script> <style scoped lang="less">
@icon-container-width: .3rem;
@title-background: #35393E; .content-container {
width: 100%;
height: 1.3rem;
background: @title-background;
.icon-container {
width: @icon-container-width;
max-width: @icon-container-width;
}
.left-icon-container {
margin-left: -100%;
}
.right-icon-container {
margin-left: @icon-container-width;
&:after {
display: block;
content: '';
clear: both;
height: 0;
line-height: 0;
visibility: hidden;
}
}
.content-container-item {
float: left;
height: 100%;
position: relative;
.shuffling-btn {
position: absolute;
top: 50%;
left: 50%;
margin-left: -.25rem;
margin-top: -.25rem;
cursor: pointer;
width: .5rem;
height: .5rem;
border-radius: .5rem;
}
.prev {
background: url(./prev.png) no-repeat;
}
.next {
background: url(./next.png) no-repeat;
}
}
.content {
width: 100%;
}
.content-inner {
margin: 0 @icon-container-width;
display: flex;
flex-wrap: nowrap;
align-items: center;
height: 100%;
justify-content: center;
.list-enter-active, .list-leave-active {
transition: opacity 2s ease-in-out;
}
.list-leave, .list-enter {
opacity: 0;
}
}
}
</style>

子组件 pic-list.vue:

<template>
<div class="main" @click.stop="clickItem(item)">
<div :style="{backgroundImage: 'url(' + item + ')'}"></div>
</div>
</template> <script type="text/ecmascript-6">
/**
* @description 图片列表切换子组件,传递单个item即可
*/ export default {
name: 'picList',
props: {
item: {
type: Object,
default: () => ({})
}
},
methods: {
/**
* @description 点击图片列表事件
*/
clickItem(item) {
this.$emit('showPicture', item);
}
}
}
</script> <style scoped lang="less">
@base-line-height: .4rem;
@item-background-color: #303438; .main {
margin: 2% .1rem;
width: 25%;
min-width: 1rem;
height: 1rem;
color: @item-background-color; &>div {
width: 100%;
height: 100%;
background-size: 100%;
background-repeat: no-repeat;
}
}
</style>

Vue 封装可向左向右查看图片列表的组件的更多相关文章

  1. 封装实现UIButton左文字右图片

    #import "TitleButton.h" @implementation TitleButton - (instancetype)initWithFrame:(CGRect) ...

  2. js实现图片加载特效(从左到右,百叶窗,从中间到两边)

    /* 网上百度的,感觉”从中间到两边“的效果写的不是很好,改了一下,感觉可以了!*/<html> <head> <title></title> < ...

  3. vue封装一个简单的div框选时间的组件

    记录一下我前段时间封装的一个vue组件吧.技术需要积累,有时间我把我之前写的还不错的组件都开源出来.并尝试vue和react 两种方式的组件封装.今天简单写下鼠标框选div选中效果的封装吧. div框 ...

  4. css3动画 一行字鼠标触发 hover 从左到右颜色渐变

    偶然的机会发现的这个东东 这几天做公司的官网 老板突然说出了一个外国网站 我就顺手搜了 并没有发现他说的高科技 但是一个东西深深地吸引了我 就是我下面要说的动画  这个好像不能放视频 我就简单的描述一 ...

  5. centos 目录结构 快捷键 ls命令,alias别名,so:动态库 a:静态库,环境变量PATH,Ctrl+z 暂停命令,Ctrl+a 光标到行首,Ctrl+e 光标到行尾,Ctrl+u 删除光标前所有字符 Ctrl+r 搜索命 hash命令 Ctrl+左箭头/右箭头 cd命令 第三节课

    centos 目录结构 快捷键 ls命令,alias别名,so:动态库 a:静态库,环境变量PATH,Ctrl+z 暂停命令,Ctrl+a 光标到行首,Ctrl+e 光标到行尾,Ctrl+u 删除光标 ...

  6. Vue 监听鼠标左键 鼠标右键以及鼠标中键修饰符click.left&amp;contextmenu&amp;click.middle

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 【代码笔记】iOS-可以向左(右)滑动

    一,效果图. 二,代码. RootViewController.m - (void)viewDidLoad { [super viewDidLoad]; // Do any additional se ...

  8. c++ 左值右值 函数模板

    1.先看一段代码,这就是一种函数模板的用法,但是红色的部分如果把a写成a++或者写成一个常量比如1,都是编译不过的,因为如果是a++的话,实际上首先是取得a的 值0,而0作为一个常量没有地址.写成1也 ...

  9. 剑指offer系列——二维数组中,每行从左到右递增,每列从上到下递增,设计算法找其中的一个数

    题目:二维数组中,每行从左到右递增,每列从上到下递增,设计一个算法,找其中的一个数 分析: 二维数组这里把它看作一个矩形结构,如图所示: 1 2 8 2 4 9 12 4 7 10 13 6 8 11 ...

随机推荐

  1. sublime text 输入法候选词不跟随光标

    可以使用imesupport 插件解决 百度 : 搜狗 sublime 不跟 光标 找到这篇文章, 原始作者 http://qianduanblog.com/post/sublime-text-3-p ...

  2. 为什么Android的图片质量会比iPhone的差?

           经常看到有人问:“安卓版微信发出去的图片怎么那么渣!比iPhone的差远了!”.不只是微信,很多应用安卓版的图片质量就是要比iPhone版逊色很多,这到底是怎么回事? 我们团队最初也纠结 ...

  3. linux指定目录安装软件后,程序找不到共享库问题

    以svn为例,64位centos yum install subversion --installroot=/usr/svn/后 执行svn命令,报错svn: error while loading ...

  4. MyEclipse下如何安装svn插件

    方法一:在线安装 1.打开HELP->MyEclipse Configuration    不过多数情况下再myeclipse实现不了   Center.切换到SoftWare标签页. 2.点击 ...

  5. rdlc报表

    也是第一次接触报表这个东西.现在在我理解,报表无非就是两个内容,格式和数据. 格式没有多少了解,就记录了,以后再续.数据的绑定和结果的显示是怎么实现的呢? 今天的主角就是rdlc这个文件和Report ...

  6. IBM GPFS并行文件系统

    原文地址:http://www.hqschina.com/Show.aspx?info_lb=283&info_id=751&flag=103 IBM GPFS文件系统是一种专门为群集 ...

  7. 关于TCP连接状态的解释

    TCP各个状态主要存在于三次握手和四次挥手的过程 1.TCP建立连接时的三次握手: 服务端应用监听端口处于LISTEN状态,等待建立连接. 第一次握手:客户端发送SYN=一个随机数,然后进入SYN_S ...

  8. 理解IOC

    理解IOC 1 IoC理论的背景    我们都知道,在采用面向对象方法设计的软件系统中,它的底层实现都是由N个对象组成的,所有的对象通过彼此的合作,最终实现系统的业务逻辑. 图1:软件系统中耦合的对象 ...

  9. MySQL数据库连接池导致页面登录无法查询问题解决过程

    环境为tomcat+mysql 页面卡在登录界面或者登录后点击查询卡死,tomcat日志 连接池不可达 原因连接池不可用 解决办法 停止tomcat然后等待主机所有连接mysql的链接完全关闭再启动t ...

  10. JAVA实验一20145315

    JAVA实验一实验报告 实验名称 Java开发环境的熟悉 实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用IDEA 编辑.编译.运行.调试Java程序. 实验知识点 JVM.JRE.J ...