uniapp 数据分页为5个界面 当从别的导航切过来时 让指定界面显示指定的数据范围
时间: 2024-03-09 18:44:33 浏览: 52
可以在目标界面的 `onLoad` 生命周期函数中获取传递过来的参数,然后根据参数来显示指定的数据范围。具体做法如下:
假设你有一个包含多个数据的数组,你需要分页显示这些数据,每页显示 5 条数据,总共需要分为 5 页。
```javascript
// 假设你的数据数组如下所示
const data = [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' },
{ id: 3, name: '王五' },
{ id: 4, name: '赵六' },
{ id: 5, name: '钱七' },
{ id: 6, name: '孙八' },
{ id: 7, name: '周九' },
{ id: 8, name: '吴十' }
]
// 假设你的分页组件是一个包含 5 个界面的 swiper
<swiper>
<swiper-item>
<!-- 界面一的数据 -->
</swiper-item>
<swiper-item>
<!-- 界面二的数据 -->
</swiper-item>
<swiper-item>
<!-- 界面三的数据 -->
</swiper-item>
<swiper-item>
<!-- 界面四的数据 -->
</swiper-item>
<swiper-item>
<!-- 界面五的数据 -->
</swiper-item>
</swiper>
```
在某个导航点击后跳转到分页组件的某个界面时,可以通过 `uni.navigateTo` 传递一个参数,表示需要显示的数据范围。例如:
```javascript
// 从导航栏界面点击第二个按钮跳转到分页组件的第二个界面
uni.navigateTo({
url: '/pages/pagination/pagination?start=5&end=9'
})
```
然后在目标界面的 `onLoad` 生命周期函数中获取传递过来的参数,并根据参数来显示指定的数据范围。例如:
```javascript
export default {
onLoad(options) {
const start = options.start || 0
const end = options.end || 4
// 根据 start 和 end 来显示指定的数据范围
const pageData = data.slice(start, end + 1)
// 更新界面数据
this.setData({
pageData
})
}
}
```
上面的代码中,我们首先通过 `options` 参数获取传递过来的 `start` 和 `end` 参数,如果没有传递则默认为 0 和 4。然后根据 `start` 和 `end` 来显示指定的数据范围,使用 `Array.slice()` 方法来截取数组。最后更新界面数据。
阅读全文