Vue 封装可向左向右查看图片列表的组件

时间:2022-01-02 05:40:16
实现了图片列表展示的功能,一次性可查看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>