uni小程序跑马灯效果-Toy模板网

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

写在前面

前几天帮一个朋友咋小程序上加一个类似于跑马灯的效果，本自己手写了一个。（代码和截图都在下方）

效果展示

等我截图~~~

代码展示（布局代码）

主要就是图片css哪里加了一个“ flex-shrink: 0;”，因为只是本地的一个功能，所以我就图片数据就写死了，需要的自己改数据结构，对于你来说应该不难。

 <view class="manhe">
        <view class="picture">
          <image src="../../static/images/pao/1.png" alt="" srcset="">
          <image src="../../static/images/pao/2.png" alt="" srcset="">
          <image src="../../static/images/pao/3.png" alt="" srcset="">
          <image src="../../static/images/pao/4.png" alt="" srcset="">
          <image src="../../static/images/pao/5.png" alt="" srcset="">
          <image src="../../static/images/pao/6.png" alt="" srcset="">
          <image src="../../static/images/pao/7.png" alt="" srcset="">
          <image src="../../static/images/pao/8.png" alt="" srcset="">
          <image src="../../static/images/pao/9.png" alt="" srcset="">
          <image src="../../static/images/pao/10.png" alt="" srcset="">
          <image src="../../static/images/pao/11.png" alt="" srcset="">
          <image src="../../static/images/pao/12.png" alt="" srcset="">
        </view>
 </view>

css代码（其实主要就是用了动画）

.manhe {
  width: 560rpx;
  background: #fff;
  border: 10rpx solid #ff9933;
  border-radius: 6px;
  position: absolute;
  bottom: 196rpx;
  left: 50%;
  transform: translateX(-50%);

  .picture {
    width: 100%;
    padding: 10rpx;
    display: flex;
    // flex-wrap: nowrap;
    // justify-content: space-between;
    overflow: hidden;
    image {
      flex-shrink: 0;
      width: 100rpx;
      height: 80rpx;
      padding-right: 10rpx;
      animation: myfirst2 6s linear infinite;
    }

    image:hover {
      animation: myfirst2 5s linear infinite paused;
    }

    @keyframes myfirst2 {
      0% {
        transform: translateX(30px);
      }

      100% {
        transform: translateX(-70px);
      }
    }
  }
}

文章来源地址https://www.toymoban.com/news/detail-532562.html

到了这里，关于uni小程序跑马灯效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！