请选择 进入手机版 | 继续访问电脑版

喝彩资源网

查看: 700|回复: 0

微信小程序制作跑马灯LED效果

[复制链接]

56

主题

60

帖子

318

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
318
发表于 2017-6-10 22:41:28 | 显示全部楼层 |阅读模式
微信小程序制作跑马灯LED效果
效果如下:
QQ图片20170610223433.png
最近在微信小程序做了个跑马灯效果,感觉不错,一起分享下:
wxml
  1. <view>1 显示完后再显示</view>
  2. <view class="example">
  3.   <view class="marquee_box">
  4.     <view class="marquee_text" style="{{orientation}}:{{marqueeDistance}}px;font-size: {{size}}px;">
  5.       {{text}}
  6.     </view>
  7.   </view>
  8. </view>
  9. <view>2 出现白边后即显示</view>
  10. <view class="example">
  11.   <view class="marquee_box">
  12.     <view class="marquee_text" style="{{orientation}}:{{marqueeDistance2}}px;font-size: {{size}}px;">
  13.       <text>{{text}}</text>
  14.       <text wx:if="{{marquee2copy_status}}" style="margin-left:{{marquee2_margin}}px;">{{text}}</text>
  15.     </view>
  16.   </view>
  17. </view>
复制代码


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|Archiver|手机版|小黑屋|喝彩资源网 ( 豫ICP备15004678号  

GMT+8, 2018-8-20 11:13 , Processed in 0.410180 second(s), 35 queries .

技术支持:喝彩资源网  豫ICP备15004678号

Powered by hecaikeji X3.2 © 2016-2018 hecai Inc.

快速回复 返回顶部 返回列表