最近的项目做了一个信息展示,客户的需求改了,因为一屏展示太多了,想多屏,还不加分页,只能增加滚动。
查询了好多资料,也测试了好多组件,最后选定了一种滚动组件。使用方法如下:
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