| <template> |
| <scroller> |
| <wxc-panel title="Marquee" type="primary"> |
| <wxc-marquee id="marquee" style="width: 700; height: {{marquee.height * 2}}; background-color: rgb(223, 240, 216); border-radius: 8; padding-left: 10; padding-right: 10;" step="{{marquee.height * 2}}" count="{{marquee.list.length}}" interval="{{marquee.interval}}" duration="{{marquee.duration}}"> |
| <div repeat={{marquee.list}} style="height: {{marquee.height * marquee.length}}; padding-top: {{marquee.height * 0.5}}; padding-bottom: {{marquee.height * 0.5}}; overflow: hidden;"> |
| <text style="height: {{marquee.height}}; color: rgb(60, 118, 61); font-size: 28;">{{text}}</text> |
| </div> |
| </wxc-marquee> |
| </wxc-panel> |
| </scroller> |
| </template> |
| |
| <script> |
| require('weex-components'); |
| |
| module.exports = { |
| data: { |
| 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?'} |
| ] |
| } |
| }, |
| ready: function() { |
| this.initMarquee('marquee'); |
| }, |
| methods: { |
| initMarquee: function(id) { |
| var self = this; |
| |
| var $marquee = this.$vm(id); |
| $marquee.$on('change', function() { |
| console.log('marquee change'); |
| }); |
| } |
| } |
| } |
| </script> |