微信小程序实现文字从右向左无限滚动


Posted in Javascript onNovember 18, 2020

本文实例为大家分享了微信小程序实现文字无限滚动的具体代码,供大家参考,具体内容如下

微信小程序实现文字从右向左无限滚动

布局页面wxml

<scroll-view class="container">
 <view class="scrolltxt">
 <view class="marquee_box">
  <view class="marquee_text" style="transform: translateX(-{{marqueeDistance}}px)">
  <text>{{text}}</text>
  <text style="margin-right:{{marquee_margin}}px;"></text>
  <text style="margin-right:{{marquee_margin}}px;">{{text}}</text>  
  </view>
 </view>
 </view>
</scroll-view>

样式页面 wxss

.container {height: 100%;display: flex;flex-direction: column;justify-content: space-between;box-sizing: border-box;}
.scrolltxt{padding:0 20rpx;background:#f8f8f8;}
.marquee_box {position:relative;color:#333;height:90rpx;display:block;overflow:hidden;} 
.marquee_text {white-space: nowrap;position:absolute;top:0;font-size:14px;height:90rpx;line-height:90rpx;}

小程序 js页面

Page({
 /**
 * 页面的初始数据
 * Linyufan.com
 */
 data: {
 text: "这是一条测试公告,看看效果怎么样,2019年3月23日",
 marqueePace: 1,//滚动速度
 marqueeDistance: 0,//初始滚动距离
 marquee_margin: 30,
 size:14,
 interval: 20 // 时间间隔
 },
 
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) { 
 },
 onShow: function () {
 var that = this;
 var length = that.data.text.length * that.data.size;//文字长度
 var windowWidth = wx.getSystemInfoSync().windowWidth;// 屏幕宽度
 //console.log(length,windowWidth);
 that.setData({
  length: length,
  windowWidth: windowWidth
 });
 that.scrolltxt();// 第一个字消失后立即从右边出现
 },
 
 scrolltxt: function () {
 var that = this;
 var length = that.data.length;//滚动文字的宽度
 var windowWidth = that.data.windowWidth;//屏幕宽度
 if (length > windowWidth){
  var interval = setInterval(function () {
  var maxscrollwidth = length + that.data.marquee_margin;//滚动的最大宽度,文字宽度+间距,如果需要一行文字滚完后再显示第二行可以修改marquee_margin值等于windowWidth即可
  var crentleft = that.data.marqueeDistance;
  if (crentleft < maxscrollwidth) {//判断是否滚动到最大宽度
   that.setData({
   marqueeDistance: crentleft + that.data.marqueePace
   })
  }
  else {
   //console.log("替换");
   that.setData({
   marqueeDistance: 0 // 直接重新滚动
   });
   clearInterval(interval);
   that.scrolltxt();
  }
  }, that.data.interval);
 }
 else{
  that.setData({ marquee_margin:"1000"});//只显示一条不滚动右边间距加大,防止重复显示
 } 
 }
})

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
会自动逐行上升的文本框
Jun 30 Javascript
jquery延迟加载外部js实现代码
Jan 11 Javascript
jquery获取当前点击对象的value方法
Feb 28 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
Feb 03 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
Jan 25 Javascript
js代码实现下拉菜单【推荐】
Dec 15 Javascript
Vue.js展示AJAX数据简单示例讲解
Mar 29 Javascript
js实现拖拽上传图片功能
Aug 01 Javascript
Node.js  事件循环详解及实例
Aug 06 Javascript
swiper4实现移动端导航切换
Oct 16 Javascript
ES6扩展运算符和rest运算符用法实例分析
May 23 Javascript
jquery实现广告上下滚动效果
Mar 04 jQuery
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
Dec 28 #Javascript
小程序文字跑马灯效果
Dec 28 #Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
Dec 28 #Javascript
Angular使用Restful的增删改
Dec 28 #Javascript
原生js实现公告滚动效果
Jan 10 #Javascript
微信小程序实现文字无限轮播效果
Dec 28 #Javascript
小程序实现左右来回滚动字幕效果
Dec 28 #Javascript
You might like
php断点续传之如何分割合并文件
2014/03/22 PHP
php模仿asp Application对象在线人数统计实现方法
2015/01/04 PHP
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
php实现微信发红包功能
2018/07/13 PHP
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
深入理解jquery中extend的实现
2016/12/22 Javascript
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
2017/09/18 Javascript
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
浅谈Vue 数据响应式原理
2018/05/07 Javascript
利用Blob进行文件上传的完整步骤
2018/08/02 Javascript
详解vue 项目白屏解决方案
2018/10/31 Javascript
nodejs中各种加密算法的实现详解
2019/07/11 NodeJs
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
JS数组扁平化、去重、排序操作实例详解
2020/02/24 Javascript
javascript 内存模型实例详解
2020/04/18 Javascript
vue 扩展现有组件的操作
2020/08/14 Javascript
[02:17]快乐加倍!DOTA2食人魔魔法师至宝+迎霜节活动上线
2019/12/22 DOTA
python字典多条件排序方法实例
2014/06/30 Python
跟老齐学Python之总结参数的传递
2014/10/10 Python
Pycharm学习教程(5) Python快捷键相关设置
2017/05/03 Python
Python使用min、max函数查找二维数据矩阵中最小、最大值的方法
2018/05/15 Python
Python打开文件,将list、numpy数组内容写入txt文件中的方法
2018/10/26 Python
pytorch实现用Resnet提取特征并保存为txt文件的方法
2019/08/20 Python
多个python文件调用logging模块报错误
2020/02/12 Python
Python利用命名空间解析XML文档
2020/08/10 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
2012/11/13 HTML / CSS
学校安全教育制度
2014/01/31 职场文书
班级体育活动总结
2014/07/05 职场文书
初中教师个人工作总结
2015/02/10 职场文书
重阳节活动主持词
2015/07/04 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python
Redis实现主从复制方式(Master&Slave)
2022/06/21 Redis