微信小程序——文字水平循环滚动

前言：有时候页面上需要放一个通告或者通知，成一行文字的形式，从右到左滑动直至全部消失之后，继而从最右侧出现，以此循环往复，接着小河码就带领大家在微信开发者工具中实现该特效，如果有幸被观众老爷们看到，希望能够点个赞哦。

1、在该页面的.wxml中按照如下编写代码

<!--为最外层的大盒子-->
<view class="container">


  <!--此为实现一个喇叭图标-->
  <view class="container1">
    <icon class="iconfont icon-gonggao"/>
  </view>


  <!--此为实现滑动文字的盒子-->
  <view class="container2">
    <view class="gun" style="transform: translateX({{moveDistance}}px);">
      <text class="gunn">在这里，使用世界前沿的人工智能技术，为用户甄选海量的高清美图，用更流畅，更快捷，更精准的搜索体验，带你去发现多彩的世界。</text>
    </view>
  </view>



</view>

2、在该文件下的.wxss中按照如下编写代码

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

3、在该文件下的.js文件中按照如下编写代码

Page({
  data: {
    timer:0,
    moveDistance:100,
    loadingWidth:0,
    letterWidth:0,
  },

  onLoad() {
    this.initSwiper();
  },

  // 事件处理函数
  initSwiper: function () {
    let query=wx.createSelectorQuery();
    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 () {
    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()
      } 
    },50)
  }
})

4、插播一下，喇叭图标的获取方式

此图标是在阿里巴巴矢量图标库中获取的：链接如下（或者自行搜索）：

iconfont-阿里巴巴矢量图标库

在微信小程序的使用步骤为：

1、首先在顶部搜索自己所需要的图标

2、然后选择自己需要的图标，之后选择加入购物车，然后选择添加至项目

 3、然后点击更新代码，可能会涉及到设置选中项目配置中的svg Base64，之后点击链接复制更新生成的代码。

 4、然后进入微信开发者工具新建一文件夹(ico

@import "../../iconfont/iconfont.wxss";

nfont)，和一文件(iconfont.wxss)，然后粘贴刚才复制的代码进这个文件，如下图所示：

 5、使用时，首先在要使用页面的.wxss文件中引入iconfont.wxss文件

@import "../../iconfont/iconfont.wxss";

 6、页面引用

<icon class="iconfont icon-gonggao"/>

7、到这里就结束啦，完结撒花