uniapp轮播表

效果图 

 

插件市场直接引入

DCloud插件市场：https://ext.dcloud.net.cn/search?q= 

MaoUI滚动插件：https://ext.dcloud.net.cn/plugin?id=4850 

 

直接使用HBuilderX导入插件 

导入成功之后在根目录components下就会有该插件的源码 

 

我这里稍微自己调整了一下，完整代码如下：

mao-scroll.vue 

<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 :item="item" :index="index" />
				</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(){
				console.log('走')
				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%;
	height: 100%;
	overflow: hidden;
}
</style>

其实就是封装了个组件，没必要重复造轮子，咱们就正常引入就可以 

组件引入 注册

<script>
//引入
import MaoScroll from '../../../components/mao-scroll/index.vue'
export default {
  //注册
  components: { MaoScroll }
}
</script>

模板使用 

<view class="part">
	<view class="title">
		<image src="../../../static/img/energy-conservation/tz.png" mode=""></image>
		<view>可调参数</view>
	</view>
	<view class="table" v-show="ktData.length">
		<MaoScroll
			:data="ktData"
			:showNum="5"
			:lineHeight="80"
			:animationScroll="500"
			:animation="2000"
		>
			<template v-slot="{ item, index }">
				<view :class="['scroll-item', { odd: index % 2 == 0, even: index % 2 != 0 }]">
					<text>{
   
   { item.name }}:</text>
					<text>{
   
   { item.age }}</text>
				</view>
			</template>
		</MaoScroll>
	</view>
	<view class="table noData" v-show="!ktData.length">
		<image src="../../../static/img/svg/empty.svg" mode=""></image>
		<view>暂无数据</view>
	</view>
</view>

简单记录一下吧~~