Home >WeChat Applet >Mini Program Development >WeChat applet component marquee example sharing
This article mainly introduces the relevant information on the detailed explanation of the WeChat applet component marquee example. Friends in need can refer to it. I hope it can help everyone.
Detailed explanation of marquee instance of WeChat applet component
1. marquee tag
html has a marquee tag , can achieve the marquee effect, but the mini program does not, so it must be implemented. Consider using CSS3 animation implementation here.
html's marquee is used like this.
<marquee direction="left" behavior="scroll" scrollamount="1" scrolldelay="0" loop="-1" width="200" height="50" bgcolor="#0099FF" hspace="10" vspace="10"> hello world </marquee>
2. wxml
##
<view class="marquee_container" style="--marqueeWidth--:{{-marquee.width}}em"> <view class="marquee_text">{{marquee.text}}</view> </view>The input to wxml is json Object
marquee:{ width:12, text:'hello world' }And that strange --marqueeWidth is the variable passed to @keyframes. Variables are set inline and can also be obtained in css files.
3. wxss
@keyframes around { from { margin-left: 100%; } to { margin-left: var(--marqueeWidth--);// var接受传入的变量 } } .marquee_container{ background-color: #0099FF; height: 1.2em; position: relative; width: 100%; } .marquee_container:hover{ animation-play-state: paused; // 不起作用 } .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大于255是汉字 pre++; } else { pre += 0.5; } return pre; }, 0); }, getDuration:(str)=>{// 保留,根据文字长度设置时间 return this.getWidth()/10; } }The above is the encapsulation of the component.
5. Use
// wxml <include src="../component/marquee/marquee.wxml" /> // wxss @import "../component/marquee/marquee.wxss"; // js import marquee from '../component/marquee/marquee.js'; var options = Object.assign(marquee, { data: { motto: 'Hello World', userInfo: {}, marquee: { text: '你好,中国!hello,world!' } }, onLoad: function () { // ... const str = this.data.marquee.text; const width = this.getWidth(str); console.log('width',width); this.setData({ [`${'marquee'}.width`]: width }); } }); Page(options);Related recommendations: About marquee in
html Detailed introduction of tags
Summary of usage examples of marquee tag
Pure html code to complete scrolling effect through marquee tag
The above is the detailed content of WeChat applet component marquee example sharing. For more information, please follow other related articles on the PHP Chinese website!