Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
xuan.chen
committed
Dec 6, 2020
1 parent
377b4ee
commit 7028c82
Showing
19 changed files
with
1,017 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,108 @@ | ||
| <template> | ||
| <vue-seamless-scroll | ||
| :data="listData" | ||
| :class-option="classOption" | ||
| class="warp" | ||
| > | ||
| <ul class="ul-item"> | ||
| <li class="li-item" v-for="(item, index) in listData" :key="index"></li> | ||
| </ul> | ||
| </vue-seamless-scroll> | ||
| </template> | ||
|
|
||
| <script> | ||
| import vueSeamlessScroll from 'vue-seamless-scroll' | ||
| import echarts from 'echarts' | ||
| export default { | ||
| name: 'Example09Basic', | ||
| components: { | ||
| vueSeamlessScroll | ||
| }, | ||
| data () { | ||
| return { | ||
| listData: [1, 2, 3, 4, 5, 6], | ||
| classOption: { | ||
| limitMoveNum: 2, | ||
| direction: 3, | ||
| } | ||
| } | ||
| }, | ||
| methods: { | ||
| drawChart (dom) { | ||
| const myChart = echarts.init(dom) | ||
| myChart.setOption({ | ||
| tooltip: { | ||
| trigger: 'item', | ||
| formatter: '{a} <br/>{b}: {c} ({d}%)' | ||
| }, | ||
| legend: { | ||
| orient: 'vertical', | ||
| left: 10, | ||
| data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] | ||
| }, | ||
| series: [ | ||
| { | ||
| name: '访问来源', | ||
| type: 'pie', | ||
| radius: ['50%', '70%'], | ||
| avoidLabelOverlap: false, | ||
| label: { | ||
| show: false, | ||
| position: 'center' | ||
| }, | ||
| emphasis: { | ||
| label: { | ||
| show: true, | ||
| fontSize: '30', | ||
| fontWeight: 'bold' | ||
| } | ||
| }, | ||
| labelLine: { | ||
| show: false | ||
| }, | ||
| data: [ | ||
| { value: 335, name: '直接访问' }, | ||
| { value: 310, name: '邮件营销' }, | ||
| { value: 234, name: '联盟广告' }, | ||
| { value: 135, name: '视频广告' }, | ||
| { value: 1548, name: '搜索引擎' } | ||
| ] | ||
| } | ||
| ] | ||
| }); | ||
| } | ||
| }, | ||
| mounted () { | ||
| // echart渲染放到setTimeout宏任务,这时vue-seamless-scroll组件内部复制完成 | ||
| setTimeout(() => { | ||
| document.querySelectorAll('.li-item').forEach(dom => { | ||
| this.drawChart(dom); | ||
| }); | ||
| }, 0); | ||
| }, | ||
| } | ||
| </script> | ||
|
|
||
| <style lang="scss" scoped> | ||
| .warp { | ||
| width: 240px * 3; | ||
| height: 210px; | ||
| margin: 0 auto; | ||
| overflow: hidden; | ||
| ul { | ||
| list-style: none; | ||
| padding: 0; | ||
| margin: 0 auto; | ||
| &.ul-item { | ||
| display: flex; | ||
| .li-item { | ||
| width: 240px; | ||
| height: 200px; | ||
| margin-right: 10px; | ||
| border: 1px solid #000; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| <template> | ||
| <vue-seamless-scroll :data="listData" class="warp" ref="seamlessScroll"> | ||
| <ul class="item"> | ||
| <li v-for="(item, index) in listData" :key="index"> | ||
| <span class="title" v-text="item.title"></span> | ||
| <span class="date" v-text="item.date"></span> | ||
| </li> | ||
| </ul> | ||
| </vue-seamless-scroll> | ||
| </template> | ||
|
|
||
| <script> | ||
| import vueSeamlessScroll from 'vue-seamless-scroll' | ||
| export default { | ||
| name: 'Example10Basic', | ||
| components: { | ||
| vueSeamlessScroll | ||
| }, | ||
| data () { | ||
| return { | ||
| listData: [{ | ||
| 'title': '无缝滚动第一行无缝滚动第一行', | ||
| 'date': '2017-12-16' | ||
| }, { | ||
| 'title': '无缝滚动第二行无缝滚动第二行', | ||
| 'date': '2017-12-16' | ||
| }, { | ||
| 'title': '无缝滚动第三行无缝滚动第三行', | ||
| 'date': '2017-12-16' | ||
| }, { | ||
| 'title': '无缝滚动第四行无缝滚动第四行', | ||
| 'date': '2017-12-16' | ||
| }, { | ||
| 'title': '无缝滚动第五行无缝滚动第五行', | ||
| 'date': '2017-12-16' | ||
| }, { | ||
| 'title': '无缝滚动第六行无缝滚动第六行', | ||
| 'date': '2017-12-16' | ||
| }, { | ||
| 'title': '无缝滚动第七行无缝滚动第七行', | ||
| 'date': '2017-12-16' | ||
| }, { | ||
| 'title': '无缝滚动第八行无缝滚动第八行', | ||
| 'date': '2017-12-16' | ||
| }, { | ||
| 'title': '无缝滚动第九行无缝滚动第九行', | ||
| 'date': '2017-12-16' | ||
| }], | ||
| } | ||
| }, | ||
| mounted() { | ||
| setTimeout(() => { | ||
| this.listData[0] = { | ||
| title: '我的第一条的title，我被更新了。', | ||
| date: 'date1' | ||
| } | ||
| this.listData[1] = { | ||
| title: '我的第二条的title，我被更新了。', | ||
| date: 'date2' | ||
| } | ||
| this.listData[2] = { | ||
| title: '我的第三条的title，我被更新了。', | ||
| date: 'date3' | ||
| } | ||
| this.listData[3] = { | ||
| title: '我的第四条的title，我被更新了。', | ||
| date: 'date4' | ||
| } | ||
| this.listData.push() | ||
| // listData length无变化，仅仅是属性变更，手动调用下组件内部的reset方法 | ||
| this.$refs.seamlessScroll.reset() | ||
| }, 2000); | ||
| }, | ||
| } | ||
| </script> | ||
|
|
||
| <style lang="scss" scoped> | ||
| .warp { | ||
| height: 270px; | ||
| width: 360px; | ||
| margin: 0 auto; | ||
| overflow: hidden; | ||
| ul { | ||
| list-style: none; | ||
| padding: 0; | ||
| margin: 0 auto; | ||
| li, | ||
| a { | ||
| display: block; | ||
| height: 30px; | ||
| line-height: 30px; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| font-size: 15px; | ||
| } | ||
| } | ||
| } | ||
| </style> |
Oops, something went wrong.