vue滚动排行榜scroll的实现方法

我用的是vue-seamless-scroll插件，

//安装

npm install vue-seamless-scroll --save

//然后在main.js文件里面引入使用：

import scroll from 'vue-seamless-scroll'

Vue.use(scroll)

具体使用方法和参数看链接，我这里只提供我自己的使用方法

vue-seamless-scroll

注册一个局部组件

scirpt里面要注意的是computed属性

computed: {

classOption () {

return {

direction:0

        }

}

}

style里面可以设置下我们的样式，

.seamless-warp {

box-shadow:0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);

    height:20%;

    width:30%;

    font-size:1.5rem;

    line-height:3rem;

    overflow:hidden;

    color:#f56c6c;

    .item{

.email{

// float:left;

        }

.predictRate{

float:right;

        }

}

}

至此滚动条的容器ok了，然后我们要往里面放数据

data()里面可以放一点初始数据,我这里其实没必要放但为了看一下效果还是先放一下

data () {

return {

listRank:[{

'email':'假的用户1',

            'predictRate':'假的数据1'

        },

            {

'email':'假的用户2',

                'predictRate':'假的数据2'

            },

            {

'email':'假的用户3',

                'predictRate':'假的数据3'

            },

            {

'email':'假的用户4',

                'predictRate':'假的数据4'

            },

            {

'email':'假的用户5',

                'predictRate':'假的数据5'

            }]

}

},

然后就是我们这个是页面加载排行榜，所以要有methods去请求后端

methods:{

getRank(){

this.$api.stock.getRank({}).then(({data})=>{

if(data.status=='0'){

let jsonObj=JSON.parse(data.content);

                for (let i =0; i < jsonObj.length; i++) {

let record = jsonObj[i];

                    let email = record['email'];

                    let predictRate = record['predictRate'];

                    this.listRank.push({

email: email,

                        predictRate: predictRate,

                    });

                }

}else {

this.$message.error(data.message);

            }

})

},

},

然后注意在mounted钩子函数中执行下这个函数

mounted(){

this.$nextTick(()=>{

this.getRank()

})        },

因为后台还没开发，我用我的初始数据看到的效果大概是这样

是滚动的，我这里截图而已