WeChat applet component marquee example sharing-Mini Program Development-php.cn

WeChat applet component marquee example sharing

小云云

Release： 2018-01-06 10:48:00

Original

2998 people have browsed it

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>

Copy after login

2. wxml

<view class="marquee_container" style="--marqueeWidth--:{{-marquee.width}}em">
  <view class="marquee_text">{{marquee.text}}</view>
</view>

Copy after login

The input to wxml is json Object

marquee:{
  width:12,
  text:&#39;hello world&#39;
}

Copy after login

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;
}

Copy after login

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;
 }
}

Copy after login

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 &#39;../component/marquee/marquee.js&#39;;

var options = Object.assign(marquee, {
 data: {
  motto: &#39;Hello World&#39;,
  userInfo: {},
  marquee: { text: &#39;你好，中国！hello,world!&#39; }
 },
 onLoad: function () {
  // ...

  const str = this.data.marquee.text;
  const width = this.getWidth(str);
  console.log(&#39;width&#39;,width);
  this.setData({ [`${&#39;marquee&#39;}.width`]: width });
 }
});
Page(options);

Copy after login

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!