VUE/小程序 轮播图数据分组

news/2024/7/10 2:26:57 标签: vue, js, 小程序, 前端

需求:每页轮播图排放十个数据,总数据量不定。

分析:
1.数据存与一数组之中arr=[0,1,2,3,4,5,6,7,8,9,a,b,c,d,e]
2.处理该数组,每十个数据分为一个小数组,小数组再存于一个大数组中。
arrb=[[0,1,2,3,4,5,6,7,8,9],[a,b,c,d,e]]
3.循环嵌套渲染轮播图,arrb.length为轮播图页数,arrb储存的小数组循环渲染各个数据。

实现:
html:

<view class="swiper_box">
				<swiper :indicator-dots="true" :autoplay="false" :interval="3000" :duration="1000" :indicator-active-color="active_color">
					<swiper-item class="swiper-item " v-for="(v, i) in myArr" :key="i">
						<view class="cell" v-for="(w, j) in v" :key="j" :class="w.class">
							<text>{{w.txt}}</text>
						</view>
						<view class="" v-for="index of 10-v.length" :key="index"><!--flex布局,最后一页数据不满十个时,布局解决方案-->
							
						</view>
					</swiper-item>
				</swiper>
			</view>

data:

			arr:[
				{
					txt:'0',
					class:'0',
					url:''
				},
				{
					txt:'1',
					class:'1',
					url:''
				},
				{
					txt:'2',
					class:'2',
					url:''
				},
				{
					txt:'3',
					class:'3',
					url:''
				},
				{
					txt:'4',
					class:'4',
					url:''
				},
				{
					txt:'5',
					class:'5',
					url:''
				},
				{
					txt:'6',
					class:'6',
					url:''
				},
				{
					txt:'7',
					class:'7',
					url:''
				},
				{
					txt:'8',
					class:'8',
					url:''
				},
				{
					txt:'9',
					class:'9',
					url:''
				},
				{
					txt:'a',
					class:'a',
					url:''
				},
				{
					txt:'b',
					class:'b',
					url:''
				},
				{
					txt:'c',
					class:'c',
					url:''
				},
				{
					txt:'d',
					class:'d',
					url:''
				},
				{
					txt:'e',
					class:'e',
					url:''
				}
				]

数据分组(computed)

myArr: function () {
	                var arrb = [];
	                let i = 0;
	                let sectionCount = 10;
	                for (let j = 0; j < this.arr.length; j++) {
	                    i = parseInt(j / sectionCount);
	                    if (arrb.length <= i) {
	                        arrb.push([]);
	                    }
	                    arrb[i].push(list[i]);
	                }
	                return arrb;
	            }

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


http://www.niftyadmin.cn/n/1355301.html

相关文章

flex多行两端布局(消除行间距,不满时左对齐)

当数量不足时&#xff0c;用不显示的元素补足数量&#xff0c;即可完成不满时左对齐 垂直方向设置align-content: flex-start;即可实现换行时无行间距&#xff0c;之后自行设置样式可控制行间距 父元素样式 .swiper-item{ display: flex; align-items: center; justify-conten…

空间三角形_这个厉害了!三角形格局二居室,实现空间的最大化利用

平面布置图在入户玄关走廊的两侧都做了嵌入式的鞋柜&#xff0c;这样既不会影响走廊的通行效果&#xff0c;又能让小户型拥有更多的储物空间&#xff0c;其中一侧的鞋柜可以做成带有换鞋凳的款式。走过玄关就到了客厅和儿童房空间&#xff0c;儿童房现在是一个开放式的空间&…

小程序:rpx与px混合计算

实现&#xff1a;(44px-40rpx)/2 style() {//#ifdef MP-WEIXINlet systemInfo uni.getSystemInfoSync()let px (44-(systemInfo.windowWidth/750)*40)/2;return top:${systemInfo.statusBarHeight}px;margin-top:${px}px//#endif//#ifdef APP-PLUSreturn //#endif}

c++ malloc能给string_c 常见面试题30道

1.new、delete、malloc、free关系delete会调用对象的析构函数,和new对应free只会释放内存&#xff0c;new调用构造函数。malloc与free是C/C语言的标准库函数&#xff0c;new/delete是C的运算符。它们都可用于申请动态内存和释放内存。对于非内部数据类型的对象而言&#xff0c;…

webpack:Error: Cannot find module ‘@babel/core‘

配置webpack使用babel-loader是出现报错&#xff1a; Error: Cannot find module babel/core是由于babel-loader与babel-core版本不匹配所造成的 建议把babel升级到最新版本。 npm install -D babel/core babel/preset-env

logistic回归 简介_面经之逻辑回归的广义线性回归与最大熵解释wtf

试着从3个角度来解释逻辑回归&#xff1f;&#xff08;1、概率角度分析逻辑回归&#xff1b;2、GLM角度分析线性回归和逻辑回归&#xff1b;3、最大熵模型和逻辑回归的关联&#xff1b;&#xff09;1、从概率角度分析&#xff0c;上图是最常见的一个条件分布表达式&#xff0c;…

webpack入门,配置实例

结构&#xff1a; webpack.config.js // webpack.config.js const webpack require ("webpack"); const HtmlWebpackPlugin require(html-webpack-plugin); module.exports {// entry: {// main:__dirname /src/main.js, // 对象方式最可拓展&#xff0c;多…

android source镜像源_Celadon快速上路指南Part2:编译Celadon镜像

一目了然 | Celadon 新手上路快速通道隆重揭晓 | 打开Celadon 的正确姿势上一期我们向您介绍了如何安装Celadon预编译镜像(Celadon快速上路指南 Part1&#xff1a;安装Celadon镜像)&#xff0c;本期我们将向您介绍如何建立Celadon的开发环境&#xff0c;编译制作您自己的Cel…