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

怼烎@ 2022-12-07 11:56 208阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI4NTI1MA_size_16_color_FFFFFF_t_70][]

一、插件下载地址：[https://ext.dcloud.net.cn/plugin?id=1179][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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI4NTI1MA_size_16_color_FFFFFF_t_70]: /images/20221123/c5efa87056ea47049e05992e57017281.png
[https_ext.dcloud.net.cn_plugin_id_1179]: https://ext.dcloud.net.cn/plugin?id=1179