uni-app（vue）分页

最新推荐文章于 2025-06-10 15:18:05 发布

路不在自己脚下

最新推荐文章于 2025-06-10 15:18:05 发布

阅读量4.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： uni-app

本文链接：https://blog.youkuaiyun.com/qq_43579525/article/details/91475977

uni-app 专栏收录该内容

5 篇文章

订阅专栏

这篇博客介绍了如何在uni-app中使用Vue进行分页操作。通过修改view标签为div并调整单位为px，可以实现页面的适配。内容包括具体的代码实现和展示的效果图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码：（vue分页的代码也是如下，只要把view标签换成div或其它标签,然后把upx单位换成px即可）

<template>
    	<view class="box">
    		<view  class="swiper-box" v-for="(page,index) of pages" :key="index">
                    <view class="icon" v-for="item of page" :key="item.id">
                        <view  class="a-icon">
                          {{item}}
                        </view>
                    </view>
                </view>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				list: [
    					1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
    				]
    			};
    		},
    		computed: {
    			// 通过计算属性实现分页逻辑
    			pages() {
    				const pages = []
    				this.list.forEach((item, index) => {
    					// 向下取整(一页显示3个数据),page代表页数
    					const page = Math.floor(index / 3)
    					if (!pages[page]) {
    						pages[page] = []
    					}
    					pages[page].push(item)
    				});
    				return pages
    			}
    		}
    	}
    </script>
    
    <style lang="scss">
    	.box{ margin: 40upx auto; }
    	.swiper-box{
    		width: 90vw;
    		background: pink;
    		text-align: center;
    		margin: 30upx;
    		.icon{
    				border-bottom: 1px solid red;
    				padding: 30upx 0;
    				font-size: 36upx;
    		}
    	}
    </style>

效果图：
在这里插入图片描述