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

前端速查速记系列----评论列表

小程序评论列表

效果图

在这里插入图片描述

wxml代码

<view id="econtent"><block wx:for="{{commentlist}}" wx:for-item="item" wx:for-index="index" wx:key="{{item.id}}"><view class="box1"><view class="box1_6"><image src="图片地址" class="header_img" mode="" /></view><view class="box1_7"><view class="box1_1"><view class="box1_3"><view class="box1_3_1 fontw600">{{item.name}}</view><view class="box1_3_2 c91">{{tools.format(item.addtime,'YY-MM-DD')}}</view></view><view><block wx:for="{{5}}" wx:for-item="itn"><image wx:if="{{itn<item.star1}}" src="星星图片地址" class="star" mode="" /><image wx:else src="图片地址" class="star" mode="" /></block></view></view><view class="box1_4"><view>{{item.text}}</view><view class="box1_5"><block wx:for="{{item.chlist}}" wx:for-item="cit" wx:for-index="cin" wx:key="{{cit.id}}"><video wx:if="{{cit.type==2}}" src="图片地址" bindtap="checkmap" data-nid="{{cin}}" data-id="{{index}}" data-url="图片地址" /><image wx:else src="图片地址" bindtap="checkmap" data-nid="{{cin}}" data-id="{{index}}" data-url="图片地址" /></block></view></view></view></view></block></view>

wxss代码

.box1 {width: 100%;height: auto;margin-top: 30rpx;padding-bottom: 10rpx;position: relative;
}
.box1_6 {width: 20%;height: auto;float: left;position: relative;
}
.header_img {width: 100rpx;height: 100rpx;object-fit: cover;border-radius: 55%;margin-left: 8%;
}
.box1_7 {position: relative;width: 80%;height: auto;margin-left: 0;display: inline-block;
}
.box1_1 {position: relative;width: 100%;height: 100rpx;
}
.box1_3 {width: 100%;height: 50rpx;
}
.box1_3_1 {width: 50%;height: auto;float: left;
}
.fontw600 {font-weight: 700;
}
.box1_3_2 {width: 40%;height: 100%;float: right;text-align: right;
}
.c91 {color: #919191;
}
.star {width: 20rpx;height: 20rpx;
}
.box1_4 {position: relative;width: 100%;margin-right: 0;
}
.box1_5 {position: relative;margin-top: 10rpx;
}
.box1_5 image {width: 100rpx;height: 100rpx;margin-right: 8rpx;margin-top: 5rpx;
}
.box1_5 video {width: 100rpx;height: 100rpx;margin-right: 8rpx;margin-top: 5rpx;
}

相关文章:

前端速查速记系列----评论列表

小程序评论列表 效果图 wxml代码 <view id"econtent"><block wx:for"{{commentlist}}" wx:for-item"item" wx:for-index"index" wx:key"{{item.id}}"><view class"box1"><view class"…...

hiredis的安装与使用

hiredis的介绍 Hiredis 是一个用于 C 语言的轻量级、高性能的 Redis 客户端库。它提供了一组简单易用的 API&#xff0c;用于与 Redis 数据库进行交互。Hiredis 支持 Redis 的所有主要功能&#xff0c;包括字符串、哈希、列表、集合、有序集合等数据结构的读写操作&#xff0c…...

【InsCode】InsCode打造的JavaSE与Linux命令互融的伪Linux文件系统小项目

&#x1f9d1;‍&#x1f4bb;作者名称&#xff1a;DaenCode &#x1f3a4;作者简介&#xff1a;啥技术都喜欢捣鼓捣鼓&#xff0c;喜欢分享技术、经验、生活。 &#x1f60e;人生感悟&#xff1a;尝尽人生百味&#xff0c;方知世间冷暖。 &#x1f4d6;所属专栏&#xff1a;Ja…...

“深入解析JVM:探索Java虚拟机的内部机制“

标题&#xff1a;深入解析JVM&#xff1a;探索Java虚拟机的内部机制 摘要&#xff1a;本文将深入探索Java虚拟机&#xff08;JVM&#xff09;的内部机制&#xff0c;包括JVM的基本结构、内存管理、垃圾回收机制和即时编译器等。通过对JVM内部机制的详细解析&#xff0c;我们可…...

内网远程控制总结

前言 在内网渗透过程中&#xff0c;会碰到远程控制soft或者其他&#xff0c;这里针对远程控制软件做如下总结。 远程控制软件 向日葵篇 向日葵查看版本 向日葵&#xff08;可以攻击&#xff09; 针对向日葵的话其实如果有本地安装的话&#xff0c;是有可能存在漏洞的。这…...

Excel显示此值与此单元格定义的数据验证限制不匹配怎么办?

总结&#xff1a;1、在编辑excel文档的时候&#xff0c;弹出此时预测单元格定义的数据验证&#xff0c;限制不匹配的提示。2、这是我们点击菜单来的数据菜单。3、然后点击数据工具栏的数据验证下拉按钮。4、在弹出的菜单中选择数据验证的菜单项。5、然后在打开的窗口中点击左下…...

mysql(八)事务隔离级别及加锁流程详解

目录 MySQL 锁简介什么是锁锁的作用锁的种类共享排他锁共享锁排它锁 粒度锁全局锁表级锁页级锁行级锁种类 意向锁间隙临键记录锁记录锁间隙锁 加锁的流程锁的内存结构加锁的基本流程根据主键加锁根据二级索引加锁根据非索引字段查询加锁加锁规律 锁信息查看查看锁的sql语句 数据…...

华为云Stack的学习(二)

三、华为云Stack产品组件 FunsionSphere CPS 提供云平台的基础管理和业务资源&#xff08;包括计算资源和存储资源&#xff09;。采用物理服务器方式部署在管理节点。可以做集群的配置&#xff0c;扩容和运维管理。 Service OM 提供云服务的运维能力&#xff0c;采用虚拟化方…...

好用的网页制作工具就是这6个,快点来看!

对于网页设计师来说&#xff0c;好用的网页设计工具是非常重要的&#xff0c;今天本文收集了6个好用的网页设计工具供设计师自由挑选使用。在这6个好用的网页设计工具的帮助下&#xff0c;设计师将获得更高的工作效率和更精致的网页设计效果&#xff0c;接下来&#xff0c;就一…...

一文讲通物联网嵌入式

最近有很多同学问我&#xff0c;物联网近几年一直是科技的热点&#xff0c;嵌入式和物联网有什么关系呢&#xff1f;我在这里统一给大家讲解一下。 嵌入式是应用于物联网产品方向的一种嵌入式操作系统。类似于Android系统是谷歌开发的移动操作系统&#xff0c;嵌入式实际上也是…...

Unity3D Pico VR 手势识别 二

Unity3D Pico VR 手势识别_Cool-浩的博客-CSDN博客 此篇主要讲解怎么手势追踪&#xff0c;手势姿态自定义预制识别&#xff0c;不会导入SDK和配置环境的请看上一章节 环境要求 SDK 版本&#xff1a;2.3.0 及以上PICO 设备型号&#xff1a;PICO Neo3 和 PICO 4 系列PICO 设备系…...

ubuntu中使用iptables限制端口

脚本 #!/bin/bash#关闭所有端口 echo "关闭所有入口" iptables -P INPUT DROP iptables -P FORWARD DROP#允许所有已建立的连接和相关连接的回复数据包通过 iptables -A INPUT -m conntrack --ctstate ESTABLISHED,RELATED -j ACCEPT#允许ping iptables -A INPUT -p…...

Orchestrator介绍二 自身高可用性方案

目录 获得 HA 的方法 一 没有高可用性 &#xff08;No high availability&#xff09; 使用场景 架构组成 架构图 二 半高可用性&#xff08;Semi HA&#xff09; 三 基于共享数据库后端高可用&#xff08;HA via shared backend&#xff09; 四 基于Raft协议高可用 五…...

成集云 | 旺店通多包裹数据同步钉钉 | 解决方案

源系统成集云目标系统 方案介绍 随着品牌电商兴起&#xff0c;线上线下开始逐渐融为一体&#xff0c;成集云以旺店通ERP系统为例&#xff0c;通过成集云-旺店通连接器&#xff0c;将旺店通ERP系统多包裹数据同步至钉钉实现数据互通&#xff0c;帮助企业解决了电商发货存在的错…...

什么是字体图标(Icon Font)?如何在网页中使用字体图标?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 字体图标&#xff08;Icon Font&#xff09;⭐ 如何在网页中使用字体图标⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&a…...

Blender文件云端GPU渲染

本文介绍如何在 GPU云平台vast.ai 上渲染Blender动画的技术指南&#xff0c;假设你已使用 vast.ai 并知道如何启动实例&#xff0c;这里的重要步骤是为实例选择正确的映像。 推荐&#xff1a;用 NSDT编辑器 快速搭建可编程3D场景 使用 nvidia/cuda:11.4.1-cudnn8-devel-ubuntu2…...

C++——引用

引用的概念 引用不是新定义一个变量&#xff0c;而是给已存在的变量取一个别名&#xff0c;编译器不会因为引用变量而开辟内存空间&#xff0c;它和它引用的变量公用同一块空间。 相当于是给被引用的变量取了一个小名&#xff0c;但是相当于是同一个变量。 类型& 引用变…...

Flask入门一 ——虚拟环境及Flask安装

Flask入门一 ——虚拟环境及Flask安装 在大多数标准中&#xff0c;Flask都算是小型框架&#xff0c;小到可以称为“微框架”&#xff0c;但是并不意味着他比其他框架功能少。Flask自开发伊始就被设计为可扩展的框架。Flask具有一个包含基本服务的强健核心&#xff0c;其他功能…...

接口测试json入参,不同类型参数格式书写

接口json入参&#xff0c;不同类型参数格式 1、String 入参&#xff1a;A&#xff08;String&#xff09;&#xff0c;B&#xff08;String&#xff09; 格式&#xff1a;{"A":"值a","B":"值b"} 示例&#xff1a; 接口测试入参这么…...

go web框架 gin-gonic源码解读03————middleware

go web框架 gin-gonic源码解读03————middleware&#xff08;context&#xff09; 今天打完游戏有空整理整理之前看的gin的中间件设计&#xff0c;go的中间件设计相较于前两站还是蛮简单&#xff0c;蛮容易看懂的&#xff0c;所以顺便把context也一起写一下。 中间件是现在w…...

我的Claude Code不再被封号,Taotoken提供了稳定可靠的替代方案

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 我的Claude Code不再被封号&#xff0c;Taotoken提供了稳定可靠的替代方案 作为一名频繁使用Claude Code进行代码生成和审查的个人…...

Codesys ST语言PID调参避坑指南:从仿真到实战,手把手教你搞定温控/电机项目

Codesys ST语言PID调参避坑指南&#xff1a;从仿真到实战的工程化解决方案 在工业自动化领域&#xff0c;PID控制算法占据着核心地位。无论是恒温控制、电机调速还是压力调节&#xff0c;一个精心调校的PID控制器往往能决定整个系统的性能表现。然而&#xff0c;许多工程师在掌…...

3大突破性功能:如何用QtScrcpy彻底改变你的Android投屏体验

3大突破性功能&#xff1a;如何用QtScrcpy彻底改变你的Android投屏体验 【免费下载链接】QtScrcpy Android real-time display control software 项目地址: https://gitcode.com/GitHub_Trending/qt/QtScrcpy 你是否曾经为了在电脑上操作手机而烦恼&#xff1f;无论是游…...

SmarterRouter:基于软件定义与模块化构建智能路由器系统

1. 项目概述&#xff1a;一个更聪明的路由器&#xff0c;它到底想做什么&#xff1f;如果你和我一样&#xff0c;折腾过家里的网络&#xff0c;从刷第三方固件到组软路由&#xff0c;那你肯定对“路由器”这三个字有复杂的感情。它本该是默默无闻的网络基石&#xff0c;却常常因…...

Kafka运维新选择:Offset Explorer(Kafka Tool)在Windows下的详细评测与实战技巧

Kafka运维新选择&#xff1a;Offset Explorer在Windows下的深度评测与高阶实战 当Kafka集群规模从几个节点扩展到数十甚至上百个Broker时&#xff0c;命令行工具kafka-topics.sh和kafka-console-consumer.sh开始显得力不从心。这时&#xff0c;一个得力的可视化工具就像黑暗中的…...

终极FGO自动化助手:告别枯燥刷本,每天节省3小时游戏时间

终极FGO自动化助手&#xff1a;告别枯燥刷本&#xff0c;每天节省3小时游戏时间 【免费下载链接】FGA Auto-battle app for F/GO Android 项目地址: https://gitcode.com/gh_mirrors/fg/FGA Fate/Grand Automata&#xff08;简称FGA&#xff09;是一款专为Fate/Grand Or…...

百度网盘直链解析工具:突破下载限速的Python解决方案

百度网盘直链解析工具&#xff1a;突破下载限速的Python解决方案 【免费下载链接】baidu-wangpan-parse 获取百度网盘分享文件的下载地址 项目地址: https://gitcode.com/gh_mirrors/ba/baidu-wangpan-parse 你是否曾经为百度网盘的下载速度而烦恼&#xff1f;作为国内最…...

终极指南:如何在Mac上免费快速导出微信聊天记录

终极指南&#xff1a;如何在Mac上免费快速导出微信聊天记录 【免费下载链接】WeChatExporter 一个可以快速导出、查看你的微信聊天记录的工具 项目地址: https://gitcode.com/gh_mirrors/wec/WeChatExporter 你是否曾因误删重要微信聊天记录而焦虑&#xff1f;或需要查找…...

Windows Cleaner终极指南:三步告别C盘爆红,让电脑运行如飞!

Windows Cleaner终极指南&#xff1a;三步告别C盘爆红&#xff0c;让电脑运行如飞&#xff01; 【免费下载链接】WindowsCleaner Windows Cleaner——专治C盘爆红及各种不服&#xff01; 项目地址: https://gitcode.com/gh_mirrors/wi/WindowsCleaner 还在为Windows系统…...

JetBrains IDE 30天试用重置:一键解决方案的完整实践指南

JetBrains IDE 30天试用重置&#xff1a;一键解决方案的完整实践指南 【免费下载链接】ide-eval-resetter 项目地址: https://gitcode.com/gh_mirrors/id/ide-eval-resetter 当您正专注于代码调试时&#xff0c;IDE突然弹出"评估期已结束"的红色警告&#xf…...