我的编程空间,编程开发者的网络收藏夹
学习永远不晚

微信小程序中组件marquee有什么用

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

微信小程序中组件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" >
  <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 class="lazy" data-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);

看完了这篇文章,相信你对“微信小程序中组件marquee有什么用”有了一定的了解,如果想了解更多相关知识,欢迎关注编程网行业资讯频道,感谢各位的阅读!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

微信小程序中组件marquee有什么用

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

微信小程序中wxs文件有什么用

这篇文章给大家分享的是有关微信小程序中wxs文件有什么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。前言wxs文件是小程序中的逻辑文件,它和wxml结合使用。不同于js, wxs可以直接作用到视图层,而不需要进
2023-06-22

微信小程序中wx.createCanvasContex有什么用

这篇文章主要为大家展示了微信小程序中wx.createCanvasContex有什么用,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“微信小程序中wx.createCanvasContex有什么用”
2023-06-26

微信小程序组件有哪些及怎么用

本文小编为大家详细介绍“微信小程序组件有哪些及怎么用”,内容详细,步骤清晰,细节处理妥当,希望这篇“微信小程序组件有哪些及怎么用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。组件小程序提供了丰富的基础组件给开发者
2023-06-26

微信小程序image组件库怎么用

今天小编给大家分享一下微信小程序image组件库怎么用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。微信小程序image图片
2023-06-26

微信小程序组件contact-button怎么用

这篇文章主要介绍“微信小程序组件contact-button怎么用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“微信小程序组件contact-button怎么用”文章能帮助大家解决问题。contac
2023-06-26

微信小程序组件样式怎么用

这篇文章主要讲解了“微信小程序组件样式怎么用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信小程序组件样式怎么用”吧!组件样式组件对应 wxss 文件的样式,只对组件wxml内的节点生效。
2023-06-26

微信小程序progress组件怎么使用

微信小程序中的progress组件用于显示进度条,可以用来展示加载、上传等进度。以下是使用progress组件的步骤:在wxml文件中添加progress组件,并设置相应的属性值:微信小程序progress组件怎么使用
2024-04-09

微信小程序中wx.showShareImageMenu(Object object)有什么用

这篇“微信小程序中wx.showShareImageMenu(Object object)有什么用”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“微信小程序中wx.showShareImageM
2023-06-26

微信小程序中App()函数有什么用

小编给大家分享一下微信小程序中App()函数有什么用,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!AppApp()App()函数用来注册一个小程序。接受一个object参数,其指定小程序的生命周期函数等。object参数说
2023-06-26

微信小程序中WXSS和CSS有什么用

这篇文章主要介绍了微信小程序中WXSS和CSS有什么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。WXSS(WeiXin Style Sheets)是一套样式语言,用于描述
2023-06-19

微信小程序常用表单组件有哪些

今天小编给大家分享一下微信小程序常用表单组件有哪些的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。1、常用表单组件1.1 bu
2023-06-30

微信小程序开发有什么用

这篇文章主要介绍微信小程序开发有什么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!  微信小程序开发可以做什么?  然后,我们分别看这4个象限的拥抱策略,应该说,如果你的服务是很高频的,而且对于交互和界面体验的要求
2023-06-26

编程热搜

目录