uniapp ,总共一百条数据,分成两排做横向滑动
时间: 2023-08-12 13:04:48 浏览: 256
您可以使用 `uni-swiper` 和 `uni-grid` 来实现将一百条数据分成两排进行横向滑动。
首先,在您的页面中引入 `uni-swiper` 和 `uni-grid` 组件:
```html
<template>
<view>
<uni-swiper :loop="false" :current="currentIndex" @change="swiperChange">
<uni-swiper-item>
<uni-grid :column-num="5">
<!-- 第一排数据 -->
<uni-grid-item v-for="(item, index) in firstRowData" :key="index">
{{ item }}
</uni-grid-item>
</uni-grid>
</uni-swiper-item>
<uni-swiper-item>
<uni-grid :column-num="5">
<!-- 第二排数据 -->
<uni-grid-item v-for="(item, index) in secondRowData" :key="index">
{{ item }}
</uni-grid-item>
</uni-grid>
</uni-swiper-item>
</uni-swiper>
</view>
</template>
```
然后,在组件的 `script` 部分定义数据和方法:
```javascript
<script>
export default {
data() {
return {
currentIndex: 0, // 当前swiper的索引
firstRowData: [], // 第一排数据
secondRowData: [], // 第二排数据
totalData: [], // 总共的数据
};
},
mounted() {
// 初始化数据
this.initData();
},
methods: {
initData() {
// 假设总共一百条数据存在 totalData 数组中
this.totalData = Array.from({ length: 100 }, (v, i) => `数据${i + 1}`);
// 将总共的数据根据需要分成两排
const halfLength = Math.ceil(this.totalData.length / 2);
this.firstRowData = this.totalData.slice(0, halfLength);
this.secondRowData = this.totalData.slice(halfLength);
},
swiperChange(e) {
// swiper 切换时更新 currentIndex
this.currentIndex = e.detail.current;
},
},
};
</script>
```
通过以上代码,您可以将一百条数据分成两排并实现横向滑动效果。请根据您的实际需求调整代码中的数据和样式。
阅读全文