微信小程序顶部通知文字水平无限滚动

方法1：

使用uni-app组件库里的uni-notice-bar组件，里面有个属性scrollable，设置为true，文字就会单行水平滚动
除此之外，还有speed属性，控制文字滚动的速度；showIcon属性，是否显示左侧喇叭图标；showClose属性，是否显示右侧关闭按钮；showGetMore,是否显示右侧查看更多图标....

方法2

除了用组件库里的组件，还可以用微信方法自己写一个封装组件；

<!--html部分：-->
<view class="container">
  <!--此为实现一个喇叭图标-->
  <view class="container1">
    <icon class="iconfont icon-gonggao"/>
  </view>
  <!--此为实现滑动文字的盒子-->
  <view class="container2">
    <view class="gun" style="transform: translateX({{moveDistance}}px);">
      <!--这里必须使用真实的DOM节点才可以，rich-text标签不行，因为rich-text标签用虚拟DOM来渲染内容，wx.createSelectorQuery获取不到需要滚动文字的宽度-->
      <text class="gunn">在这里，使用世界前沿的人工智能技术，为用户甄选海量的高清美图，用更流畅，更快捷，更精准的搜索体验，带你去发现多彩的世界。</text>
    </view>
  </view>
</view>

/**css部分：*/
/**顶部文字滑动*/
.container {
  width: 100%;
  height: 70rpx;
  display: flex;
}
.container1{
  width: 10%;
  height: 70rpx;
  text-align: center;
}
.container1 icon{
  font-size: 40rpx;
  line-height: 70rpx;
}
.container2{
  width: 85%;
  left: 10%;
  height: 70rpx;
  white-space: nowrap;
  overflow: hidden;
}
.gunn{
  line-height: 70rpx;
  font-size: 28rpx;
  color: darkgray;
}

Page({
  data: {
    timer:0,
    moveDistance:100,//文字移动的距离
    loadingWidth:0,//容器宽度
    letterWidth:0,//文字距离左边距的距离
  },
 
  onLoad() {
    this.initSwiper();
  },
 
  // 事件处理函数
  initSwiper: function () {
    //wx.createSelectorQuery()返回一个 SelectorQuery 对象实例，如果是在自定义组件或包含自定义组件的页面中，需要加上.in(this),不然得不到数据
    let query=wx.createSelectorQuery().in(this);
    //boundingClientRect 返回类名是container的节点信息，从而得到容器宽度
    query.select('.container').boundingClientRect((res)=>{
      this.data.loadingWidth=parseInt(res.width);
    }).exec()
    //原理同上，得到文字距离左边距的距离
    query.select('.gunn').boundingClientRect((res)=>{
      this.data.letterWidth=parseInt(res.width);
      this.moveText();
    }).exec()
  },
 
  moveText:function () {
    //设置定时器，100毫秒执行一次，文字移动2px
    this.data.timer=setInterval(()=>{
      this.setData({
        moveDistance:this.data.moveDistance-2
      })
      //如果文字移动距离大于文字本身的宽度，定时器结束，重新开始循环
      if(this.data.moveDistance <= -this.data.letterWidth ){
        this.setData({
          moveDistance:this.data.loadingWidth*0.85
        })
        clearInterval(this.data.timer)
        this.moveText()
      } 
    },100)
  }
})

这个方法在抖音小程序或者原生js里也能用,不过获取节点信息的方法要改一下，原理就是先获得容器宽度和文本宽度，然后设置定时器来移动文字，然后进行水平滚动，理解了很简单的！