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


Posted in Javascript onMay 26, 2020

本文实例为大家分享了微信小程序实现文字跑马灯的具体代码,供大家参考,具体内容如下

效果

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

wxml

<view>1 显示完后再显示</view>
<view class="example">
 <view class="marquee_box">
 <view class="marquee_text" style="{{orientation}}:{{marqueeDistance}}px;font-size: {{size}}px;">
 {{text}}
 </view>
 </view>
</view>
<view>2 出现白边后即显示</view>
<view class="example">
 <view class="marquee_box">
 <view class="marquee_text" style="{{orientation}}:{{marqueeDistance2}}px;font-size: {{size}}px;">
 <text>{{text}}</text>
 <text wx:if="{{marquee2copy_status}}" style="margin-left:{{marquee2_margin}}px;">{{text}}</text>
 </view>
 </view>
</view>

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
网页源代码保护(禁止右键、复制、另存为、查看源文件)
May 23 Javascript
jqplot通过ajax动态画折线图的方法及思路
Dec 08 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
Jul 08 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
Jun 06 Javascript
node.js实现登录注册页面
Apr 08 Javascript
vue select组件的使用与禁用实现代码
Apr 10 Javascript
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
解决Vue打包后访问图片/图标不显示的问题
Jul 25 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 Javascript
vue根据条件不同显示不同按钮的操作
Aug 04 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
Aug 07 Javascript
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
微信小程序实现滚动消息通知
Feb 02 #Javascript
微信小程序实现YDUI的ScrollTab组件
Feb 02 #Javascript
微信小程序实现YDUI的ScrollNav组件
Feb 02 #Javascript
vuex的简单使用教程
Feb 02 #Javascript
详解VueJS应用中管理用户权限
Feb 02 #Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 #Javascript
使用express+multer实现node中的图片上传功能
Feb 02 #Javascript
You might like
PHP中simplexml_load_string函数使用说明
2011/01/01 PHP
php中array_multisort对多维数组排序的方法
2020/06/21 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
浅析PHP开发规范
2018/02/05 PHP
safari下载文件自动加了html后缀问题
2018/11/09 PHP
Javascript - HTML的request类
2007/01/09 Javascript
学习ExtJS(一) 之基础前提
2009/10/07 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
不得不分享的JavaScript常用方法函数集(上)
2015/12/23 Javascript
探究Javascript模板引擎mustache.js使用方法
2016/01/26 Javascript
原生js实现百叶窗效果及原理介绍
2016/04/12 Javascript
jQuery的ajax下载blob文件
2016/07/21 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
React Native仿美团下拉菜单的实例代码
2017/08/08 Javascript
JavaScript模块详解
2017/12/18 Javascript
详解vue 数组和对象渲染问题
2018/09/21 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
2019/06/06 jQuery
JS中FileReader类实现文件上传及时预览功能
2020/03/27 Javascript
解决vue-loader加载不上的问题
2020/10/21 Javascript
python使用cookielib库示例分享
2014/03/03 Python
零基础写python爬虫之使用urllib2组件抓取网页内容
2014/11/04 Python
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
Python Numpy库安装与基本操作示例
2019/01/08 Python
Python安装与基本数据类型教程详解
2019/05/29 Python
python实现修改固定模式的字符串内容操作示例
2019/12/30 Python
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
2012/12/10 HTML / CSS
5 个强大的HTML5 API 函数推荐
2014/11/19 HTML / CSS
英国在线珠宝店:The Jewel Hut
2017/03/20 全球购物
慕尼黑山地运动、户外服装和体育用品专家:Sporthaus Schuster
2019/08/27 全球购物
防灾减灾活动总结
2014/08/30 职场文书
学习十八大演讲稿
2014/09/15 职场文书
奖学金申请书(范文)
2019/08/14 职场文书
Python代码风格与编程习惯重要吗?
2021/06/03 Python
详解Java实践之适配器模式
2021/06/18 Java/Android
vue代码分块和懒加载非必要资源文件
2022/04/11 Vue.js