uniappapp页面左右滑动
时间: 2023-08-04 16:08:58 浏览: 462
在 Uniapp 中实现页面左右滑动可以使用 uni-swiper 组件和 swiper-item 组件。以下是一个简单的示例代码:
```html
<template>
<view>
<uni-swiper :current="current" @change="swiperChange">
<swiper-item>
<view class="swiper-item1">
<!-- 第一个页面内容 -->
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item2">
<!-- 第二个页面内容 -->
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item3">
<!-- 第三个页面内容 -->
</view>
</swiper-item>
</uni-swiper>
</view>
</template>
<script>
export default {
data() {
return {
current: 0, // 当前显示的页面索引
};
},
methods: {
// swiper 切换时触发
swiperChange(e) {
this.current = e.detail.current;
},
},
};
</script>
<style>
.swiper-item1 {
background-color: #f00;
}
.swiper-item2 {
background-color: #0f0;
}
.swiper-item3 {
background-color: #00f;
}
</style>
```
在上述示例中,使用了 uni-swiper 组件和 swiper-item 组件来实现页面的左右滑动。通过设置 current 数据来确定当前显示的页面,通过 swiperChange 方法来监听 swiper 切换事件,并更新 current 数据。每个 swiper-item 中的内容可以根据需求进行自定义。样式部分可以根据需要进行调整。