Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "what is the role of the component marquee in WeChat Mini Programs". The editor shows you the operation process through an actual case. The operation method is simple and fast, and it is practical. I hope that this article "what is the role of the component marquee in WeChat Mini Programs" can help you solve the problem.

Detailed explanation of WeChat Mini Programs component marquee example

1. Marquee tag

Html has a marquee tag, which can achieve the effect of horse racing lantern, but Mini Program does not, so it should be realized. Consider using css3's animation implementation here.

This is how html's marquee is used.

Hello world

2. Wxml

{{marquee.text}}

What is passed in wxml is a json object

Marquee: {width:12, text:'hello world'}

And that strange-- marqueeWidth is the variable passed to @ keyframes. Set the variable inline, which can also be obtained in the css file.

3. Wxss

@ keyframes around {from {margin-left: 100%;} to {margin-left: var (--marqueeWidth--); / / var accepts the incoming variable}}. Marquee_container {background-color: # 0099FF; height: 1.2mm; position: relative; width: 100%;}. Marquee_container:hover {animation-play-state: paused; / / does not work}. Marquee_text {display: inline-block; white-space: nowrap; animation-name: around; animation-duration: 5s Animation-iteration-count: infinite; animation-timing-function:linear;}

4. Js

Export default {getWidth: (str) = > {return [] .reduce.call (str, (pre, cur, index, arr) = > {if (str.charCodeAt (index) > 255) {/ / charCode greater than 25is a Chinese character pre++;} else {pre+ = 0.5;} return pre;}, 0);}, getDuration: (str) = > {/ / reserved, set the time return this.getWidth () / 10;} according to the length of the text

The above is the package of the component.

5. Use

/ / wxml// wxss@import ".. / component/marquee/marquee.wxss"; / / jsimport marquee from'.. / component/marquee/marquee.js';var options = Object.assign (marquee, {data: {motto: 'Hello World', userInfo: {}, marquee: {text:' Hello, China! HelloJournal worldview'}, onLoad: function () {/ /... Const str = this.data.marquee.text; const width = this.getWidth (str); console.log ('width',width); this.setData ({[`$ {' marquee'} .width`]: width});}); Page (options); this is the end of the introduction on "what is the role of component marquee in WeChat Mini Programs". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.