最近的项目做了一个信息展示，客户的需求改了，因为一屏展示太多了，想多屏，还不加分页，只能增加滚动。
查询了好多资料，也测试了好多组件，最后选定了一种滚动组件。使用方法如下：
1、找到uniapp的组件插件市场
搜索滚动
在里面找到MAOUI的滚动组件
2、点击进入组件信息页面，选择hbuilder导入插件自动安装
3、查看需要添加的工程中是否已经添加该组件
4、需要使用的页面引用组件
import maoScroll from '@/components/mao-scroll/mao-scroll.vue';
export default {
components: {
maoScroll
},
5、在需要使用的页面对应需要的数据和设置项
在这里可用界面里面的动态数据的例子测试，如果是静态例子，评论里面的设置方法
【有些人可能直接写静态数据去测，会以为显示不出来（因为组件内部缺少）。 data:{ immediate: true, handler(nVal, oVal) { this.init(); } }】
这一段没有看明白，有明白的大神给解释一下。我是用这种方法解决的：
mounted() {
this.init();
},
然后在页面的data部分：
data() {
return{
data: this.datas,//这个是提前写好的需要滚动显示的静态数据
count: 30,
showNum: 5,
lineHeight: 60,
animationScroll: 800,
animation: 2000,
}
}
页面部分：
6、设置样式
可以根据自己的需要修改，这个样式主要针对的h5版本，所以采用的px
.col3{ width: 60px; text-align: center; display: inline-block;font-size: 12px; line-height: 20px;overflow: hidden; white-space:nowrap;} .col1{ width: 60px; text-align: center; display: inline-block; font-size: 12px;line-height: 20px;overflow: hidden;white-space:nowrap;} .col2{ width: 60px; text-align: center; display: inline-block; font-size: 12px;line-height: 20px; overflow: hidden;white-space:nowrap;}7、成功
这是官方的成品图，借来用用
中间碰到的问题终于找到解决方法，还是挺开心的，积累积累。
相关链接：
