uni-app无限滚动

<template><view><view class="roll"><view class="roll_con"><view class="roll_list" v-for="(item,index) in rollList" :key="index" :animation="animationData"><view class="roll_dot"></view><view class="roll_title">{{item.title}}</view></view></view></view></view>
</template>

<script>export default {data() {return {rollList:[{title:'11111111111111111111111111111111111'},{title:'22222222222222222222222222222222222'},{title:'33333333333333333333333333333333333'},{title:'44444444444444444444444444444444444'},{title:'55555555555555555555555555555555555'},{title:'66666666666666666666666666666666666'},{title:'77777777777777777777777777777777777'},{title:'88888888888888888888888888888888888'}],animationData:{}}},onReady() {let animation = uni.createAnimation({transformOrigin: "50% 50%",duration:1000,timingFunction: "linear",delay: 0})this.animation = animation;this.animations()},onLoad() {},methods: {// 滚动animations(){let i = -1;let j = 0;let sum = this.rollList.length;setInterval(()=>{if(i == sum){i = 0;}setTimeout(()=>{let arr = this.rollList.splice(i,1)[0];this.rollList.push(arr);this.rollList.splice(i,0,arr);},500)i++;j++;this.animation.translateY(-24 * j).step()this.animationData = this.animation.export();},1000)}}}
</script>

export 方法每次调用后会清掉之前的动画操作

<style>
.roll{padding:32rpx;
}
.roll_con{height:260rpx;overflow:hidden;
}
.roll_list{display:flex;align-items:center;margin-bottom:24rpx;
}
.roll_dot{width:8rpx;height:8rpx;background: #F67001;border-radius:8rpx;
}
.roll_title{width:calc(100% - 24rpx);font-size:28rpx;line-height:28rpx;color: #707070;margin-left:16rpx;display:inline-block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}
</style>

uni-app无限滚动相关推荐

当前元素_90行代码，15个元素实现无限滚动
前言在本篇文章你将会学到: IntersectionObserver API 的用法,以及如何兼容. 如何在React Hook中实现无限滚动. 如何正确渲染多达10000个元素的列表. 无限下拉加 ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
【译】无限滚动加载最佳实践
本文转载自:众成翻译译者:文蔺链接:http://www.zcfy.cc/article/673 原文:https://uxplanet.org/infinite-scrolling-best-p ...
datagridview滚动条自动滚动_掘金上摸鱼的新发现，无限滚动(infinitescroll)
前言上班摸鱼,下班摸鱼,一直摸一直爽.在一次调试的过程中,我按下了F12刚好是掘金的页面,然后把代码输入到控制台之后,顺手滚动了几下右侧的滚动条,发现个问题如下图所示: ‍‍‍‍‍‍‍‍‍‍掘金官网 ...
c# ui 滚动分页_UI备忘单：分页，无限滚动和“加载更多”按钮
c# ui 滚动分页重点 (Top highlight) When you have a lot of content, you have to rely on one of these thre ...
无限滚动重置服务器,简单无限滚动的实现
在使用elementUI组件库的时候,用到了无限滚动这个功能.我没有看源码,直接在网上学习了下实现的思路,然后自己手动编码以下.在此总结下. 假设页面上有一个盒子容器,容器内有一些子元素.容器的高度是 ...
uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
90 行代码，15 个元素教你如何实现无限滚动！
作者 | 前端劝退师责编 | 胡巍巍在本篇文章你将会学到: IntersectionObserver API的用法,以及如何兼容. 如何在React Hook中实现无限滚动. 如何正确渲染多达10 ...
无限滑动的banner图，中间显示大图两边显示一部分，无限滚动
banner图需求中间图片要大两边要显示一部分无限滚动首页代码 MainActivity package com.m.live.myapplication;import android.sup ...
无限滚动加载最佳实践
无限滚动加载最佳实践无限滚动(Infinite scrolling),有时候被称为无尽滚动(endless scrolling),这种技术允许用户在大量内容上滚动,眼中看不到结束的地方.这种技术很简 ...

uni-app无限滚动

uni-app无限滚动

uni-app无限滚动相关推荐

最新文章

热门文章