找回密码
 立即注册

QQ登录

只需一步,快速开始

微信小程序开发资源

关注:1576

所属分类: 微信开发 微信小程序开发资源



本版块为微信小程序资源分享区,包括微信小程序开发中可能会用到的各类小程序开发工具、小程序demo源码及开发教程等。

快捷导航www.mainetimberworks.com):微信小程序社区微信小程序导航微信小程序资源下载微信小程序官方课程

[更新动态] 微信小程序实现文字跑马灯效果

[复制链接]
查看: 8141|回复: 61
最佳答案
0 

2

主题

2

帖子

55

积分

新人求带

积分
55
本帖最后由 3xdc 于 2017-2-7 10:14 编辑

效果
0634.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. })
复制葡京赌场网站

原文链接:http://blog.csdn.net/qq_24734285/article/details/54174177
回复

使用道具 举报

最佳答案
0 

0

主题

36

帖子

259

积分

新人求带

积分
259
发表于 2017-2-10 08:57:31 | 显示全部楼层
谢谢祢。 感恩
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

56

帖子

2675

积分

专家路上

积分
2675
发表于 2017-3-3 10:50:55 | 显示全部楼层
学无止境啊
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

12

帖子

229

积分

新人求带

积分
229
发表于 2017-3-7 10:24:41 | 显示全部楼层
mark一下
回复

使用道具 举报

最佳答案
0 

2

主题

7

帖子

79

积分

新人求带

积分
79
发表于 2017-4-11 15:15:55 | 显示全部楼层
感谢分享
回复

使用道具 举报

最佳答案
0 

0

主题

11

帖子

93

积分

新人求带

积分
93
发表于 2017-4-19 13:17:57 | 显示全部楼层
感谢分享
回复

使用道具 举报

最佳答案
0 

0

主题

7

帖子

87

积分

新人求带

积分
87
发表于 2017-4-19 16:22:03 | 显示全部楼层
mark mark mark mark
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

5

帖子

52

积分

新人求带

积分
52
发表于 2017-4-24 08:28:10 | 显示全部楼层
谢谢分享
回复

使用道具 举报

最佳答案
0 

0

主题

4

帖子

52

积分

新人求带

积分
52
发表于 2017-4-28 19:32:03 | 显示全部楼层
前来支持你
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

16

帖子

117

积分

新人求带

积分
117
发表于 2017-5-19 11:31:13 | 显示全部楼层
感谢楼主分享,谢谢,谢谢
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.mainetimberworks.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信葡京娱乐网址号

市场合作
[email protected]