Uview Gird Swiper翻页数据渲染

第一次用这个踩坑。
宫格数据14条，分两页展示数据第一页展示12条，第二页展示2条。
实现过程
1:数据源+页面加载时获取长度

data() {return {gridList: [{title: '1',img: '/static/ui/notice.png',url: 'gonggao',},{title: '2',img: '/static/ui/score.png',url: 'score',},{title: '3',img: '/static/ui/test.png',url: 'test',},{title: '4',img: '/static/ui/subject.png',url: 'class',},{title: '5',img: '/static/ui/plan.png',url: 'plan',},{title: '6',img: '/static/ui/student.png',url: 'userinfo',},{title: '7',img: '/static/ui/class.png',url: 'jiaoshi',},{title: '8',img: '/static/ui/class.png',url: 'jiaoshi',},{title: '9',img: '/static/ui/class.png',url: 'jiaoshi',},{title: '10',img: '/static/ui/class.png',url: 'jiaoshi',},{title: '11',img: '/static/ui/class.png',url: 'jiaoshi',},{title: '12',img: '/static/ui/class.png',url: 'jiaoshi',},{title: '13',img: '/static/ui/class.png',url: 'jiaoshi',},{title: '14',img: '/static/ui/class.png',url: 'jiaoshi',},],swiperindex: []}},onLoad() {if(this.gridList.length > 12){for (let i =0 ; i <= Math.floor(this.gridList.length/12); i++){this.swiperindex[i] = i;}}else{this.swiperindex[0] = 0;}},

2：渲染

 <swiper :indicator-dots="true" class="swiper"><swiper-item v-for="(sindex) in swiperindex"><u-grid :border="true" ><u-grid-item :customStyle="{width:220+'rpx',height:220+'rpx'}" v-if="index >= sindex*12 && index < (sindex+1)*12" v-for="(item, index) in gridList" :index="index + sindex*12"><image :src="item.img" class="image" mode="aspectFill" /><text class="grid-text">{{item.title}}</text></u-grid-item></u-grid></swiper-item></swiper>

实现效果：

Uview Gird Swiper翻页数据渲染相关推荐

递归获取翻页数据（TAPD接口实战）
前言:很多接口是通过翻页获取数据,如何通过递归的方法获取翻页数据呢以下用递归的方法获取TAPD缺陷数据: def get_bus_from_project_v2(workspace_id, limi ...
wpgcms---列表页数据渲染
列表页的数据,都是放到 contentList 这样的一个变量里面. {% for x in contentList %} <dl><dt><a href="{ ...
让Swing表格支持远程后台数据翻页
TWaver Java不但提供了TTable.TElementTable这些表格组件,而且还提供了表格翻页器TPageNavigator.让表格和翻页器结合工作,可以立刻做出一个非常标准的可翻页的表格 ...
java swing表格翻页_让Swing表格支持远程后台数据翻页
TWaver Java不但提供了TTable.TElementTable这些表格组件,而且还提供了表格翻页器TPageNavigator.让表格和翻页器结合工作,可以立刻做出一个非常标准的可翻页的表格 ...
数据窗口Pageup与Pagedown翻页
数据窗口Pageup与Pagedown翻页数据窗口的key实践中写: Long ll_handle ll_handle = Handle(This) Choose Case True Case Ke ...
php天猫列表数据抓取,如何翻页抓取网页数据——以采集天猫搜索列表为例
我们在抓取数据时,通常不会只抓取网页当前页面的数据,往往都会继续抓取翻页后的数据.本文就为大家介绍,集搜客GooSeeker网络爬虫如何在进行数据抓取时,自动抓取翻页后的数据. 在MS谋数台的爬虫路线 ...
ASP NET Core --- HTTP 翻页、过滤、排序
参照草根专栏- ASP.NET Core + Ng6 实战:https://v.qq.com/x/page/v07647j3zkq.html 翻页, 过滤, 排序等 – 如何传递参数? Query ...
太大如何翻页固定表头_外行学 Python 爬虫第六篇动态翻页
前面几篇文章,初步完成了从网络请求.数据解析.数据存储的整个过程,完成了一个爬虫所需的全部功能.但是通过对数据库中数据的分析会发现数据库中的元件数量比网站上的元件数量少了很多.前面的实现过程通过解析网 ...
商城项目商品列表页的渲染实现(含动图)
有了v-for循环,渲染商品列表简直不要太方便了,以前写一个商品列表页要一天,现在只需要几分钟,除了模拟数据会耗一点时间.这里可以了解下Mock模拟数据,它可使前端工程师独立于后端进行开发,在前端可以 ...

Uview Gird Swiper翻页数据渲染

Uview Gird Swiper翻页数据渲染相关推荐

最新文章

热门文章