微信小程序调用map数据 并在wxml中对数组进行截取的操作
wxs文件的位置如图

实现数组截取 只保留五张图片
<wxs module="filter" src="./slicefunc.wxs"></wxs>
<view class="wrap"><view class="search-box" bindtap="toSearch"><view class="v1">搜索观察记录条目</view><view class="v2">搜索</view></view><view class="record-number">共有{{report.totalNumber}}条观察记录</view><view class="white-box" wx:for="{{report.recordDatas}}" wx:key="key" wx:for-index="key" wx:for-item="group"><view class="time">{{key}}</view><view class="item"> <view class="record-list" wx:for="{{group}}" wx:key="id"><view class="v1">{{item.recordDate}}</view><view class="record-student"><image mode="aspectFill" class="record-student-photo" wx:for="{{filter.sliceFunc(item.participants)}}" wx:for-item="mItem" wx:for-index="mIndex" wx:key="studentId" src="{{mItem.studentImage}}" /></view><view class="record-txt">{{item.content}}</view><view class="record-exercise">{{item.indicatorName}}</view></view> </view></view></view>
// 支持es4语法
var filter = {sliceFunc: function(list){return list.slice(0,5)}
}
// 导出对外暴露的属性
module.exports = {sliceFunc: filter.sliceFunc
}
************这个是slicefunc.wxs里的内容是重点*****************************
以下的代码不重要 只是记录用的
const app = getApp();
var util = require('../../utils/util.js');
var api = require('../../config/api.js');
Page({data: {content: '',report: {}},onLoad(options) {},onShow() {const userInfo = wx.getStorageSync('userInfo');this.setData({userInfo})this.loadData()},loadData(){let oUserInfo = this.data.userInfoutil.request(api.listObservationRecord + oUserInfo.userId + '&&content=' + this.data.content, '', 'get').then(res => {if (res.code == 200) {let odata = res.data this.setData({report: odata})} else {wx.showModal({title: res.msg,icon: 'error',showCancel: false,duration: 3000});}});},toSearch(){wx.navigateTo({ url: '../recordsearch/recordsearch' })},
})
.wrap{ padding: 20rpx 0 0 10rpx;}
.search-box{ padding-right: 10rpx; margin-bottom: 10rpx; display: flex; align-items: center;}
.search-box .v1{ padding-left: 20rpx; flex: 1; height: 66rpx; line-height: 66rpx; background: #fff; font-size: 24rpx; color: #808080; border: 1rpx solid #eee; border-radius: 10rpx;}
.search-box .v2{ margin-left: 10rpx; width: 88rpx; height: 66rpx; text-align: center; line-height: 66rpx; background: #169bd5; font-size: 26rpx; color: #fff; border-radius: 10rpx;}
.record-number{ margin-top: 20rpx; font-size: 26rpx; font-weight: bold; color: #333;}.white-box{ margin-top: 22rpx; padding: 20rpx 20rpx 0 20rpx; width: 730rpx; box-sizing: border-box; background: #fff; border-radius: 25rpx;}
.time{ font-size: 26rpx; color: #015478;}
.item{ margin-top: 10rpx; display: flex; justify-content: space-between; flex-wrap: wrap;}
.record-list{ margin-bottom: 20rpx; padding: 20rpx; width: 335rpx; height: 225rpx; box-sizing: border-box; background: #f0f0f0;}
.record-list:last-child{ margin-right: 0;}
.record-list .v1{ margin-bottom: 10rpx; font-size: 24rpx; white-space: nowrap;}
.record-student{ display: flex; overflow-x: scroll;}
.record-student-photo{ margin-right: 10rpx; display: block; width: 50rpx; height: 50rpx; border-radius: 50%;}
.record-txt{ margin-top: 10rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;font-size: 24rpx; color: #999;}
.record-exercise{ margin-top: 10rpx; font-size: 24rpx; color: #027db4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
相关文章:
微信小程序调用map数据 并在wxml中对数组进行截取的操作
wxs文件的位置如图 实现数组截取 只保留五张图片 <wxs module"filter" src"./slicefunc.wxs"></wxs> <view class"wrap"><view class"search-box" bindtap"toSearch"><view class"v1"…...
前端项目打包
前端项目打包指的是将前端项目的源代码打包成一个或多个静态文件,以便于部署到服务器上,供用户访问。下面是一些常用的前端项目打包工具和打包步骤: 1、Webpack:Webpack 是一个强大的打包工具,可以将多个 JavaScript、…...
venv使用教程及pyvenv与python3-venv的区别
推荐使用python3-venv 原因:官方公告称——pyvenv自3.6 版本起弃用 原文:pyvenv 是针对 Python 3.3 和 3.4 创建虚拟环境的推荐工具,并在 Python 3.6 中被弃用。 Linux下创建虚拟环境(以Ubuntu为例) 首先安装依赖包 sudo apt-get instal…...
协程(一)单机--》并发--》协程
目录 一 协程的概述1.1 并行与并发1.2 线程1.3 新的思路1.4 Goroutine 二 第一个入门程序 一 协程的概述 我查看了网上的一些协程的资料,发现每个人对协程的概念都不一样,但是我认可的一种说法是:协程就是一种轻量级的线程框架(K…...
P1722 矩阵 II
题目背景 usqwedf 改编系列题。 题目描述 如果你在百忙之中抽空看题,请自动跳到第六行。 众所周知,在中国古代算筹中,红为正,黑为负…… 给定一个12n 的矩阵(usqwedf:这不是一个 2n 的队列么ÿ…...
【数据结构】树和二叉树的概念及结构
1.树概念及结构 1.1树的概念 树是一种非线性的数据结构,它是由n(n>0)个有限结点组成一个具有层次关系的集合。把它叫做树是因为它看起来像一棵倒挂的树,也就是说它是根朝上,而叶朝下的。 有一个特殊的结点&#…...
8.1.tensorRT高级(3)封装系列-模型编译过程封装,简化模型编译代码
目录 前言1. 模型编译过程封装2. 问答环节总结 前言 杜老师推出的 tensorRT从零起步高性能部署 课程,之前有看过一遍,但是没有做笔记,很多东西也忘了。这次重新撸一遍,顺便记记笔记。 本次课程学习 tensorRT 高级-模型编译过程封装…...
化工行业案例 | 甄知科技助力万华化学重构IT服务价值,打造信息中心ERP!
随着科技的发展,新材料的应用领域与日俱增,近年来,全球化工新材料产业发展整体步入高技术引领、产品迭代速度快、产业规模和需求不断扩大的阶段。一体化协同与数字化转型策略是实现化工新材料生产原料自给、节能降耗、降低排放和物料成本的重…...
day6 STM32时钟与定时器
STM32时钟系统的概述 概念 时钟系统是由振荡器(信号源)、定时唤醒器、分频器等组成的电路。 常用的信号有晶体振荡器和RC振荡器。 意义 时钟是嵌入式系统的脉搏,处理器内核在时钟驱动下完成指令执行,状态变换等动作ÿ…...
【JavaEE进阶】SpringBoot 配置文件
文章目录 SpringBoot配置文件1. 配置文件的作用2. 配置文件的格式3. properties 配置文件说明3.1 properties 基本语法3.2 读取配置文件3.3 properties 优缺点分析 4. yml配置文件说明4.1 yml 基本语法4.2 yml 配置读取 5. properties和yml的对比 SpringBoot配置文件 1. 配置文…...
ResNet创新点总结
ResNet(Residual Networks)是深度学习中的一个重要架构,其创新点主要体现在解决了深层神经网络训练中的梯度消失和梯度爆炸问题,从而使得可以构建更深的神经网络。以下是 ResNet 的创新点总结: 1. 残差连接&#x…...
Scratch 之 3D 介绍及教程
第一章 为什么 3D 很难? 1.1 3D 难在何处? 3D 之所以会使我们觉得困难,是因为 Scratch 软件只有两个坐标轴,既:X轴、Y轴。 2维坐标系 而 3D 却拥有三个坐标轴: 3维坐标系 怎么办?很简单&…...
最强自动化测试框架Playwright(19)- 事件
Playwright允许收听网页上发生的各种类型的事件,例如网络请求,创建子页面,专用工作人员等。有几种方法可以订阅此类事件,例如等待事件或添加或删除事件侦听器。 等待事件 大多数情况下,脚本需要等待特定事件的发生。…...
静态网页和动态网页区别
1,静态网页和动态网页有何区别 1) 更新和维护 静态网页内容一经发布到网站服务器上,无论是否有用户访问,这些网页内容都是保存在网站服务器上的。如果要修改网页的内容,就必须修改其源文件,然后重新上传到服务器上。…...
美国服务器有哪些类型?
美国服务器有哪些类型?常见的服务器可分为虚拟主机、云服务器、物理服务器以及高防服务器,在海外服务器之中,使 用较多的属于美国服务器,下面我们就一起看看美国服务器有哪些及常见的美国服务器。 美国服务器有哪些? 与服务器一样&am…...
【基因检测人工智能】如何使用JAVASCRIPT在HTML文档内部增加一个段落
【基因检测人工智能】如何使用JAVASCRIPT在HTML文档内部增加一个段落 目的:采用JAVASCRIPT在一个HTML网页中增加一个段落。 下面是原来的HTML代码部分: <!DOCTYPE html> <html lang"zh-Hans"><head><meta charset&quo…...
unittest单元测试
当你在编写测试用例时,可以使用Python内置的unittest模块来进行单元测试。下面是一个逐步指南,帮助你理解如何编写和运行基本的单元测试。 导入必要的模块: 首先,你需要导入unittest模块和需要测试的模块(例如…...
每天一道leetcode:72. 编辑距离(动态规划困难)
今日份题目: 给你两个单词 word1 和 word2, 请返回将 word1 转换成 word2 所使用的最少操作数 。 你可以对一个单词进行如下三种操作: 插入一个字符 删除一个字符 替换一个字符 示例1 输入:word1 "horse", word…...
详细介绍如何使用 OpenCV 对图像进行锐化
将了解锐化图像的过程,我们将使用内核来突出显示每个特定像素并增强其发出的颜色。它与模糊过程非常相似,只不过现在我们不是创建一个内核来平均每个像素强度,而是创建一个内核,该内核将使像素强度更高,因此对人眼来说更加突出。 了解流程的后端。 很高兴知道内核用于模糊…...
Java代理模式——静态代理与动态代理
代理模式 代理模式允许你为其他对象提供一个代理,以控制对这个对象的访问。代理模式在不改变实际对象的情况下,可以在访问对象时添加额外的功能。 可以理解为代理模式为被代理对象创造了一个替身,调用者可以通过这个替身去实现这个被代理对…...
**发散创新:基于脉冲计算的神经形态编程实践与Python实现**在传统冯·诺依曼架构下,计算
发散创新:基于脉冲计算的神经形态编程实践与Python实现 在传统冯诺依曼架构下,计算和存储分离导致能效瓶颈日益突出。近年来,脉冲计算(Spiking Neural Computing, SNC)作为一种受生物神经系统启发的新范式,…...
MySQL锁机制:从全局锁到行级锁的深度解读秤
如果有多个供应商,你也可以使用 [[CC-Switch]] 来可视化管理这些API key,以及claude code 的skills。 # 多平台安装指令 curl -fsSL https://claude.ai/install.sh | bash ## Claude Code 配置 GLM Coding Plan curl -O "https://cdn.bigmodel.cn/i…...
[AI/向量数据库/GUI] Attu : Milvus 的图形化与一体化管理工具艘
前言 在使用 kubectl get $KIND -o yaml 查看 k8s 资源时,输出结果中包含大量由集群自动生成的元数据(如 managedFields、resourceVersion、uid 等)。这些信息在实际复用 yaml 清单时需要手动清理,增加了额外的工作量。 使用 ku…...
使用Alpine配置WSL ssh门户抗
1. 哑铃图是什么? 哑铃图(Dumbbell Plot),有时也称为DNA图或杠铃图,是一种用于比较两个相关数据点的可视化图表。 它源于人们对更有效数据比较方式的持续探索。 在传统的时间序列比较中,我们通常使用两条折…...
STM32F429开发实战:手把手教你开启FPU并验证性能提升(含Lazy Stacking详解)
STM32F429开发实战:FPU性能优化与Lazy Stacking深度解析 在嵌入式系统开发中,浮点运算性能往往是制约算法实时性的关键瓶颈。STM32F429作为Cortex-M4内核的代表性产品,其内置的浮点运算单元(FPU)能显著提升计算效率——但前提是开发者必须正确…...
RTL8201F PHY芯片替换调试:从时钟异常到网络连通的实战复盘
1. 低成本PHY芯片替换的实战背景 最近接手一个工业控制项目,甲方对成本极其敏感,要求我们把原本使用的LAN8742 PHY芯片替换成更便宜的方案。经过多方对比,最终选择了RTL8201F-VB-CG这款性价比突出的百兆以太网PHY芯片。本以为只是简单的驱动替…...
前端性能排查实战:Chrome Network面板里Timing那7个阶段到底怎么看?
Chrome Network面板Timing分析实战:从指标到性能优化 页面加载缓慢时,Chrome DevTools的Network面板中的Timing指标就像犯罪现场的指纹,每个数字背后都隐藏着性能问题的真相。但面对Queueing、Stalled、TTFB这些专业术语,很多开发…...
手机号逆向查询QQ号:Python开发者的高效查询解决方案
手机号逆向查询QQ号:Python开发者的高效查询解决方案 【免费下载链接】phone2qq 项目地址: https://gitcode.com/gh_mirrors/ph/phone2qq 你是否曾在工作中需要快速验证手机号与QQ号的绑定关系?面对批量数据时,手动查询不仅耗时耗力&…...
Toffoli 门:开启可逆计算新时代
【导语:2026 年 4 月 6 日发布的文章指出,Toffoli 门作为可逆电路基本组成部分,虽距离物理极限遥远,但已证明可逆电路比传统电路能耗更低,且任何布尔函数都可用其组成的电路计算。】兰道尔原理下的可逆计算潜力兰道尔原…...
像素剧本圣殿效果实测:Glitch动态标题触发下AI生成的高节奏对白片段
像素剧本圣殿效果实测:Glitch动态标题触发下AI生成的高节奏对白片段 1. 项目概览:当AI编剧遇上8-Bit美学 像素剧本圣殿(Pixel Script Temple)是一款专为影视创作者设计的AI辅助工具,它基于Qwen2.5-14B-Instruct大模型…...
