微信小程序滚动字幕怎么设置？

　　最近，在微信群也有很多朋友问我微信小程序滚动字幕到底怎样设置的问题，为了给大家解答这些问题，所以小编决定写一篇关于微信小程序滚动字幕的文章，为您解答疑问，下面便是小编精心为大家带来的文章，希望能给大家带来一些帮助!

　　微信小程序案例已经是当下最热门的话题，下面将从多方面来谈谈微信小程序开发相关的内容。

　　效果

　　wxml

　　1 显示完后再显示

　　{{text}}

　　2 出现白边后即显示

　　{{text}}

　　{{text}}

　　wxss

　　.example {

　　display: block;

　　width: 100%;

　　height: 100rpx;

　　}

　　.marquee_box {

　　width: 100%;

　　position: relative;

　　}

　　.marquee_text {

　　white-space: nowrap;

　　position: absolute;

　　top: 0;

　　}

　　js

　　// pages/home/marquee/marquee.js

　　Page({

　　data: {

　　text: '这是一条会滚动的文字滚来滚去的文字跑马灯，哈哈哈哈哈哈哈哈',

　　marqueePace: 1,//滚动速度

　　marqueeDistance: 0,//初始滚动距离

　　marqueeDistance2: 0,

　　marquee2copy_status: false,

　　marquee2_margin: 60,

　　size: 14,

　　orientation: 'left',//滚动方向

　　interval: 20 // 时间间隔

　　},

　　onShow: function () {

　　// 页面显示

　　var vm = this;

　　var length = vm.data.text.length * vm.data.size;//文字长度

　　var windowWidth = wx.getSystemInfoSync().windowWidth;// 屏幕宽度

　　vm.setData({

　　length: length,

　　windowWidth: windowWidth,

　　marquee2_margin: length < windowWidth ? windowWidth - length : vm.data.marquee2_margin//当文字长度小于屏幕长度时，需要增加补白

　　});

　　vm.run1();// 水平一行字滚动完了再按照原来的方向滚动

　　vm.run2();// 第一个字消失后立即从右边出现

　　},

　　run1: function () {

　　var vm = this;

　　var interval = setInterval(function () {

　　if (-vm.data.marqueeDistance < vm.data.length) {

　　vm.setData({

　　marqueeDistance: vm.data.marqueeDistance - vm.data.marqueePace,

　　});

　　} else {

　　clearInterval(interval);

　　vm.setData({

　　marqueeDistance: vm.data.windowWidth

　　});

　　vm.run1();

　　}

　　}, vm.data.interval);

　　},

　　run2: function () {

　　var vm = this;

　　var interval = setInterval(function () {

　　if (-vm.data.marqueeDistance2 < vm.data.length) {

　　// 如果文字滚动到出现marquee2_margin=30px的白边，就接着显示

　　vm.setData({

　　marqueeDistance2: vm.data.marqueeDistance2 - vm.data.marqueePace,

　　marquee2copy_status: vm.data.length + vm.data.marqueeDistance2 <= vm.data.windowWidth + vm.data.marquee2_margin,

　　});

　　} else {

　　if (-vm.data.marqueeDistance2 >= vm.data.marquee2_margin) { // 当第二条文字滚动到最左边时

　　vm.setData({

　　marqueeDistance2: vm.data.marquee2_margin // 直接重新滚动

　　});

　　clearInterval(interval);

　　vm.run2();

　　} else {

　　clearInterval(interval);

　　vm.setData({

　　marqueeDistance2: -vm.data.windowWidth

　　});

　　vm.run2();

　　}

　　}

　　}, vm.data.interval);

　　}

　　})

　　以上文章是关于微信小程序滚动字幕的内容，希望可以给您带来最大的帮助，如果您还想了解更多的关于公众号,小程序等的内容，敬请关注微微风。微微风网站致力于解决每一位微信产品使用者和运营者的遇到的所有问题!希望您满意。

　　推荐阅读：

　　微信有什么好玩的小程序?

　　微信小程序中下拉刷新和数据绑定的一些小坑是怎么回事?

　　个人开发者可以做什么小程序?