微信小程序-文字跑马灯

效果

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

// 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.样式 /*首页跑马灯效果开始*/ .container_marquee {display: flex;flex-direction: column;justify-content: space-b ...
c语言小程序跑马灯,微信小程序实现跑马灯效果（完整代码）
在微信小程序里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的CSS样式控制,没用到JS,效果如下图: Wxml代码:一个人活着就是为了让更多的人更好的活着! Wxss代码:/*首页跑马灯 ...
java 走马灯程序,详解微信小程序实现跑马灯效果（附完整代码）
在微信小程序里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的CSS样式控制,没用到JS,效果如下图: Wxml代码: 一个人活着就是为了让更多的人更好的活着! Wxss代码: /*首页跑 ...
微信小程序实现跑马灯效果（完整代码）
在微信小程序里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的CSS样式控制,没用到JS,效果如下图: Wxml代码:  < ...
微信小程序实现跑马灯效果(自定义组件详解)
首先看一下效果吧首先我们在项目根目录建一个公共文件夹,这里我命名为components 在components里面创建一个组件, dt-horse-race-lamp > index 最后 ...
微信php echo换行,微信小程序文字显示换行问题
微信小程序文字显示换行问题小程序文字显示换行问题用户在上传图文时,输入换行符.导致我在拿到数据后JSON.parse的时候报错. 大概这样的结构: [{ text:'落魄前端在线炒粉!!!' ...
微信小程序文字转语音并播放
深知像我这种小白对不懂得绝望,希望可以帮助到别人,本文步骤较为详细在微信小程序中,识别语音转文字或者文字转语音,可以使用官方自带的插件:微信同声传译插件使用方法: 第一步:首先登录微信公众平台,找 ...
微信小程序 - 文字收缩与展开
wxml 1 <view class='containers'> 2 <text class="content {{ellipsis?'ellipsis':'unellip ...
微信小程序文字下标_微信小程序开发中，怎么给导航栏图标下面加上文本？...
微信小程序头部叫导航栏,底端的叫标签,他们的设置都在app.json. 导航栏设置在window里: "window": { "backgroundTextStyle&q ...
微信小程序文字链接生成二维码，扫描识别二维码
给大家推荐一个非常实用且有趣的微信小程序:超实用工具箱. 超实用工具箱小程序里面包含了很多小工具,涵盖了工作.日常生活和娱乐版块.具体的功能大家可以打开微信扫描下方二维码,即刻体验: 接下来给大家介绍 ...

微信小程序-文字跑马灯

微信小程序-文字跑马灯相关推荐

最新文章

热门文章