动画实现滚动公告栏

bigboy1010

于 2021-01-09 19:43:02 发布

阅读量549

点赞数

CC 4.0 BY-SA版权

分类专栏：小程序开发文章标签： javascript css

本文链接：https://blog.youkuaiyun.com/bigboy1010/article/details/112402045

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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();
    quer

最低0.47元/天解锁文章