Uniapp tips - scrolling components

The recent project made an information display , The customer's needs have changed , Because there are too many displays on one screen , Want multiple screens , Without paging , You can only add scrolling .

Inquired a lot of information , Also tested many components , Finally, a scrolling component is selected . How to use it is as follows ：

1、 find uniapp Component plug-in market

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

Search scroll

Find... In it MAOUI The scrolling component of

2、 Click to enter the component information page , choice hbuilder Import plug-ins to install automatically

3、 Check whether the component has been added to the project to be added

4、 Page reference components that need to be used

import maoScroll from '@/components/mao-scroll/mao-scroll.vue';

export default {

components: {

maoScroll

},

5、 Corresponding to the required data and setting items on the required page

Here you can use the example of dynamic data in the interface to test , If it is a static example , Comment on the setting method

【 Some people may write static data directly to test , You will think it doesn't show （ Because there is a lack of ）. data:{ immediate: true, handler(nVal, oVal) { this.init(); } }】

I didn't understand this paragraph , There is a clear God to explain . I solved it this way ：

mounted() {

this.init();

},

And then on the page data part ：

data() {

return{

data: this.datas,// This is the static data written in advance that needs to be scrolled

count: 30,

showNum: 5,

lineHeight: 60,

animationScroll: 800,

animation: 2000,

}

}

Page part ：

<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、 Set the style

It can be modified according to your own needs , This style is mainly aimed at h5 edition , So... Is adopted 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、 success

This is the official finished product , Borrow one

The problems encountered in the middle have finally been solved , I'm still very happy , Accumulation accumulation .

Related links ：

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

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