uniapp的轮播图能看见两侧
时间: 2025-04-17 22:37:09 浏览: 22
### uniapp 中实现可看到两侧图片的轮播图效果
为了实现在 `uni-app` 中能够展示两侧图片的轮滑图效果,可以利用 CSS 和 Vue 的组合功能来创建一个自定义组件。此方法不仅提升了页面美观度还增强了用户体验[^1]。
#### HTML 结构
首先,在模板部分构建基础结构:
```html
<template>
<view class="carousel-container">
<!-- 左侧隐藏区域 -->
<view class="hidden-slide prev-slide"><image :src="slides[currentIndex - 1]" v-if="currentIndex > 0"></image></view>
<!-- 当前显示区 -->
<swiper @change="onSwiperChange" circular autoplay interval="3000">
<block v-for="(slide, index) in slides" :key="index">
<swiper-item><image :src="slide"/></swiper-item>
</block>
</swiper>
<!-- 右侧隐藏区域 -->
<view class="hidden-slide next-slide"><image :src="slides[(currentIndex + 1) % slides.length]"/></view>
</view>
</template>
```
这里使用了 `swiper` 组件作为主要载体,并在其前后分别放置两个视口外的小窗口用于预览相邻两张幻灯片的内容[^2]。
#### JavaScript 部分
接着处理逻辑层的数据绑定与事件监听:
```javascript
<script>
export default {
data() {
return {
currentIndex: 0,
slides: [
'/static/slide1.jpg',
'/static/slide2.jpg',
'/static/slide3.jpg'
]
}
},
methods: {
onSwiperChange(e){
this.currentIndex = e.detail.current;
}
}
}
</script>
```
这段脚本负责管理当前索引位置以及当用户切换到不同项时更新该值。
#### 样式设计
最后添加一些样式让布局更加合理美观:
```css
<style scoped>
.carousel-container{
position:relative;
width:80%;
margin:auto;
}
.hidden-slide{
position:absolute;
top:0;
bottom:0;
height:70%; /* 控制可见比例 */
overflow:hidden;
}
.prev-slide{left:-25%;}
.next-slide{right:-25%;}
.swiper-item image,.prev-slide image,.next-slide image{
display:block;
width:100vw; /* 完整宽度适应屏幕 */
transform:scale(0.9);/* 缩放以区分主次 */
}
</style>
```
以上代码片段展示了如何通过调整元素的位置和大小使得左右两边的部分图像得以显现出来,从而达到预期的效果。
阅读全文
相关推荐


















