| <template> |
| <scroller> |
| <panel title="Marquee" type="primary"> |
| <marquee |
| :step="marquee.height * 2" |
| :count="marquee.list.length" |
| :interval="marquee.interval" |
| :duration="marquee.duration" |
| :style="{ |
| width: 700, |
| height: marquee.height * 2, |
| backgroundColor: 'rgb(223, 240, 216)', |
| borderRadius: 8, |
| paddingLeft: 10, |
| paddingRight: 10 |
| }" |
| @change="marqueeChange"> |
| <div |
| v-for="(item,i) in marquee.list" |
| :key="i" |
| :style="{ |
| height: marquee.height * marquee.length, |
| paddingTop: marquee.height * 0.5, |
| paddingBottom: marquee.height * 0.5, |
| overflow: 'hidden' |
| }"> |
| <text |
| :style="{ |
| height: marquee.height, |
| color: 'rgb(60, 118, 61)', |
| fontSize: 28 |
| }">{{item.text}}</text> |
| </div> |
| </marquee> |
| </panel> |
| </scroller> |
| </template> |
| |
| <script> |
| module.exports = { |
| data: function () { |
| return { |
| marquee: { |
| height: 30, |
| duration: 1500, |
| interval: 2000, |
| list: [ |
| {text: 'Introducing Bots on Messenger'}, |
| {text: 'Capturing 3D 360-Stereo VR Video'}, |
| {text: 'The Future of Video on Facebook'}, |
| {text: 'Announcing Vue.js 2.0'}, |
| {text: 'Not Your Average Virtual-DOM'}, |
| {text: 'Templates, JSX, or Hyperscript?'} |
| ] |
| } |
| } |
| }, |
| components: { |
| panel: require('../include/panel.vue'), |
| marquee: require('../include/marquee.vue') |
| }, |
| methods: { |
| marqueeChange: function (e) { |
| console.log(e) |
| } |
| } |
| } |
| </script> |