我用的是vue-seamless-scroll插件，
//安裝
npm install vue-seamless-scroll --save
//然后在main.js文件里面引入使用：
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
具體使用方法和參數(shù)看鏈接，我這里只提供我自己的使用方法
注冊一個局部組件
<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里面可以設(shè)置下我們的樣式，
.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了，然后我們要往里面放數(shù)據(jù)
data()里面可以放一點初始數(shù)據(jù),我這里其實沒必要放但為了看一下效果還是先放一下
data () {
return {
listRank:[{
'email':'假的用戶1',
? ? ? ? ? ? 'predictRate':'假的數(shù)據(jù)1'
? ? ? ? },
? ? ? ? ? ? {
'email':'假的用戶2',
? ? ? ? ? ? ? ? 'predictRate':'假的數(shù)據(jù)2'
? ? ? ? ? ? },
? ? ? ? ? ? {
'email':'假的用戶3',
? ? ? ? ? ? ? ? 'predictRate':'假的數(shù)據(jù)3'
? ? ? ? ? ? },
? ? ? ? ? ? {
'email':'假的用戶4',
? ? ? ? ? ? ? ? 'predictRate':'假的數(shù)據(jù)4'
? ? ? ? ? ? },
? ? ? ? ? ? {
'email':'假的用戶5',
? ? ? ? ? ? ? ? 'predictRate':'假的數(shù)據(jù)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鉤子函數(shù)中執(zhí)行下這個函數(shù)
mounted(){
this.$nextTick(()=>{
this.getRank()
})? ? ? ? },
因為后臺還沒開發(fā)，我用我的初始數(shù)據(jù)看到的效果大概是這樣
