动画实现滚动公告栏

最新推荐文章于 2025-02-24 15:54:51 发布

原创

最新推荐文章于 2025-02-24 15:54:51 发布 · 573 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css

本文介绍如何在小程序中利用JavaScript的wx.createSelectorQuery()获取元素属性，结合CSS，实现滚动公告栏的动画效果。通过设置translateX属性在X轴上平移，达到动态滚动的目的。

小程序动画实现滚动公告栏

HTML：


<view class="box">
  <view class="left"></view>
  <view id="abc" class="content_box">
    <view class="content_text" animation="{
  
  {animationData}}"><text id="text">滚动公告栏内容</text></view>
  </view>
  <view class="right"></view>
</view>

js：

Page({

  data: {

    // 公告栏参数
    duration:5000,
    sliderValue:null,
    wrapWidth:0,
    textWidth:0,
    timer:null,
    animation:null

  },

  initAnimation(){
    let that = this;
    this.data.animation = wx.createAnimation({
      // duration:2000,
      timingFunction:'linear'
    })
  
    let query = wx.createSelectorQuery();
    query.select('.content_box').boundingClientRect();
    query.select('#text').boundingClientRect();
    query.exec(
      (res) =>{
        console.log(res);
        that.setData({
          wrapWidth: res[0].width,
          textWidth: res[1].widt