微信小程序组件 marquee实例分享

微信小程序组件 marquee实例详解

1. marquee标签

html是有marquee标签的，可以实现跑马灯效果，但小程序没有，所以要实现。这里考虑使用css3的animation实现。

html的marquee是这样使用的。

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

传入wxml的是个json对象

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

而那个奇怪的--marqueeWidth是给@keyframes传的变量。内联设置变量，css文件中也可以获取到该变量。

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

以上是组件的封装。

5. 使用

// 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);

相关推荐：

html中关于marquee标签的详细介绍

总结marquee 标签的使用实例

通过marquee标签完成滚动效果的纯html代码

以上就是微信小程序组件 marquee实例分享的详细内容，更多内容请关注技术你好其它相关文章！