What is the function of the component marquee in WeChat Mini Programs
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.
