微信小程序——文字水平循环滚动-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序——文字水平循环滚动。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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