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

 更新时间:2020年11月18日 09:24:52   作者:林羽凡  
这篇文章主要为大家详细介绍了微信小程序实现文字从右向左无限滚动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

布局页面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"});//只显示一条不滚动右边间距加大,防止重复显示
 } 
 }
})

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

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

相关文章

  • 利用svg实现带加载进度的loading

    利用svg实现带加载进度的loading

    svg是基于XML,由World Wide Web Consortium (W3C)联盟开发的一种开放标准的矢量图形语言,可让你设计激动人心的、高分辨率的Web图形页面。本文将使用svg实现一个带加载进度的loading,需要的可以参考一下
    2022-11-11
  • 分析javascript中9 个常见错误阻碍你进步

    分析javascript中9 个常见错误阻碍你进步

    这篇文章主要介绍了分析javascript中9 个常见错误阻碍你进步的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
    2017-09-09
  • Express无法通过req.body获取请求传递的数据解决方法

    Express无法通过req.body获取请求传递的数据解决方法

    这篇文章主要为大家介绍了Express无法通过req.body获取请求传递的数据解决方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • 基于Typescript与Axios的接口请求管理详解

    基于Typescript与Axios的接口请求管理详解

    接口是一系列抽象方法的声明,是一些方法特征的集合,这些方法都应该是抽象的,需要由具体的类去实现,然后第三方就可以通过这组抽象方法调用,让具体的类执行具体的方法,这篇文章主要给大家介绍了基于Typescript与Axios的接口请求管理的相关资料,需要的朋友可以参考下
    2021-09-09
  • JS+CSS实现带有碰撞缓冲效果的竖向导航条代码

    JS+CSS实现带有碰撞缓冲效果的竖向导航条代码

    这篇文章主要介绍了JS+CSS实现带有碰撞缓冲效果的竖向导航条代码,可实现滑块弹性振动效果的导航效果,涉及jQuery数学运算及页面元素样式的动态操作技巧,需要的朋友可以参考下
    2015-09-09
  • 小程序中监听页面滚动的几种方法实例

    小程序中监听页面滚动的几种方法实例

    这段时间接了一个微信小程序项目,从此打开小程序的新世界大门,下面这篇文章主要给大家介绍了关于小程序中监听页面滚动的几种方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • 在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)

    在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)

    这篇文章主要介绍了在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示),需要的朋友可以参考下
    2017-05-05
  • 详解js对象中属性的两种类型之数据属性和访问器属性

    详解js对象中属性的两种类型之数据属性和访问器属性

    在理解vue底层响应式原理时,了解到,原来对象中的属性,不单单从表面看起来那么简单是key:value形式,而是还有隐藏的内部特性,其中对象内的属性分为两种类型的属性:数据属性和访问器属性,本文将给大家详细介绍一下数据属性和访问器属性,需要的朋友可以参考下
    2023-05-05
  • 关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦

    关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦

    关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦,对于多浏览器的兼容性,需要注意。
    2009-08-08
  • webpack热模块替换(HMR)/热更新的方法

    webpack热模块替换(HMR)/热更新的方法

    模块热替换(HMR)的作用是,在应用运行时,无需刷新页面,便能替换、增加、删除必要的模块,本篇文章主要介绍了webpack热模块替换(HMR)/热更新的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04

最新评论