轮播图上图标滚动定位

最新推荐文章于 2024-04-27 11:49:36 发布

原创

最新推荐文章于 2024-04-27 11:49:36 发布 · 433 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用uniapp实现直播头部轮播图，包含观看人数和播放按钮的绝对定位，解决swiper组件内相对定位问题，确保元素随图片滚动。

uniapp开发：
目标：直播头部的一个轮播图，轮播图左上角和中间分别需要显示观看人数和播放按钮，且需要随着图片滚动。效果如图：
在这里插入图片描述

用了uniapp的组件 swiper，按钮是绝对定位（absolute），但是相对定位（relative）不能放在swiper-item上，因为会破坏组件的定位计算方式，导致白屏。
最终将相对定位定在了最外面的box上
HTML代码如下：

<!-- 头部轮播 -->
<view class="swiper-box">
	<swiper :indicator-dots="false" :circular="true" :autoplay="true" :interval="3000" :duration="1000">
		<swiper-item v-for