微信小程序实现滚动字幕

wxml部分：

<view class="notice"><image src="../../static/horn.png" mode="widthFix"></image><view class="notice_desc"><view style="transform: translateX(-{{ distance }}px);"><text style="margin-right:{{ space }}px;"></text><text id="mjltest">{{ text }}</text><text style="margin-right:{{ space }}px;"></text><text>{{ text }}</text></view></view>
</view>

wxss部分：

.notice {width: 92%;height: 56rpx;line-height: 56rpx;background-color: #fff;box-shadow: 0 3rpx 6rpx 1rpx rgba(0,97,6,0.4100);border-radius: 30rpx;position: absolute;top: 730rpx;left: 30rpx;display: flex;
}.notice image {width: 36%;margin: 10rpx 18rpx;
}.notice .notice_desc {margin-right: 40rpx;font-size: 28rpx;color: #333;overflow: hidden;white-space: nowrap;
}

js部分：

Page({data: {text: "需要滚动的字幕",step: 1, // 滚动速度distance: 360, // 初始滚动距离space: 300,interval: 20 // 时间间隔},onShow: function() {var that = this;var query = wx.createSelectorQuery();// 选择idquery.select('#mjltest').boundingClientRect();query.exec(function(res) {var length = res[0].width;var windowWidth = wx.getSystemInfoSync().windowWidth; // 屏幕宽度that.setData({length: length,windowWidth: windowWidth,space:windowWidth});that.scrollling(); // 第一个字消失后立即从右边出现});},scrollling: function() {var that = this;var length = that.data.length; // 滚动文字的宽度var windowWidth = that.data.windowWidth; // 屏幕宽度var interval = setInterval(function() {var maxscrollwidth = length + that.data.space;var left = that.data.distance;if (left < maxscrollwidth) { // 判断是否滚动到最大宽度that.setData({distance: left + that.data.step})} else {that.setData({distance: 0 // 直接重新滚动});clearInterval(interval);that.scrollling();}}, that.data.interval);}
})

微信小程序实现滚动字幕相关推荐

微信小程序-通知滚动小提示
代码地址如下: http://www.demodashi.com/demo/14044.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
php文字左右滚动通告,微信小程序左右滚动公告栏效果代码实例
这篇文章主要介绍了微信小程序左右滚动公告栏效果代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下代码如下 {{notice}} x data: ...
IOS微信小程序页面滚动导致滚动穿透的解决办法
IOS微信小程序页面滚动导致滚动穿透的解决办法当微信小程序页面存在弹窗并且有可滚动的列表时,IOS默认的页面滚动会使弹窗滚动列表失焦,从而出现弹窗列表无法滚动的情况第一步第二步当微信小程序页面 ...
微信小程序：公告字幕滚动播放（文字跑马灯效果）
一.需求公告文字仅限200字公告内容仅限一行文字显示公告内容持续滚动二.解决思路使用动画API(Animation.translate),完成移动动画使用定时器API(setInterva ...
java滚动字幕的实现的实训_微信小程序实现自上而下字幕滚动
本文实例为大家分享了微信小程序实现字幕滚动的具体代码,供大家参考,具体内容如下需求: 实现框内的文字自下而上的自动循环滚动. 解决方案: 第一种方法: 经查询,最一开始实现字幕滚动是使用的微信小程序 ...
微信小程序实现滚动到指定位置
微信小程序的按钮点击后滚动到页面内的指定位置. wxml内容 <view class="box1" bindtap="toComment">查看回答 ...
range 小程序picker_微信小程序picker滚动选择器使用详解
今天修改小程序做章节内容筛选使用到了picker滚动选择器,看了官方文档和一些网上的文章后,终于算是弄明白了这个组件的使用,这里把我对这picker滚动选择器的使用记录下: picker基础使用 pi ...
微信小程序弹窗滚动穿透问题
解决点击穿透在原生中使用el.addEventListener("touchstart", () => { console.log("ok"); }, ...
微信小程序|上下滚动页面实现
欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 欢迎加入团队圈子!与作者面对面!直接点击! 案例描述微信小程 ...

微信小程序实现滚动字幕

微信小程序实现滚动字幕相关推荐

最新文章

热门文章