微信小程序实现文字从右往左无限滚动（类似公告）

布局页面wxml

<scroll-view class="container"><view class="scrolltxt"><view class="marquee_box"><view class="marquee_text" style="transform: translateX(-{{marqueeDistance}}px)"><text>{{text}}</text><text style="margin-right:{{marquee_margin}}px;"></text><text style="margin-right:{{marquee_margin}}px;">{{text}}</text>        </view></view></view>
</scroll-view>

样式页面 wxss

.container {height: 100%;display: flex;flex-direction: column;justify-content: space-between;box-sizing: border-box;}
.scrolltxt{padding:0 20rpx;background:#f8f8f8;}
.marquee_box {position:relative;color:#333;height:90rpx;display:block;overflow:hidden;}
.marquee_text {white-space: nowrap;position:absolute;top:0;font-size:14px;height:90rpx;line-height:90rpx;}

小程序 js页面

Page({/*** 页面的初始数据* Linyufan.com*/data: {text: "这是一条测试公告，看看效果怎么样，2019年3月23日",marqueePace: 1,//滚动速度marqueeDistance: 0,//初始滚动距离marquee_margin: 30,size:14,interval: 20 // 时间间隔},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {  },onShow: function () {var that = this;var length = that.data.text.length * that.data.size;//文字长度var windowWidth = wx.getSystemInfoSync().windowWidth;// 屏幕宽度//console.log(length,windowWidth);that.setData({length: length,windowWidth: windowWidth});that.scrolltxt();// 第一个字消失后立即从右边出现},scrolltxt: function () {var that = this;var length = that.data.length;//滚动文字的宽度var windowWidth = that.data.windowWidth;//屏幕宽度if (length > windowWidth){var interval = setInterval(function () {var maxscrollwidth = length + that.data.marquee_margin;//滚动的最大宽度，文字宽度+间距，如果需要一行文字滚完后再显示第二行可以修改marquee_margin值等于windowWidth即可var crentleft = that.data.marqueeDistance;if (crentleft < maxscrollwidth) {//判断是否滚动到最大宽度that.setData({marqueeDistance: crentleft + that.data.marqueePace})}else {//console.log("替换");that.setData({marqueeDistance: 0 // 直接重新滚动});clearInterval(interval);that.scrolltxt();}}, that.data.interval);}else{that.setData({ marquee_margin:"1000"});//只显示一条不滚动右边间距加大，防止重复显示} }
})

其他演示直接浏览小程序即可。

微信小程序实现文字从右往左无限滚动（类似公告）相关推荐

微信小程序：字幕效果，实现文字从右向左无限滚动
(其实我想的很简单,写个animate动画,从0%到100%:left:100%到-100%,需要控制的是计算文字长度和屏幕宽度,控制速度) 布局页面wxml <view class=" ...
微信小程序居中、居右、居底和横向、纵向布局，文字在图片中间，网格布局
微信小程序居中.居右.横纵布局 1.水平垂直居中(相对父类控件) 方式一:水平垂直居中父类控件: display: flex;align-items: center;//子控件垂直居中justify ...
c语言小程序跑马灯,微信小程序实现文字跑马灯效果
本文实例为大家分享了微信小程序实现文字跑马灯的具体代码,供大家参考,具体内容如下 wxml 1 显示完后再显示 Box"> 2 出现白边后即显示 Box"> {{tex ...
微信小程序图片文字水平垂直居中对齐
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到网站微信小程序图片文字水平垂直居中对齐要实现水平垂直居中可使用如下方案给父元素设置 .td {dis ...
小程序如何做成html的滚动字幕,微信小程序实现文字滚动
本文实例为大家分享了微信小程序实现文字滚动的具体代码,供大家参考,具体内容如下 wxml: 显示完后再显示: {{text}} 出现白边后即显示: {{text}} {{text}} wxss: .e ...
微信小程序实现文字滚动
微信小程序实现文字滚动 1.wxml <view class="container"><view class='list' animation="{{a ...
php实现微信小程序推送,实现微信小程序模板消息不受限制、无限主动推送
需求背景基于微信的通知渠道,微信小程序为开发者提供了可以高效触达用户的模板消息能力,在用户本人与小程序页面有交互行为后触发,通过微信聊天列表中的服务通知可快捷进入查看消息,点击查看详情还能跳转到下发 ...
微信小程序设置文字样式white-space失效
微信小程序中的换行今天遇到了一个多段文字展示的效果,试了很多种方法设置样式等都实现不了,最后发现,在微信小程序中,不能使用view为文字做换行等操作 HTML中的换行可以直接使用标签,但是微信小程 ...
微信小程序实现文字转语音
很多现有的语音转化都只支持web端和app,如百度和谷歌等: SpeechSynthesisUtterance:https://blog.csdn.net/Qcg0223/articl ...

微信小程序实现文字从右往左无限滚动（类似公告）

微信小程序实现文字从右往左无限滚动（类似公告）相关推荐

最新文章

热门文章