小程序文字滚动组件封装

<!--components/textscroll/index.wxml-->
<view id="tipstext" style="transform: translateX(-{{tips.distance}}px);">
      {{text}}
</view>

JS代码

// components/textscroll/index.ts
Component({
      /**
       * 组件的属性列表
       */
      properties: {
            text: {
                  type: String,
                  default: ""
            }
      },

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

                  step: 1, // 滚动速度
                  distance: 0,
                  interval: 20 // 时间间隔
            },
            timer: null,
      },
      lifetimes: {

            ready() {
                  this.textAnimate();
            },
            detached() {
                  if (this.data.timer) {
                        clearInterval((this as any).data.timer);
                  }
            }

      },
      /**
       * 组件的方法列表
       */
      methods: {
            textAnimate() {
                  if (this.data.timer) {
                        clearInterval((this as any).data.timer);
                  }
                  const tips = this.data.tips;
                  let step = tips.step;
                  let distance = tips.distance;
                  let interval = tips.interval;

                  const query = wx.createSelectorQuery().in(this);
                  // 选择id
                  query.select('#tipstext').boundingClientRect();
                  query.exec((res: any) => {


                        if (res && res.length > 0) {
                              const current = res[0]


                              if (current && current.width) {
                                    const width = current.width;

                                    const timer: any = setInterval(() => {
                                          distance += step;
                                          if (distance >= width) {
                                                distance = 0;
                                          }
                                          this.setData({
                                                tips: { ...tips, distance }
                                          })

                                    }, interval)
                                    this.setData({ timer })
                              }


                        }

                  })
            },
      }
})

使用

  <textscroll text="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" />