vue手写列表竖向滚动

看看效果图

最近由于项目需求，需要做一个列表的无线循环滚动，由于我们项目没有用UI库，所以手写了一个列表滚动，不过虽然网上很多，但还是想记录下来，话不多说了，上代码!

样式层

<template><div class="scrolList" ref="box" :style="scrolStyle"><div class="top" v-if="showMask"></div> // 这里是加了一个遮罩过度<div class="bottom" v-if="showMask"></div><div class="ul anim" ref="ul" :style="ulStyle"><template v-for="(item,index) in list"><p class="li" ref="li" :key="index"><span class="item1">{{ item.name }}</span><span class="item2">{{ item.phone }}</span><span class="item3">{{ item.desc }}</span></p></template></div></div>
</template>

js层

export default {props:{list: {type: Array,require: true},scrolStyle: Object, //可配置容器样式showMask: Boolean},data() {return {config:{height: null},step: 0,liIndex: 0}},mounted() {this.initInfo()setInterval(() => {this.$nextTick(()=>{this.scrol()})this.liIndex++}, 500);},computed: {ulStyle() {return `height: ${this.config.height}px`}},methods: {/*** 初始化高度*/initInfo() {this.config.height = this.$refs.li[0].clientHeight * this.list.length;},/*** 每次20px滚动*/scrol() {this.step += 20//循环数据this.list.push(this.list[this.liIndex])this.$refs.ul.style.transform = `translateY(-${this.step}px)`}}
}

之前是写在页面里，但想了想还是封装成了组件，便于以后再用

样式层

<style lang="scss">.scrolList{position: relative;overflow: hidden;.top{position: absolute;z-index: 66;top: 0;height: 0.8rem;width: 100%;background-image: linear-gradient(to top,rgba(0,0,0,0) 0%,red 50%);;}.bottom{position: absolute;bottom: 0;height: 0.8rem;width: 100%;z-index: 66;background-image: linear-gradient(to bottom,rgba(0,0,0,0) 0%,red 50%);;}.ul{margin-top: 0.6rem;.li{display: flex;transform: translate(0);height: 0.8rem;font-size: 0.4rem;text-align: left;line-height: 0.8rem;.item1 {flex: 1;}.item2{flex: 3;}.item3{flex: 3;}}}}.anim {transition: all 0.5s linear;}
</style>

其实实现的思路有很多，利用margin，position等都可以实现，我利用的是tsranslate，谢谢阅读

vue手写列表竖向滚动相关推荐

Vue · Table：手写横向竖向滚动表格，分页、条数设置
效果: <template><div><div class="pages-tables" :style="{ height: screeHe ...
基于vue手写一个分屏器，通过鼠标控制屏幕宽度。
基于vue手写一个分屏器,通过鼠标控制屏幕宽度. 先来看看实现效果: QQ录屏20220403095856 下面是实现代码: <template><section class=&qu ...
vue手写一个计算器
计算器大家都不陌生有计算器机器有手机计算器网页计算器! 那么好今天我来给大家手写一个计算器啥都不说上操作请听题:vue手写计算器一个个小方块拼成一个计算器绿色比较好可以缓解视力哦 i ...
Vue手写一个日历组件
工作中遇到一个需求是根据日历查看某一天/某一周/某一月的睡眠报告,但是找了好多日历组件都不是很符合需求,只好自己手写一个日历组件,顺便记录一下. 先来看看设计图是什么样式, 跟其他日历有点不一样,这个 ...
vue 手写签名_签名模仿，把握好三个“度”！
有很多人问我,怎样才能快速模仿签名?特别是模仿出他人无法分辨的笔迹,今天教大家一招,您也可以笔迹模仿的!下面我来揭秘: 简单的说,签字模仿就要把握好三个"度"!即: 速度,角度,力 ...
vue 手写签名_与众不同的手写签批
随着移动互联网+时代的到来,手机成了我们日常生活中不可缺少的必备用品,它不仅仅是一个通讯工具,更是一台移动电脑.因此越来越多的单位把希望在手机上就能完成业务的处理,但也希望能还原线下办理的效果.因此, ...
vue 手写签名_用 Mac 制作手写签名，没打印机也能搞事
得益于基础设施进步,现在想搞点事,比以前快捷便利多了,线下能办的事儿一部分转到了线上,一人一机,操纵于千里. 开展业务,很多地方都会要求你提供签字授权,比如想给网站做个备案,或者想快速走个线上合同, ...
vue 手写签名_手写Promise/Promise.all/Promise.race（手写系列一）
背景几个月没写文章了,愧对关注本专栏的小伙伴.最近有同学提议我出一个手写系列的文章对常见对前端工具.框架.设计模式做一个覆盖.同时有个要求:代码要尽量短小易懂,并且体现原理,让学习者学习过后能在未来 ...
android 层叠轮播,vue手写一个卡片化层叠轮播（支持滑动，移动端连续滚动，点击）...
项目需求,需要写一个卡片化层叠的轮播,找了下插件都没有合适的,于是写了一个展示5个卡片的轮播先看效果图: 卡片化层叠轮播 5个卡片要计算各自的高度,宽度,利用相对定位计算出各自的位置然后trans ...

vue手写列表竖向滚动

vue手写列表竖向滚动相关推荐

最新文章

热门文章