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

文章目录

目录

文章目录

概要

代码部分

wxss部分

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);
    }
  }
})

成品

 

小结

因为用了定时器可能会有些性能不太好，不过功能完成了，如果有不懂的地方可以私信，希望本篇文章对大家有帮助。