实现了图片列表展示的功能,一次性可查看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.showIndex, this.showListIndex + 4); } else { utils.showAlert(‘右侧已无数据‘); } }, /** * @description 向左点击事件 */ prevStation() { if(this.showListIndex > 0) { this.showPicList = this.watchList.slice(--this.showIndex, this.showListIndex + 4); } else { utils.showAlert(‘左侧已无数据‘); } } } } </script>
子组件 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>
原文地址:https://www.cnblogs.com/minozMin/p/10552445.html
时间: 2024-09-29 16:53:36