uni-app v-for循环遍历数据控制次数

uni-app v-for循环遍历数据控制次数,当我们在遍历某个数据的时候接口给了10个数据,但是我们缺只需要前面4个,或者只需要中间的4-8个指定的数据,这是时候我们应该如何去渲染呢。看到丸子的小程序和插件后,枫瑞也是想去使用该插件去开发一个uni-app版本的,毕竟可以发布多端,一端维护即可。该问题也是在制作轮播图的时候碰到的

uni-app v-for循环遍历数据控制次数-度崩网-几度崩溃

1.写一个轮播图咯

发起一个随机文章的网络请求

// 轮播图
	uni.request({
		url: API +'/wp-json/mp/v1/posts/rand',
		success: (res) => {
		this.fenlei = res.data;
		console.log(this.fenlei)
	}
});

控制台也是妥妥的打印了10条数据

uni-app v-for循环遍历数据控制次数-度崩网-几度崩溃

2.截取数据

如果我们只要3个数据 只要后面添加.slice(0, 3),起初枫瑞在渲染数据的是添加

<uni-swiper-dot :info="info" :current="current" :mode="mode" :dots-styles="dotsStyles" field="content">
	<swiper class="swiper-box" @change="change" :autoplay="autoplay" :interval="interval" :duration="duration">
		<swiper-item v-for="(item, index) in fenlei.slice(0, 3)" :key="index" @tap="leid(item.id)">
			<view :class="item.colorClass" class="swiper-item" >
				<image :src="item.meta.thumbnail" mode="aspectFill" />
			</view>
		</swiper-item>
	</swiper>
</uni-swiper-dot>

在hbuilder x自带的浏览器中确实是可以的,但是在小程序中轮播图是空的,虽然有数据存在

uni-app v-for循环遍历数据控制次数-度崩网-几度崩溃

这可能也是一套代码在适应多端的时候兼容性问题,也就意意味着我们得换种写法,直接写在请求数据中就好了

// 轮播图
uni.request({
	url: API +'/wp-json/mp/v1/posts/rand',
	success: (res) => {
		this.fenlei = res.data.slice(0, 3);
		console.log(this.fenlei)
	}
});

在测试下h5以及小程序端都是正常

本文转自枫瑞博客

给TA打赏
共{{data.count}}人
人已打赏
Uniapp

新手uni-app引入css3动画库Animate.css

2019-11-27 17:47:22

Uniapp

uni-app 新手微信小程序登入获取用户信息

2019-11-27 17:49:27

本站所发布的一切源码、模板、应用等文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。如有侵权。本站内容适用于DMCA政策。若您的权利被侵害,请与我们联系处理,站长 QQ: 84087680 或 点击右侧 私信:盾给网 反馈,我们将尽快处理。
⚠️
本站所发布的一切源码、模板、应用等文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。如有侵权。本站内容适用于DMCA政策
若您的权利被侵害,请与我们联系处理,站长 QQ: 84087680 或 点击右侧 私信:盾给网 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索