微信小程序实现公告自动滚动效果 Published on Jul 4, 2023 in 随笔教程 with 0 comment  ```html 公告栏 {{item.title}} ``` ```css /* 公告栏 */ .notice { display: flex; justify-content: center; align-items: center; /* margin-top: 10rpx */ } .notice-contain { box-shadow: 0px 1px 1px 1px rgba(202, 199, 199, 0.993); display: flex; flex-direction: row; background: #FFFFFF; width: 700rpx; height: 82rpx; border-radius: 10px; justify-content: center; align-items: center; } .notice-containTitle { font-weight: bold; font-size: 32rpx; position: relative; /* top: 0; */ left: 14rpx; } .notice-containTitle::after { position: absolute; top: -4rpx; left: 110rpx; content: ""; display: block; background: #AAAAAA; width: 2px; height: 54rpx; } .tab-right { height: 55rpx; width: 80%; line-height: 55rpx; padding-left: 70rpx; } .swiper-item { font-size: 28rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 2px; } ``` ```javascript msgList: [{ title: "视频无水印解析免费无限次使用~" }, { title: "视频无水印解析免费无广告使用~" }] ``` 本文由 admin 创作,采用 知识共享署名4.0 国际许可协议进行许可。本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名。