https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default
npm install vue-seamless-scroll --save
import vueSeamlessScroll from 'vue-seamless-scroll'
Vue.use(vueSeamlessScroll)
import vueSeamlessScroll from 'vue-seamless-scroll'
- 实现方式二:引入vue-seamless-scroll.min.js
<template>
<div class="notice-content">
<div class="notice-theme-div">
<img src="img/icons/announ.png" class="notice-img" alt height="18" />
<span class="notice-theme">{{ infos.servicedesc }}</span>
</div>
<!--滚动内容-->
<vue-seamless-scroll :data="rowsContent" :class-option="optionLeft" class="notice-wrap">
<span class="notice-span" v-for="(item,index) in rowsContent" :key="index">
<a :href="item.url">{{ item.title }}</a>
</span>
</vue-seamless-scroll >
</div>
</template>
<script>
import request from "@/utils/request";
import vueSeamlessScroll from "@/utils/vue-seamless-scroll.min.js";
export default {
components: {
vueSeamlessScroll
},
props: {
item: Object
},
computed: {
infos() {
return this.item.items[0];
},
optionLeft () {
return {
direction: 2
}
}
},
data() {
return {
rowsContent: []
};
},
created() {
this.getInfos(this.infos);
},
methods: {
getInfos(item) {
const _self = this;
const URL = item.url;
const baseparams = {
page: 1,
start: 0,
limit: 20
};
const params = Object.assign({}, baseparams, item.serviceparam);
request.post(URL, params).then(res => {
this.rowsContent = res.newsInfos;
});
}
};
</script>
<style lang="scss" scoped>
</style>