首页 > 小程序 > 微信小程序滚动字幕怎么设置?

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

发布:2018-01-03 17:31:00来源:Tim 阅读:564

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

mtxx01.jpg

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

  效果

  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);

  }

  })

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

  推荐阅读:

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

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

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


发表评论
微微风
昵称

最新资讯

更多

打开能源贸易价值的金钥匙—区块链技术

1

网红区块链可以给生活带来什么不一样的感觉!

2

新加坡将举办世界区块链峰会!

3

eco生态币是不是骗局呢?

4

eco生态币可信度有多高?

5

ECO生态数字币到底是什么?

6

eos币行情,2018年eos币的行情分析

7

比特币漏洞:在国家网络掌控之中

8

区块链可以帮助公众拥有货币化数据!

9

区块链年薪超30万,这个数字真不高!

10

热门点击

更多
1打开能源贸易价值的金钥匙—区块链技术
2网红区块链可以给生活带来什么不一样的感觉!
3新加坡将举办世界区块链峰会!
4元征利用区块链打造车链!
5全球首个区块链机器人解决协同难题!
6区块链传销一月积累8000万即跑路!如何识别?
7惊传方文山代写区块链白皮书,后证实为虚假消息!
8区块链这个风口进入到手机行业!
9房地产区块链到底是怎么回事?
10入局区块链之前请进行摸底测试!