uni-app 列表消息滚动的实现_uniapp 消息弹框滚动

一、插件下载地址：https://ext.dcloud.net.cn/plugin?id=1179

二、将插件里面的common文件复制到自己项目中去，在自己项目中App.vue中引入css（@import 'common/uni.css';）

三、将tony-scroll.vue实例复制到自己项目页面去使用即可得到滚动效果

示例代码：

<template>
	<view class="home">
		<view class="list uni-flex uni-column">
			<view class="wrap-item">
				<view class="lis uni-flex uni-column" :animation="animationData">
					<view class="uni-flex uni-column" v-for="(item, index) in list" :key="index">
						<view class="swiper-item item_title uni-flex list_item">
							<view class="userlistmsg" :class="index%2?'cor':'non'">
								<view>{{ item.time }}</view>
								<view>{{ item.phone }}</view>
								<view>{{ item.prize }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
 
<script>
export default {
		data() {
			return {
				list: [{
						time: '陈先生1',
						phone: '201903.1',
						prize: '领取成功'
					},
					{
						time: '陈先生2',
						phone: '201903.1',
						prize: '领取成功'
					},
					{
						time: '陈先生3',
						phone: '201903.1',
						prize: '领取成功'
					},
					{
						time: '陈先生4',
						phone: '201903.1',
						prize: '领取成功'
					},
					{
						time: '陈先生5',
						phone: '201903.1',
						prize: '领取成功'
					},
					{
						time: '陈先生6',
						phone: '201903.1',
						prize: '领取成功'
					}
				],
				scrollHeight: 0, //向上滚动距离
				height: 0, //.lis高度（滚动框高度）
				animationData: {} ,//动画对象
			}
		},
	components: {},
	mounted() {
		console.log("11")
		this.prizeScroll();
	},
	methods: {
		getHeight(Class) {
			let query = uni.createSelectorQuery().in(this);
			query
				.selectAll(Class)
				.boundingClientRect(data => {
					this.height = data[0].height;
				})
				.exec();
		},
		prizeScroll() {
			let speed = 50;
			let animation = uni.createAnimation({
				duration: this.getHeight('.lis') / speed,
				timingFunction: 'linear',
				delay: 0
			});
			this.animation = animation;
			setInterval(() => {
				if (this.scrollHeight >= this.height) {
					animation.translateY(0).step();
					this.scrollHeight = 0;
					this.animationData = animation.export();
				} else {
					this.scrollHeight = this.scrollHeight + 1;
					animation.translateY(-this.scrollHeight).step();
					this.animationData = animation.export();
				}
			}, speed);
		}
	}
};
</script>
 
<style>
	page{
		width: 100%;
	}
	.home,.list {
		width: 750upx;
		padding-top: 30upx;
	}
	.userlistmsg{
		width: 100%;
		display: flex;
		justify-content: space-around;
	}
	.cor{
		background: #FFF5F3 ;
	}
</style>