全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[昆明seo优化公司]微信小程序组件 marquee实例分享

  本文主要介绍了微信小程序组件 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文件中也可以获取到该变量■…。[昆明seo优化公司]

  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实例分享的详细内容,更多请关注久澳传媒编程栏目其它相关文章◁○□★!

[昆明seo优化公司]微信小程序组件 marquee实例分享

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。