我用的是vue-seamless-scroll插件，
//安装
npm install vue-seamless-scroll --save
//然后在main.js文件里面引入使用：
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
具体使用方法和参数看链接，我这里只提供我自己的使用方法
注册一个局部组件
<template>
<vue-seamless-scroll :data="listRank" :class-option="classOption" class="seamless-warp">
<ul class="item">
<li v-for="item inlistRank">
<span class="email" v-text="item.email">
<span class="predictRate" v-text="item.predictRate">
</template>
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()
}) },
因为后台还没开发，我用我的初始数据看到的效果大概是这样
