信息滚动

components/mao-scroll/mao-scroll.vue

@@ -0,0 +1,83 @@
+<template>
+	<view>
+		<view class="maoScroll-main" :style="'height:'+(lineHeight*showLine)+'rpx;'">
+			<view :style="'margin-top:-'+marginTop+'rpx;'">
+				<view v-for="(item,index) in showdata" :key="'maoScroll'+index" :style="'height:'+lineHeight+'rpx;'">
+					<slot :line="item" />
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'maoScroll',
+		data() {
+			return {
+				showdata: [],
+				marginTop: 0,
+				showLine: 0,
+			}
+		},
+		props:{
+			data: {
+				type: Array,
+				default: []
+			},
+			showNum: {
+				type: Number,
+				default: 3,
+			},
+			lineHeight: {
+				type: Number,
+				default: 60,
+			},
+			animationScroll: {
+				type: Number,
+				default: 500,
+			},
+			animation: {
+				type: Number,
+				default: 2000,
+			}
+		},
+		methods: {
+			init: function(){
+				this.showLine = this.showNum < this.data.length ? this.showNum : this.data.length;
+				for(let i = 0; i < this.data.length; i++){
+					this.showdata.push(this.data[i]);
+				}
+				for(let i = 0; i < this.showLine; i++){
+					this.showdata.push(this.data[i]);
+				}
+				setInterval(this.animationFunc, this.animation);
+			},
+			animationFunc: function(){
+				if(this.marginTop >= this.data.length*this.lineHeight){
+					this.marginTop = 0;
+				}
+				let stepTime = this.animationScroll/this.lineHeight;
+				
+				var step = 0;
+				let self = this;
+				var index = setInterval(function(){
+					self.marginTop = self.marginTop + 1;
+					step++;
+					if (step >= self.lineHeight) {
+						clearInterval(index);
+					}
+				}, stepTime);
+			}
+		},
+		watch: {
+			data(outdata, newdata) {
+				this.init();
+			}
+		}
+	}
+</script>
+
+<style>
+	.maoScroll-main{width: 100%;overflow: hidden;}
+</style>

package.json

@@ -0,0 +1,11 @@
+{
+    "id": "mao-scroll",
+    "name": "MaoUI 文字向上滚动 多行滚动 多行滑动",
+    "version": "1.2",
+    "description": "多行文字向上滚动自动消失 适用于公告 新闻 动态 中将结果 最新订单等场景",
+    "keywords": [
+        "公告",
+        "订单",
+        "新闻"
+    ]
+}

pages/user/report.vue

@@ -198,7 +198,21 @@
 			</view>
 
 			<view class="content7">
-				<view class="row1" v-for="(item,index) in ztList">
+				<maoScroll :data="ztList" :showNum="showNum" :lineHeight="lineHeight" :animationScroll="animationScroll" :animation="animation">
+					<template v-slot="{line}">
+						<view class="row1">
+							<view class="zt">
+							<view class="point"></view>在途
+							</view>
+							<view>{{line.startName}}</view>
+							<img src="https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/tmp/jiantou.png" alt="">
+							<view class="">
+								{{line.endName}}
+							</view>
+						</view>
+					</template>
+				</maoScroll>
+				<!-- <view class="row1" v-for="(item,index) in ztList">
 					<view class="zt">
 						<view class="point"></view>在途
 					</view>
@@ -207,7 +221,7 @@
 					<view class="">
 						{{item.endName}}
 					</view>
-				</view>
+				</view> -->
 			</view>
 		</view>
 
@@ -217,7 +231,11 @@
 </template>
 
 <script>
+	import maoScroll from '@/components/mao-scroll/mao-scroll.vue';
 	export default {
+		components:{
+			maoScroll
+		},
 		data() {
 			return {
 				inventoryCost: '',
@@ -344,7 +362,12 @@
 						},
 					]
 				],
-				ztList: []
+				ztList: [],
+				//向上滚动
+				showNum: 8,
+				lineHeight: 80,
+				animationScroll: 5000,
+				animation: 0,
 			}
 		},
 		onLoad: function(option) {
@@ -371,7 +394,7 @@
 						let _name = ''
 						let _count = ''
 						let _data = []
-						if (i < 6) {debugger
+						if (i < 6) {
 							res.data.data[i].biViewInfoList[0].percent = Number(res.data.data[i].biViewInfoList[0]
 								.percentage.substring(0, res.data.data[i].biViewInfoList[0].percentage.length -
 									1))