Recently, I found a video of hand-held bullet screen in Douyin, and I thought it was a very interesting application. In this software, you can set up a long paragraph of text, and keep scrolling and broadcasting this paragraph just like the led scrolling advertisement board of merchants. Challenge yourself to create a mini app for hand-held bullets

Of course, canvas can realize many cool functions, but the canvas of small program has a problem of hierarchy. Forms such as input cannot be attached to the canvas, but the bullet screen needs to define the content, background and other bullet layer modules, so we still use common View + CSS to achieve the effect of bullet screen

The effect

demo


  • Support font adjustment
  • Support font dynamic effect
  • Support speed adjustment
  • Support background adjustment
  • Support custom text
  • Support to share

Configuration instructions

wxml

<ui-item item="{{reminderConfig}}" />
Copy the code

js

const Pager = require('.. /.. /components/aotoo/core/index')
const mkHandleBarrage = require('.. /.. /components/modules/handlebarrage')

Pager({
  data: {
    reminderConfig: mkHandleBarrage({
        title: 'Set the content of the barrage'.fontSize: 100.fontSpeed: 8.fontType: 'red'.background: 'black'})}})Copy the code

Title {String} Sets the content of the barrage

FontSize {Number} sets the fontSize

FontSpeed {Number} sets the scrolling speed of the barrage

FontType {String} Sets the barrage effect

Background {String} Sets the barrage background

Only the following default data is supported at this stage

fontSize: [100.150.180].fontSpeed: [0.8.4.3.1.5].fontType: ['douyin'.'shake'.'halo'.'none'].background: ['blink'.'shan'.'red'.'black'.'blue'.'green'.'white'.'gray']
Copy the code