vue实现人员展示页面

功能描述

实现人员展示
实现无限滚动添加

display.vue

<template><div class="display"><div class="displayBox"><header><span>人员展示页面</span></header><div class="displayL"><ul class="personalDiaplayLine"><li v-for=" ( item,index ) in personalDiaplayLine" :key="index"><ul><li v-for="( ite,ind ) in personalDiaplay" :key="ind "><img :src="ite.url" alt="" width="100%" height="87%"><span>{{ ite.title }}</span></li></ul></li></ul></div></div></div>
</template>
<script>
export default {data() {return {personalDiaplayLine: null,personalDiaplay: [{ title: '江户时代那时的撒娇', url: require('@/assets/avatar.jpg') },{ title: '是中国时代好青年', url: require('@/assets/avatar.jpg') },{ title: '是中国时代好青年', url: require('@/assets/avatar.jpg') },{ title: '是中国时代好青年', url: require('@/assets/avatar.jpg') },{ title: '是中国时代好青年', url: require('@/assets/avatar.jpg') },{ title: '是中国时代好青年', url: require('@/assets/avatar.jpg') },{ title: '是中国时代好青年', url: require('@/assets/avatar.jpg') },{ title: '是中国时代好青年', url: require('@/assets/avatar.jpg') },{ title: '是中国时代好青年', url: require('@/assets/avatar.jpg') },{ title: '是中国时代好青年', url: require('@/assets/avatar.jpg') },{ title: '是中国时代好青年', url: require('@/assets/avatar.jpg') },{ title: '为人正直，乐于助人是中国时代好青年', url: require('@/assets/avatar.jpg') },{ title: '为人正直，乐于助人是中国时代好青年', url: require('@/assets/avatar.jpg') },{ title: '为人正直，乐于助人是中国时代好青年', url: require('@/assets/avatar.jpg') },{ title: '为人正直，乐于助人是中国时代好青年', url: require('@/assets/avatar.jpg') },{ title: '为人正直，乐于助人是中国时代好青年', url: require('@/assets/avatar.jpg') },{ title: '是中国时代好青年', url: require('@/assets/avatar.jpg') },{ title: '是中国时代好青年', url: require('@/assets/avatar.jpg') },{ title: '是中国时代好青年', url: require('@/assets/avatar.jpg') },{ title: '是中国时代好青年', url: require('@/assets/avatar.jpg') },{ title: '是中国时代好青年', url: require('@/assets/avatar.jpg') },{ title: '是中国时代好青年', url: require('@/assets/avatar.jpg') },{ title: '是中国时代好青年', url: require('@/assets/avatar.jpg') },{ title: '是中国时代好青年', url: require('@/assets/avatar.jpg') },{ title: '是中国时代好青年', url: require('@/assets/avatar.jpg') },{ title: '是中国时代好青年', url: require('@/assets/avatar.jpg') },{ title: '为人正直，乐于助人是中国时代好青年', url: require('@/assets/avatar.jpg') },{ title: '为人正直，乐于助人是中国时代好青年', url: require('@/assets/avatar.jpg') },{ title: '为人正直，乐于助人是中国时代好青年', url: require('@/assets/avatar.jpg') },{ title: '为人正直，乐于助人是中国时代好青年', url: require('@/assets/avatar.jpg') },{ title: '为人正直，乐于助人是中国时代好青年', url: require('@/assets/avatar.jpg') },{ title: '是中国时代好青年', url: require('@/assets/avatar.jpg') }]}},mounted() {this.sumLine()},methods: {sumLine() {if (parseInt(this.personalDiaplay.length / 9) < 1) {this.personalDiaplayLine = 1} else {this.personalDiaplayLine = parseInt(this.personalDiaplay.length / 9)}}}
}
</script>
<style lang="scss" scoped >
*{margin: 0;padding: 0;list-style: none;
}
.display {width: 100%;height: 100%;background-color: salmon;display: flex;align-items: center;justify-content: center;background-color: #eff1f4;
}
header {width: 100%;height: 60px;line-height: 60px;border-bottom: 1px solid #f0f0f0;
}
header span {font-size: 20px;letter-spacing: 1px;margin-left: 2%;
}
.displayBox {width: 98%;height: 98%;background-color: white;
}
.displayL {width: 96%;height: calc(100% - 60px);margin-left: 2%;.personalDiaplayLine{width: 100%;height:100%;overflow: auto;overflow-x: hidden;overflow-y: auto;li{width: 100%;height: 30%;margin-top: 1%;ul{width: 100%;height: 100%;li{width: 10%;height: 100%;border: 1px solid #97A8BE;margin-left: 1%;float: left;position: relative;top: -7.5%;overflow: hidden;img{position: relative;}span{width: 100%;height: 10%;text-align: center;line-height: -5%;overflow: hidden;display: inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position: absolute;top: 90%;left: 0;font-size: 15px;}}}}}
}</style>

效果图

vue实现人员展示页面相关推荐

【vue】 vue项目开发卡片展示页面----菜品管理
vue项目开发卡片展示页面----菜品管理对话框表单获取父组件数据子组件dishform 对话框表单样式 methods 中的dataInit方法获取父组件传来的数据 <script> ...
前端app调起摄像头只显示在页面_猫也能看得懂的教程之一分钟使用Vue搭建简单Web页面...
本教程适合人群: 已经了解过过html.js.css,想深入学习前端技术的小伙伴有前端开发经验.但是没有使用过Vue的小伙伴有过其他编程经验,对前端开发感兴趣的小伙伴学习本教程之后你将会: 了解 ...
从产品展示页面谈谈Hybris系列之二: DTO, Converter和Populator
文章作者:张健(Zhang Jonathan) 上一篇文章从产品展示页面谈谈Hybris的特有概念和设计结构我们讲解了Hybris一些特有的概念以及大体架构,并且介绍了Facade层里是如何定义D ...
vue 手机端答题页面_从0开始，手把手教你用Vue开发一个答题App
项目演示项目源码配套讲解视频教程说明本教程适合对Vue基础知识有一点了解,但不懂得综合运用,还未曾使用Vue从头开发过一个小型App的读者.本教程不对所有的Vue知识点进行讲解,而是手把手一步 ...
vue+element ui 设置页面全屏全屏和退出全屏的切换
vue+element ui 设置页面全屏全屏和退出全屏的切换方式1 screenfull 插件 // 属性 screenfull.isFullscreen; // 判断当前页是否全屏返回类型 ...
Vue移动端搜索页面的历史记录写法
Vue移动端搜索页面的历史记录写法前言本文用于记录对于搜索页的历史记录的学习. 预览先上两张图,分别为展示隐藏搜索列表和历史记录. html部分 <template><hips ...
Vue 使用i8n, 中英文页面版本切换
vue-i18n 多语言版本处理 1. 安装vue-i18n npm install vue-i18n 2.在main.js中引入并使用 import VueI18n from 'vue-i18n'V ...
html meta 跳转白屏,vue使用keepAlive之后页面空白白屏？route和router什么区别呢？...
问题描述: vue使用keepAlive之后页面空白,报错:TypeError: Cannot read property 'keepAlive' of undefined... 为了实现页面跳转之后 ...
Document.visibilityState 页面监听 vue中实现离开页面时计时停止：停止计时后从上一次开始计时
概述 Document.visibilityState (只读属性), 返回document的可见性, 即当前可见元素的上下文环境. 由此可以知道当前文档(即为页面)是在背后, 或是不可见的隐藏的标签 ...

vue实现人员展示页面

vue实现人员展示页面

功能描述

display.vue

效果图

vue实现人员展示页面相关推荐

最新文章

热门文章