uniapp技巧-滚动组件

最近的项目做了一个信息展示，客户的需求改了，因为一屏展示太多了，想多屏，还不加分页，只能增加滚动。

查询了好多资料，也测试了好多组件，最后选定了一种滚动组件。使用方法如下：

1、找到uniapp的组件插件市场

https://ext.dcloud.net.cn/

搜索滚动

在里面找到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,

}

}

页面部分：

<maoScroll :data="data" :showNum="showNum" :lineHeight="lineHeight" :animationScroll="animationScroll" :animation="animation">

<template v-slot="{line}">

<view class="line">

<view class="col1">{{line.col1}}</view>

<view class="col2">{{line.col2}}</view>

<view class="col3">{{line.col3}}</view>

</view>

</template>

</maoScroll>

6、设置样式

可以根据自己的需要修改，这个样式主要针对的h5版本，所以采用的px

<style>

.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;}

</style>

7、成功

这是官方的成品图，借来用用

中间碰到的问题终于找到解决方法，还是挺开心的，积累积累。

相关链接：

https://ext.dcloud.net.cn/

https://ext.dcloud.net.cn/plugin?id=4850