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

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

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

效果图:

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

最新资讯
比亚迪涨3%报251.8港元,完成超299亿港元定增

比亚迪涨3%报251.8港

比亚迪涨至3.197%报251.8港元。成交额106.4亿港元,市值
消息称百度正式启动回港二次上市计划 官方未置评

消息称百度正式启动回

1月21日,有消息称,百度回港第二次上市终于正式启动,并确
2020胡润品牌榜:贵州茅台居首位 天猫排名第2美团跃居第7

2020胡润品牌榜:贵州茅

200强中国品牌价值总和9.2万亿元,比去年增加两成。
新冠病毒为什么会变异

新冠病毒为什么会变异

专家称,病毒遗传物质侵入细胞,疯狂复制中出现的错误便是
我们为什么会做梦

我们为什么会做梦

梦是如何产生的?梦的功能又是什么?梦是睡眠中真实的思维
富士康关联公司新增被执行人信息 执行标的100万元

富士康关联公司新增被

中国执行信息公开网显示,百佳泰信息技术(北京)有限公司新
最新文章
详解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支持,