成品直播源码推荐,uniapp多行滚动通知
成品直播源码推荐,uniapp多行滚动通知
代码:template部分
1 | <template><br> <view class = "content" ><br> <swiper class = "swiper" <br> vertical <br> circular <br> autoplay <br> interval= "2000" <br> // 重点 display-multiple-items 设置显示多少条数据<br> display-multiple-items='3'><br> <swiper-item><br> <view class="box"><br> <view>多行滚动111</view><br> <view>></view><br> </view><br> </swiper-item><br> <swiper-item><br> <view class="box"><br> <view>多行滚动222</view><br> <view>></view><br> </view><br> </swiper-item><br> <swiper-item><br> <view class="box"><br> <view>多行滚动333</view><br> <view>></view><br> </view><br> </swiper-item><br> <swiper-item><br> <view class="box"><br> <view>多行滚动444</view><br> <view>></view><br> </view><br> </swiper-item><br> </swiper><br> </view><br></template><br> <br><script><br> export default {<br> data() {<br> return {<br> title: 'Hello'<br> }<br> },<br> onLoad() {<br> <br> },<br> methods: {<br> <br> }<br> }<br></script><br> <br><style><br> .swiper{<br> width: 500rpx;<br> /* 高度跟自己需要的子元素更改,我这里是显示3个,每个50rpx 所以是150rpx */<br> height: 150rpx;<br> <br> margin: 50rpx auto;<br> }<br> .box{<br> font-size: 20rpx;<br> height: 50rpx;<br> box-sizing: border-box;<br> display: flex;<br> justify-content: space-between;<br> align-items: center;<br> padding: 0 10rpx;<br> }<br></style> |
以上就是成品直播源码推荐,uniapp多行滚动通知, 更多内容欢迎关注之后的文章
【推荐】还在用 ECharts 开发大屏?试试这款永久免费的开源 BI 工具!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步