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

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

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、到这里就结束啦，完结撒花