简单实现微信小程序实现文字从右往左无缝滚动（走马灯）的组件（类似公告）-Toy模板网

这篇具有很好参考价值的文章主要介绍了简单实现微信小程序实现文字从右往左无缝滚动（走马灯）的组件（类似公告）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

文章目录

概要

代码部分

wxss部分

js部分

小结

概要

最近做一个微信小程序项目突发奇想，想到做一个文字无缝滚动的公告，然后查了好多资料发现没看懂他们的想法然后自己想了好久如何才能实现无缝滚动，我发现好多博主发出来的都是不是无缝滚动的，然后想了一下午，到晚上才做好。

代码部分

wxss部分

<view class="container">
<view class="icon"><van-icon name="volume-o" /></view>
<view class="text-wrapper">
    <text class="scroll-text text1" style="left: {{-moveleft}}px;">{{ scrollText }}</text>
    <text class="scroll-text text2" style="left: {{ moveleft2}}px;">{{ scrollText }}</text>
  </view>
</view>

运用了vant weapp中的icon字体图标，官网路径在此组件库

wxss部分

.container {
  display: flex;
  overflow: hidden;
  height: 60rpx;
}
.icon {
  padding:10rpx 20rpx;
  font-size: 18px;
  color: red;
}
.text-wrapper {
  display: flex;
  width: 100%;
  padding: 10rpx 0;
  position: relative;
  overflow: hidden;
  margin-right: 20rpx;
}
.scroll-text {
  white-space: nowrap;
}
.text1 {
  position: absolute;
}
.text2 {
  position: absolute;
}

js部分

这里是封装的组件所有js的代码与页面的有所不同

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 两文本的内容间隔
    interval_widgth: {
      type: Number,
      value: 10
    },
    scrollText:{
      type:String,
      value:'这里是需要无缝滚动的文本，用于检测滚动效果是否正常！'
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

    moveleft:0,
    moveleft2:0,
    text_width:0,
    timer:null
  },

  /**
   * 组件的方法列表
   */
  methods: {

  },
  lifetimes: {
    attached() {
    },
    ready() {
      // 获取内容的宽度
      const query = wx.createSelectorQuery().in(this);
      query.select('.scroll-text').boundingClientRect().exec((res) => {
        this.setData({
          'text_width':res[0].width,
          moveleft2: res[0].width+this.data['interval_widgth']
        })
      });
    },
    detached(){
      clearInterval(this.data.timer);
    }
  },
  pageLifetimes: {
    show() {
      this.data.timer=setInterval(()=>{
        if(this.data.moveleft>=this.data.text_width+this.data.interval_widgth){
          this.setData({
            moveleft:-(this.data.interval_widgth+this.data.text_width)
          })
        };
        if(-(this.data.moveleft2)>=this.data.text_width+this.data.interval_widgth){
          this.setData({
            moveleft2:(this.data.interval_widgth+this.data.text_width)
          })
        };
        this.setData({
          moveleft:this.data.moveleft+2,
          moveleft2:this.data.moveleft2-2
        })
      },20)
     
    },
    hide(){
      clearInterval(this.data.timer);
    }
  }
})