小程序中实现滚动字幕

原理：

利用css3的translate,动态修改这个属性值。

.ttt{color:#fff;white-space: nowrap;font-size: 14px;height: 80rpx;line-height: 80rpx;
}

<scroll-view><view class="ttt" style="transform: translateX(-{{distance}}px)"><text style="margin-right:{{space}}px;"></text><text id="mjltest">{{text}}</text><text style="margin-right:{{space}}px;"></text><text>{{text}}</text></view>
</scroll-view>

Page({data: {text: "滚动字幕~~~~",step: 1, //滚动速度distance: 0, //初始滚动距离space: 30,interval: 20 // 时间间隔
  },onShow: function() {var that = this;var query = wx.createSelectorQuery();//选择idquery.select('#mjltest').boundingClientRect()query.exec(function(res) {var length = res[0].width;var windowWidth = wx.getSystemInfoSync().windowWidth; // 屏幕宽度
that.setData({length: length,windowWidth: windowWidth,space:windowWidth});that.scrollling(); // 第一个字消失后立即从右边出现
    });},scrollling: function() {var that = this;var length = that.data.length; //滚动文字的宽度var windowWidth = that.data.windowWidth; //屏幕宽度var interval = setInterval(function() {var maxscrollwidth = length + that.data.space;var left = that.data.distance;if (left < maxscrollwidth) { //判断是否滚动到最大宽度
        that.setData({distance: left + that.data.step})} else {that.setData({distance: 0 // 直接重新滚动
        });clearInterval(interval);that.scrollling();}}, that.data.interval);}
})

转载于:https://www.cnblogs.com/panyujun/p/10287229.html

小程序中实现滚动字幕相关推荐

小程序如何做成html的滚动字幕,小程序两种滚动公告栏的实现方法
先上效果图: 横向滚动栏实现: 网上的几种方案或多或少都有一些问题: 1.setData定时器更新text view的margin-left方法,由于setData的毫秒延时,动画播放起来一卡一卡: ...
小程序中使用fixed自定义弹窗时，底部长页面禁止滚动
原生小程序中可以在弹层上使用catchtouchmove,此事件会阻止向父元素冒泡,mpvue中使用@touchmove.stop="()=>{}".
小程序如何做成html的滚动字幕,微信小程序实现文字滚动
本文实例为大家分享了微信小程序实现文字滚动的具体代码,供大家参考,具体内容如下 wxml: 显示完后再显示: {{text}} 出现白边后即显示: {{text}} {{text}} wxss: .e ...
微信小程序setinterval_微信小程序中setInterval的使用方法
微信小程序中setinterval的使用方法看了下小程序的画布功能,简单的使用了一下,用蹩脚的逻辑做了个 "弹啊弹,弹走鱼尾纹的小球",一起来看下吧.过程不重要主要是画布的使用哦 ...
小程序中使用threejs
webgl调试起初使用threejs 在小程序里面调试,明明是按着官方的文档来,但是会发现开发者工具上面会提示getContext,经过一翻摸索,发现webgl调试只能在手机端调试. 总结:webg ...
微信小程序中实现瀑布流布局和无限加载
瀑布流布局是一种比较流行的页面布局方式,最典型的就是Pinterest.com,每个卡片的高度不都一样,形成一种参差不齐的美感. 在HTML5中,我们可以找到很多基于jQuery之类实现的瀑布流布局插 ...
微信小程序中app.js文件、组件、api
app.js文件: 每个小程序都需要在app.js中调用 App 方法注册小程序实例. App({//App实例化,整个小程序只有一个App实例,全部页面共享onLaunch: function () ...
php地址选择插件,微信小程序中关于三级联动地址选择器的实例分享
本文介绍了微信小程序三级联动地址选择器的实例代码,分享给大家,有需要的可以一起了解一下在一些电商类的小程序中,地址选择这个功能一般是必备的,一般的收货信息都需要有一个能选择省市县的控件,当然也有些人 ...
微信小程序中实现吸顶效果(流畅、不卡顿)
欢迎访问我的个人博客最开始的时候,在小程序中实现吸顶效果,开发工具看起来还挺好的,但是在真机上就会有问题了. 原因是我不停的去 setData 会导致操作反馈延迟严重,无法及时将操作处理结果及时传 ...

小程序中实现滚动字幕

小程序中实现滚动字幕相关推荐

最新文章

热门文章