小程序文字循环滚动效果

水深无声 2021-09-10 08:22 493阅读 0赞

> .js文件

Page({
        data:{  
            text: null,
            marqueePace: 1,
            marqueeDistance: 0,
            marquee_margin: 30,
            size: 14,
            interval: 20,
            textid: 0
        },
        onLoad: function () {
            var that = this;
            wx.request({
              url: `${host}api/content?table=info&num=1&recom=3`,
              success: function (res) {
                that.setData({
                  text: res.data[0].title,
                  textid: res.data[0].id,
                });
                let length = that.data.text.length * that.data.size;
                that.setData({
                    length: length,
                    windowWidth: 50
                });
                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;
            var crentleft = that.data.marqueeDistance;
            if (crentleft < maxscrollwidth) {
              that.setData({
                marqueeDistance: crentleft + that.data.marqueePace
              })
            }
            else {
              that.setData({
                marqueeDistance: 0 
              });
              clearInterval(interval);
              that.scrolltxt();
            }
          }, that.data.interval);
        }
        else {
          that.setData({ marquee_margin: "1000" });
        }
      },
    });

> .wxml文件

<scroll-view class="gonggao">
        <navigator url="../news/show/show?id={{textid}}">
          <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>
        </navigator>
      </scroll-view>

> .wxss文件

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