用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

微信小程序-文字跑马灯效果

纸飞机 2018-3-8 09:33

作者:江北小乔,来自原文地址 效果 wxml1 显示完后再显示 {{text}} 2 出现白边后即显示 {{text}} {{text}} wxss.example { display: block; width: 100%; height: 100rpx; ...

作者:江北小乔,来自

原文地址


效果

wxml

  1. 1 显示完后再显示
  2. class="example">
  3. class="marquee_box">
  4. class="marquee_text" style="{{orientation}}:{{marqueeDistance}}px;font-size: {{size}}px;">
  5. {{text}}
  6. 2 出现白边后即显示
  7. class="example">
  8. class="marquee_box">
  9. class="marquee_text" style="{{orientation}}:{{marqueeDistance2}}px;font-size: {{size}}px;">
  10. {{text}}
  11. wx:if="{{marquee2copy_status}}" style="margin-left:{{marquee2_margin}}px;">{{text}}

wxss

  1. .example {
  2. display: block;
  3. width: 100%;
  4. height: 100rpx;
  5. }
  6. .marquee_box {
  7. width: 100%;
  8. position: relative;
  9. }
  10. .marquee_text {
  11. white-space: nowrap;
  12. position: absolute;
  13. top: 0;
  14. }

js

  1. // pages/home/marquee/marquee.js
  2. Page({
  3. data: {
  4. text: '这是一条会滚动的文字滚来滚去的文字跑马灯,哈哈哈哈哈哈哈哈',
  5. marqueePace: 1,//滚动速度
  6. marqueeDistance: 0,//初始滚动距离
  7. marqueeDistance2: 0,
  8. marquee2copy_status: false,
  9. marquee2_margin: 60,
  10. size: 14,
  11. orientation: 'left',//滚动方向
  12. interval: 20 // 时间间隔
  13. },
  14. onShow: function () {
  15. // 页面显示
  16. var vm = this;
  17. var length = vm.data.text.length * vm.data.size;//文字长度
  18. var windowWidth = wx.getSystemInfoSync().windowWidth;// 屏幕宽度
  19. vm.setData({
  20. length: length,
  21. windowWidth: windowWidth,
  22. marquee2_margin: length < windowWidth ? windowWidth - length : vm.data.marquee2_margin//当文字长度小于屏幕长度时,需要增加补白
  23. });
  24. vm.run1();// 水平一行字滚动完了再按照原来的方向滚动
  25. vm.run2();// 第一个字消失后立即从右边出现
  26. },
  27. run1: function () {
  28. var vm = this;
  29. var interval = setInterval(function () {
  30. if (-vm.data.marqueeDistance < vm.data.length) {
  31. vm.setData({
  32. marqueeDistance: vm.data.marqueeDistance - vm.data.marqueePace,
  33. });
  34. } else {
  35. clearInterval(interval);
  36. vm.setData({
  37. marqueeDistance: vm.data.windowWidth
  38. });
  39. vm.run1();
  40. }
  41. }, vm.data.interval);
  42. },
  43. run2: function () {
  44. var vm = this;
  45. var interval = setInterval(function () {
  46. if (-vm.data.marqueeDistance2 < vm.data.length) {
  47. // 如果文字滚动到出现marquee2_margin=30px的白边,就接着显示
  48. vm.setData({
  49. marqueeDistance2: vm.data.marqueeDistance2 - vm.data.marqueePace,
  50. marquee2copy_status: vm.data.length + vm.data.marqueeDistance2 <= vm.data.windowWidth + vm.data.marquee2_margin,
  51. });
  52. } else {
  53. if (-vm.data.marqueeDistance2 >= vm.data.marquee2_margin) { // 当第二条文字滚动到最左边时
  54. vm.setData({
  55. marqueeDistance2: vm.data.marquee2_margin // 直接重新滚动
  56. });
  57. clearInterval(interval);
  58. vm.run2();
  59. } else {
  60. clearInterval(interval);
  61. vm.setData({
  62. marqueeDistance2: -vm.data.windowWidth
  63. });
  64. vm.run2();
  65. }
  66. }
  67. }, vm.data.interval);
  68. }
  69. })
鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏