当前位置: 首页 > news >正文

微信小程序调用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"…...

前端项目打包

前端项目打包指的是将前端项目的源代码打包成一个或多个静态文件&#xff0c;以便于部署到服务器上&#xff0c;供用户访问。下面是一些常用的前端项目打包工具和打包步骤&#xff1a; 1、Webpack&#xff1a;Webpack 是一个强大的打包工具&#xff0c;可以将多个 JavaScript、…...

venv使用教程及pyvenv与python3-venv的区别

推荐使用python3-venv 原因&#xff1a;官方公告称——pyvenv自3.6 版本起弃用 原文&#xff1a;pyvenv 是针对 Python 3.3 和 3.4 创建虚拟环境的推荐工具&#xff0c;并在 Python 3.6 中被弃用。 Linux下创建虚拟环境(以Ubuntu为例) 首先安装依赖包 sudo apt-get instal…...

协程(一)单机--》并发--》协程

目录 一 协程的概述1.1 并行与并发1.2 线程1.3 新的思路1.4 Goroutine 二 第一个入门程序 一 协程的概述 我查看了网上的一些协程的资料&#xff0c;发现每个人对协程的概念都不一样&#xff0c;但是我认可的一种说法是&#xff1a;协程就是一种轻量级的线程框架&#xff08;K…...

P1722 矩阵 II

题目背景 usqwedf 改编系列题。 题目描述 如果你在百忙之中抽空看题&#xff0c;请自动跳到第六行。 众所周知&#xff0c;在中国古代算筹中&#xff0c;红为正&#xff0c;黑为负…… 给定一个12n 的矩阵&#xff08;usqwedf&#xff1a;这不是一个 2n 的队列么&#xff…...

【数据结构】树和二叉树的概念及结构

1.树概念及结构 1.1树的概念 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合。把它叫做树是因为它看起来像一棵倒挂的树&#xff0c;也就是说它是根朝上&#xff0c;而叶朝下的。 有一个特殊的结点&#…...

8.1.tensorRT高级(3)封装系列-模型编译过程封装,简化模型编译代码

目录 前言1. 模型编译过程封装2. 问答环节总结 前言 杜老师推出的 tensorRT从零起步高性能部署 课程&#xff0c;之前有看过一遍&#xff0c;但是没有做笔记&#xff0c;很多东西也忘了。这次重新撸一遍&#xff0c;顺便记记笔记。 本次课程学习 tensorRT 高级-模型编译过程封装…...

化工行业案例 | 甄知科技助力万华化学重构IT服务价值,打造信息中心ERP!

随着科技的发展&#xff0c;新材料的应用领域与日俱增&#xff0c;近年来&#xff0c;全球化工新材料产业发展整体步入高技术引领、产品迭代速度快、产业规模和需求不断扩大的阶段。一体化协同与数字化转型策略是实现化工新材料生产原料自给、节能降耗、降低排放和物料成本的重…...

day6 STM32时钟与定时器

STM32时钟系统的概述 概念 时钟系统是由振荡器&#xff08;信号源&#xff09;、定时唤醒器、分频器等组成的电路。 常用的信号有晶体振荡器和RC振荡器。 意义 时钟是嵌入式系统的脉搏&#xff0c;处理器内核在时钟驱动下完成指令执行&#xff0c;状态变换等动作&#xff…...

【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&#xff08;Residual Networks&#xff09;是深度学习中的一个重要架构&#xff0c;其创新点主要体现在解决了深层神经网络训练中的梯度消失和梯度爆炸问题&#xff0c;从而使得可以构建更深的神经网络。以下是 ResNet 的创新点总结&#xff1a;   1. 残差连接&#x…...

Scratch 之 3D 介绍及教程

第一章 为什么 3D 很难&#xff1f; 1.1 3D 难在何处&#xff1f; 3D 之所以会使我们觉得困难&#xff0c;是因为 Scratch 软件只有两个坐标轴&#xff0c;既&#xff1a;X轴、Y轴。 2维坐标系 而 3D 却拥有三个坐标轴&#xff1a; 3维坐标系 怎么办&#xff1f;很简单&…...

最强自动化测试框架Playwright(19)- 事件

Playwright允许收听网页上发生的各种类型的事件&#xff0c;例如网络请求&#xff0c;创建子页面&#xff0c;专用工作人员等。有几种方法可以订阅此类事件&#xff0c;例如等待事件或添加或删除事件侦听器。 等待事件 大多数情况下&#xff0c;脚本需要等待特定事件的发生。…...

静态网页和动态网页区别

1&#xff0c;静态网页和动态网页有何区别 1) 更新和维护 静态网页内容一经发布到网站服务器上&#xff0c;无论是否有用户访问&#xff0c;这些网页内容都是保存在网站服务器上的。如果要修改网页的内容&#xff0c;就必须修改其源文件&#xff0c;然后重新上传到服务器上。…...

美国服务器有哪些类型?

美国服务器有哪些类型?常见的服务器可分为虚拟主机、云服务器、物理服务器以及高防服务器&#xff0c;在海外服务器之中&#xff0c;使 用较多的属于美国服务器&#xff0c;下面我们就一起看看美国服务器有哪些及常见的美国服务器。 美国服务器有哪些? 与服务器一样&am…...

【基因检测人工智能】如何使用JAVASCRIPT在HTML文档内部增加一个段落

【基因检测人工智能】如何使用JAVASCRIPT在HTML文档内部增加一个段落 目的&#xff1a;采用JAVASCRIPT在一个HTML网页中增加一个段落。 下面是原来的HTML代码部分&#xff1a; <!DOCTYPE html> <html lang"zh-Hans"><head><meta charset&quo…...

unittest单元测试

当你在编写测试用例时&#xff0c;可以使用Python内置的unittest模块来进行单元测试。下面是一个逐步指南&#xff0c;帮助你理解如何编写和运行基本的单元测试。 导入必要的模块&#xff1a; 首先&#xff0c;你需要导入unittest模块和需要测试的模块&#xff08;例如&#xf…...

每天一道leetcode:72. 编辑距离(动态规划困难)

今日份题目&#xff1a; 给你两个单词 word1 和 word2&#xff0c; 请返回将 word1 转换成 word2 所使用的最少操作数 。 你可以对一个单词进行如下三种操作&#xff1a; 插入一个字符 删除一个字符 替换一个字符 示例1 输入&#xff1a;word1 "horse", word…...

详细介绍如何使用 OpenCV 对图像进行锐化

将了解锐化图像的过程,我们将使用内核来突出显示每个特定像素并增强其发出的颜色。它与模糊过程非常相似,只不过现在我们不是创建一个内核来平均每个像素强度,而是创建一个内核,该内核将使像素强度更高,因此对人眼来说更加突出。 了解流程的后端。 很高兴知道内核用于模糊…...

Java代理模式——静态代理与动态代理

代理模式 代理模式允许你为其他对象提供一个代理&#xff0c;以控制对这个对象的访问。代理模式在不改变实际对象的情况下&#xff0c;可以在访问对象时添加额外的功能。 可以理解为代理模式为被代理对象创造了一个替身&#xff0c;调用者可以通过这个替身去实现这个被代理对…...

从杨氏双缝到现代应用:用Python模拟干涉条纹并分析误差(附代码)

用Python重构杨氏双缝实验&#xff1a;从数学建模到误差分析的完整指南 当物理实验遇上Python编程&#xff0c;经典的光学现象便有了全新的打开方式。想象一下&#xff0c;无需繁琐的光路调整和精密仪器&#xff0c;只需几行代码就能在屏幕上生成清晰的干涉条纹——这正是计算物…...

深入拆解V4L2媒体框架:从subdev注册到media pipeline构建全流程

深入拆解V4L2媒体框架&#xff1a;从subdev注册到media pipeline构建全流程 在多媒体系统集成领域&#xff0c;构建稳定高效的摄像头处理流水线一直是开发者面临的挑战。本文将带您深入Linux V4L2媒体框架的核心机制&#xff0c;揭示从传感器注册到完整媒体管道搭建的技术细节。…...

JMS, ActiveMQ 学习一则托

开发个什么Skill呢&#xff1f; 通过 Skill&#xff0c;我们可以将某些能力进行模块化封装&#xff0c;从而实现特定的工作流编排、专家领域知识沉淀以及各类工具的集成。 这里我打算来一次“套娃式”的实践&#xff1a;创建一个用于自动生成 Skill 的 Skill&#xff0c;一是用…...

用一节干电池给STM32F103供电?手把手教你搞定体重秤的低功耗升压电路(附ME2108模块选型)

单节干电池驱动STM32F103的实战指南&#xff1a;从升压电路设计到低功耗优化 在电子设计领域&#xff0c;最令人着迷的挑战之一就是如何用最有限的能源实现最复杂的功能。想象一下&#xff0c;仅凭一节普通的AA干电池&#xff08;1.5V&#xff09;就能驱动一个完整的STM32F103微…...

7B参数模型在消费级GPU上的极限:Token生成速度优化全记录

7B参数模型在消费级GPU上的极限&#xff1a;Token生成速度优化全记录 当你在RTX 3090上加载7B参数模型时&#xff0c;是否经历过这样的场景——看着显存占用接近饱和&#xff0c;而token生成速度却像蜗牛爬行&#xff1f;这背后是显存带宽、计算核心利用率、批处理策略等多重因…...

高效查询:C++二分查找在年龄统计中的应用实践

1. 为什么需要二分查找处理年龄统计&#xff1f; 最近在做一个学生管理系统时&#xff0c;遇到了一个很有意思的问题&#xff1a;系统里有10万名学生信息&#xff0c;需要频繁查询某个年龄段的起止位置。最开始我用的是最简单的线性查找&#xff0c;结果每次查询都要遍历整个数…...

学生党福利:如何利用学校License免费安装MATLAB RoadRunner并接入Carla

教育用户专属&#xff1a;MATLAB RoadRunner与Carla联动的完整指南 在高校实验室里&#xff0c;仿真工具链的搭建往往让许多同学头疼不已。作为自动驾驶、机器人仿真领域的黄金组合&#xff0c;MATLAB RoadRunner与Carla的配合使用能大幅提升研究效率。但专业软件高昂的授权费…...

5个实战技巧彻底掌握OpenUserJS.org:解锁浏览器无限定制能力

5个实战技巧彻底掌握OpenUserJS.org&#xff1a;解锁浏览器无限定制能力 【免费下载链接】OpenUserJS.org The home of FOSS user scripts. 项目地址: https://gitcode.com/gh_mirrors/op/OpenUserJS.org OpenUserJS.org作为自由开源软件用户脚本的集中平台&#xff0c;…...

UniApp分包避坑指南:pages.json配置常见错误与各平台大小限制详解

UniApp分包实战手册&#xff1a;从配置陷阱到多平台适配策略 第一次在UniApp项目里尝试分包时&#xff0c;我盯着微信开发者工具里那个刺眼的"主包超限"警告整整十分钟。这就像玩俄罗斯方块——明明每个模块都精心设计&#xff0c;却在最后关头因为几KB的差距功亏一篑…...

FreeRTOS实战避坑指南:从内核原理到项目调试的20个核心要点

1. FreeRTOS内核原理的5个关键认知 第一次接触FreeRTOS时&#xff0c;我被它简洁的API迷惑了——看起来简单的任务创建函数背后&#xff0c;藏着整个调度器的运作逻辑。这里分享几个必须吃透的内核机制&#xff1a; 任务调度器的饥饿现象 在项目中遇到过优先级配置不当导致低优…...