这篇文章主要为大家详细介绍了小程序文字跑马灯效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了小程序文字跑马灯效果的具体代码,供大家参考,具体内容如下

market.wxml

<!--pages/market/market.wxml-->
<view>1 显示完后再显示</view>
<view> 
 <view>
 <view>
 {{text}}
 </view>
 </view> 
</view>
 
<view>2 出现白边后即显示</view>
<view>
 <view>
 <view> 
 <text>{{text}}</text>
 <text wx:if="{{marquee2copy_status}}">{{text}}</text>
 </view>
 </view>
</view>

market.wxss

/* pages/market/market.wxss */
.example {
 display: block;
 width: 100%; 
 height: 100rpx;
 
} 
 
.marquee_box {
 width: 100%;
 position: relative;
 
}
 
.marquee_text {
 white-space: nowrap;
 position: absolute;
 top: 0;
 
}

js:

Page({
 
 data: {
 
 text: '这是一条会的文字滚来滚去的文字跑马灯,哈哈哈哈哈哈哈哈',
 marqueePace: 1,//速度 
 marqueeDistance: 0,//初始距离
 marqueeDistance2: 0, 
 marquee2copy_status: false, 
 marquee2_margin: 60, 
 size: 14,
 orientation: 'left',//方向
 interval: 20 // 时间间隔
 
 },
 
 onShow: function () {
 // 页面显示
 var vm = this; 
 var length = vm.data.text.length * vm.data.size;//文字长度
 var windowWidth = wx.getSystemInfoSync().windowWidth;// 屏幕宽度
 vm.setData({
 length: length, 
 windowWidth: windowWidth,
 marquee2_margin: length < windowWidth ? windowWidth - length : vm.data.marquee2_margin//当文字长度小于屏幕长度时,需要增加补白
 });
 
 vm.run1();// 水平一行字完了再按照原来的方向
 vm.run2();// 第一个字消失后立即从右边出现
 
 },
 
 run1: function () {
 var vm = this; 
 var interval = setInterval(function () {
 if (-vm.data.marqueeDistance < vm.data.length) { 
 vm.setData({
  marqueeDistance: vm.data.marqueeDistance - vm.data.marqueePace,
 
 });
 
 } else {
 
 clearInterval(interval);
 vm.setData({
  marqueeDistance: vm.data.windowWidth
 });
 vm.run1();
 
 }
 }, vm.data.interval);
 },
 
 run2: function () { 
 var vm = this;
 var interval = setInterval(function () {
 if (-vm.data.marqueeDistance2 < vm.data.length) {
 // 如果文字到出现marquee2_margin=30px的白边,就接着显示 
 vm.setData({ 
  marqueeDistance2: vm.data.marqueeDistance2 - vm.data.marqueePace,
  marquee2copy_status: vm.data.length + vm.data.marqueeDistance2 <= vm.data.windowWidth + vm.data.marquee2_margin,
 });
 } else {
 if (-vm.data.marqueeDistance2 >= vm.data.marquee2_margin) { // 当第二条文字到最左边时 
  vm.setData({
  marqueeDistance2: vm.data.marquee2_margin // 直接重新
  });
 
  clearInterval(interval);
  vm.run2();
 } else {
 
  clearInterval(interval);
  vm.setData({
  marqueeDistance2: -vm.data.windowWidth
  });
  vm.run2();
 }
 }
 }, vm.data.interval);
 }
})

效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持爱安网。

最新资讯
猿辅导回应获得10亿美元融资:消息不准确

猿辅导回应获得10亿美

针对媒体报道的获得10亿美元融资的消息,猿辅导对新浪科
坚果手机团队:新机或与罗永浩直播间合作 教育硬件将很快推出

坚果手机团队:新机或与

Smartisan 产品经理朱海舟透露,未来将会持续交朋友,希望
营收同比再度下滑 “百岁老人”IBM靠分拆能否焕发活力?

营收同比再度下滑 “

IBM能否借分拆重回历史高光?
美国司法部将在周二向谷歌发起反垄断诉讼

美国司法部将在周二向

据报道,美国司法部将在周二向谷歌发起反垄断诉讼。
“C端搭台、B端唱戏” 双面的名创优品

“C端搭台、B端唱戏”

随着国内门店趋于饱和、国外扩张尚存不确定性及竞争日
西瓜视频投入20亿元补贴 与B站竞争的火药味越来越重了

西瓜视频投入20亿元补

10月20日,在2020西瓜PLAY好奇心大会上,西瓜视频总裁任利
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,