微信小程序实现文字滚动

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

wXMl：

view>
    显示完后再显示:/view>
    view class="example">
     view class="box">
 view class="text" style="{
{
orientation}
}
:{
{
marqueeDistance}
}
    px;
font-Size: {
{
size}
}
    px;
    ">
  {
{
text}
}
     /view>
     /view>
    /view>
    view>
    出现白边后即显示:/view>
    view class="example">
     view class="box">
 view class="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;
}
.box {
     width: 100%;
     posITion: relative;
}
.text {
     white-space: nowrap;
     position: absolute;
     top: 0;
}
    

js：

Page({
 data: {
 text: '滚动文本1234567890abcdefghijklmnopqrstuvmxyz', 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);
 }
}
    )

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• 微信小程序 scroll-view隐藏滚动条详解
• 微信小程序scroll-view实现滚动穿透和阻止滚动的方法
• 详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
• 微信小程序顶部可滚动导航效果
• 微信小程序scroll-view组件实现滚动动画
• 微信小程序-滚动消息通知的实例代码
• 微信小程序滚动Tab实现左右可滑动切换
• 微信小程序实现多行文字滚动效果
• 微信小程序实现水平垂直滚动
• 微信小程序实现无缝滚动

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！