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


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 相关文章推荐
JavaScript中的null和undefined解析
Apr 14 Javascript
javascript下拉框选项单击事件的例子分享
Mar 04 Javascript
详解AngularJS中的http拦截
Feb 09 Javascript
pc加载更多功能和移动端下拉刷新加载数据
Nov 07 Javascript
原生js实现可爱糖果数字时间特效
Dec 30 Javascript
vue2.0 自定义日期时间过滤器
Jun 07 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
Sep 28 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
May 31 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
Jun 24 Javascript
基于vue-router 多级路由redirect 重定向的问题
Sep 03 Javascript
如何利用JavaScript编写一个格斗小游戏
Jan 06 Javascript
Vue的过滤器你真了解吗
Feb 24 Vue.js
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
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
php注册登录系统简化版
2020/12/28 PHP
PHP实现163邮箱自动发送邮件
2016/03/29 PHP
PHP基于反射机制实现插件的可插拔设计详解
2016/11/10 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
Laravel相关的一些故障解决
2020/08/19 PHP
THINKPHP-Apache服务器中使用Alias虚拟目录URL重写 隐藏index.php
2021/03/09 PHP
Javascript实例教程(19) 使用HoTMetal(6)
2006/12/23 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
2013/06/24 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
JavaScript截断字符串的方法
2015/07/15 Javascript
jQuery获取URL请求参数的方法
2015/07/18 Javascript
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
JQuery Mobile 弹出式登录框的实现方法
2016/05/28 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
2016/11/29 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
2019/02/10 Javascript
jquery-ui 进度条功能示例【测试可用】
2019/07/25 jQuery
基于纯JS实现多张图片的懒加载Lazy过程解析
2019/10/14 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
在vue中使用Echarts画曲线图的示例
2020/10/03 Javascript
工作中常用js功能汇总
2020/11/07 Javascript
简单使用Python自动生成文章
2014/12/25 Python
Python获取央视节目单的实现代码
2015/07/25 Python
Python的爬虫包Beautiful Soup中用正则表达式来搜索
2016/01/20 Python
python3实现163邮箱SMTP发送邮件
2018/05/22 Python
flask利用flask-wtf验证上传的文件的方法
2020/01/17 Python
Python tkinter实现简单加法计算器代码实例
2020/05/13 Python
在 Python 中使用 7zip 备份文件的操作
2020/12/11 Python
多视角3D逼真HTML5水波动画
2016/03/03 HTML / CSS
初二生物教学反思
2014/02/03 职场文书
党员组织关系介绍信
2014/02/13 职场文书
爱护公物演讲稿
2014/09/09 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
Django框架中视图的用法
2022/06/10 Python