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


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 相关文章推荐
firefox中JS读取XML文件
Dec 21 Javascript
Div自动滚动到末尾的代码
Oct 26 Javascript
jquery下checked取值问题的解决方法
Aug 09 Javascript
客户端js判断文件类型和文件大小即限制上传大小
Nov 20 Javascript
Javascript动态创建div的方法
Feb 09 Javascript
javascript实现简单的html5视频播放器
May 06 Javascript
浅谈JavaScript 标准对象
Jun 02 Javascript
JS之获取样式的简单实现方法(推荐)
Sep 13 Javascript
JS中input表单隐藏域及其使用方法
Feb 13 Javascript
vue2 中如何实现动态表单增删改查实例
Jun 09 Javascript
浅谈Vue 数据响应式原理
May 07 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
May 21 Javascript
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地址引用(php地址引用的效率问题)
2012/03/23 PHP
ThinkPHP快速入门实例教程之数据分页
2014/07/01 PHP
PHP PDOStatement对象bindpram()、bindvalue()和bindcolumn之间的区别
2014/11/20 PHP
JS拖动技术 关于setCapture使用
2010/12/09 Javascript
javascript中关于执行环境的杂谈
2011/08/14 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
2013/12/17 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
2014/01/02 Javascript
confirm的用法示例用于按钮操作时确定是否执行
2014/06/19 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
2015/11/29 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
关于cookie的初识和运用(js和jq)
2016/04/07 Javascript
详解vue-router2.0动态路由获取参数
2017/06/14 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
2018/04/21 Javascript
使用rollup打包JS的方法步骤
2018/12/05 Javascript
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
layui动态渲染生成select的option值方法
2019/09/23 Javascript
vue和iview实现Scroll 数据无限滚动功能
2019/10/31 Javascript
Vue强制组件重新渲染的方法讨论
2020/02/03 Javascript
webpack+express实现文件精确缓存的示例代码
2020/06/11 Javascript
python中input()与raw_input()的区别分析
2016/02/27 Python
Python使用matplotlib模块绘制图像并设置标题与坐标轴等信息示例
2018/05/04 Python
Python生成随机验证码代码实例解析
2020/06/09 Python
python爬取代理ip的示例
2020/12/18 Python
详解css3 flex弹性盒自动铺满写法
2020/09/17 HTML / CSS
html5使用canvas画空心圆与实心圆
2014/12/15 HTML / CSS
澳大利亚家具商店:Freedom
2020/12/17 全球购物
毕业自荐信
2013/12/16 职场文书
八一演出活动方案
2014/02/03 职场文书
学校联谊协议书
2014/09/16 职场文书
北京导游词
2015/02/12 职场文书
用人单位聘用意向书
2015/05/11 职场文书
JavaScript 实现页面滚动动画
2021/04/24 Javascript
使用canvas仿Echarts实现金字塔图的实例代码
2021/11/11 HTML / CSS
python图像处理 PIL Image操作实例
2022/04/09 Python
create-react-app开发常用配置教程
2022/06/25 Javascript