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

小程序评论列表

效果图

在这里插入图片描述

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;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/115551.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Thymeleaf

这就是自动装配的原理 1) .SpringBoot启动会加载大量的自动配置类 2)、我们看我们需要的功能有没有在SpringBoot默认写好的自动配置类当中; 3)、我们再来看这个自动配置类中到底配置了哪些组件;(只要我们要用的组件存在在其中&#xff0c;我们就不需要再手动配置了) 4)、给容器…

pdfh5在线预览pdf文件

前言 pc浏览器和ios的浏览器都可以直接在线显示pdf文件&#xff0c;但是android浏览器不能在线预览pdf文件&#xff0c;如何预览pdf文件&#xff1f; Github: https://github.com/gjTool/pdfh5 Gitee: https://gitee.com/gjTool/pdfh5 使用pdfh5预览pdf 编写预览页面 <…

【LeetCode-中等题】437. 路径总和 III

文章目录 题目方法一&#xff1a;迭代层序 每层节点dfs 维护一个count变量 题目 方法一&#xff1a;迭代层序 每层节点dfs 维护一个count变量 思路&#xff1a; 层序遍历每一个节点遍历一个节点就对这个节点进行dfsdfs的同时&#xff0c;维护一个count变量&#xff0c;并且…

2001-2021年中国城市分产业创新指数(574万+)

2001-2021年中国城市分产业创新指数&#xff08;574万&#xff09; 1、时间&#xff1a;2001-2021年 2、来源&#xff1a;中国城市和产业创新力报告 3、指标&#xff1a;包括城市创新指数、产业创新指数、城市-产业创新指数 4、整理方式&#xff1a; 整理方式是基于国家知…

基于Python的小区监控图像拼接系统设计与实现【源码+论文+演示视频+包运行成功】

博主介绍&#xff1a;✌csdn特邀作者、博客专家、java领域优质创作者、博客之星&#xff0c;擅长Java、微信小程序、Python、Android等技术&#xff0c;专注于Java、Python等技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; …

2023开学礼《乡村振兴战略下传统村落文化旅游设计》南京农大许少辉八一新书

2023开学礼《乡村振兴战略下传统村落文化旅游设计》南京农大许少辉八一新书

【教程分享】Docker搭建Zipkin,实现数据持久化到MySQL、ES

1 拉取镜像 指定版本&#xff0c;在git查看相应版本&#xff0c;参考&#xff1a; https://github.com/openzipkin/zipkin 如2.21.7 docker pull openzipkin/zipkin:2.21.7 2 启动 Zipkin默认端口为9411。启动时通过-e server.portxxxx设置指定端口 docker run --name zi…

最新社区团购电商小程序源码 无bug完美运营版+详细搭建部署教程

分享一个开源社区团购电商小程序源码&#xff0c;无bug完美运营版&#xff0c;含完整前后端详细搭建部署教程。 系统运营模式&#xff1a;整合线下社区资源&#xff0c;由各快递代收点、社区便利店、社区物业、业主等发起的社区微信群&#xff0c;推送商品信息&#xff0c;消费…

MYSQL(索引、事务)

文章目录 一、索引二、事务 一、索引 数据库中的表、数据、索引之间的关系&#xff0c;类似于书架上的图书、书籍内容和书籍目录的关系 1. 概述 概念&#xff1a;相当于是一本书的目录&#xff0c;是以‘列’为维度进行建立的使用场景&#xff1a;如果我们要查询一个表中的某个…

汽车自适应巡航系统车距控制策略研究

1 引言 自适应巡航控制( Adaptive Cruise Control&#xff0c;ACC) 是汽车驾驶辅助系统的重要组成部分&#xff0c;其作用是根据车距传感器探测到本车( ACC 车辆) 与主目标车辆( 前车) 之间的相对位置和相对速度信息&#xff0c;自动调节ACC 车辆的节气门开度或部分制动力矩( 即…

RT_Thread内核机制学习(一)

ARM架构及汇编 ARM芯片属于精简指令集计算机&#xff08;RISC&#xff1a;Reduced Instruction Set Computer&#xff09;&#xff0c;它所使用的指令比较简单&#xff0c;有如下特点&#xff1a; 对内存只有读、写指令。对于数据的运算实在CPU内部实现。使用RISC指令的CPU复杂…

CSC2121A

半桥架构的栅极驱动电路CSC2121A CSC2121系列是一款高性价比的半桥架构的栅极驱动专用电路&#xff0c;用于大功率MOS管、IGBT管栅极驱动。IC内部集成了逻辑信号处理电路、死区时间控制电路、欠压保护电路、电平位移电路、脉冲滤波电路及输出驱动电路&#xff0c;专用于无刷电…

MybatisPlus(2)

前言&#x1f36d; ❤️❤️❤️SSM专栏更新中&#xff0c;各位大佬觉得写得不错&#xff0c;支持一下&#xff0c;感谢了&#xff01;❤️❤️❤️ Spring Spring MVC MyBatis_冷兮雪的博客-CSDN博客 上篇我们简单介绍了MybatisPlus的方便之处&#xff0c;这篇来深入了解Myb…

LNMT架构

所谓的LNMT架构 指的就是Linux操作系统上部署Nginx web服务器、MySQL数据库服务器、Tomcat中间件服务器 L linux N nginx M mysql T tomcat 单机部署 1&#xff0c;安装 apache-tomcat 2&#xff0c;移动目录 3&#xff0c;复制第二个tomcat 4&#xff0c;…

大型商城系统功能逻辑架构_各大系统关系设计_OctShop

一个商城系统应该具备什么样的功能才算一个合格的网上商城呢&#xff0c;才能满意用户的下单支付&#xff0c;退款退货&#xff0c;售后等需求呢&#xff01; 商城一般分为三种角色&#xff1a;买家&#xff0c;商家&#xff0c;平台&#xff0c;这三种角色都有各自的功能特点。…

springMVC之拦截器

文章目录 前言一、拦截器的配置二、拦截器的三个抽象方法三、多个拦截器的执行顺序总结 前言 拦截器 一、拦截器的配置 SpringMVC中的拦截器用于拦截控制器方法的执行 SpringMVC中的拦截器需要实现HandlerInterceptor SpringMVC的拦截器必须在SpringMVC的配置文件中进行配置&…

Android之自定义时间选择弹框

文章目录 前言一、效果图二、实现步骤1.自定义Dialog2.xml布局3.背景白色转角drawable4.取消按钮背景drawable5.确定按钮背景drawable6.NumberPicker样式和弹框样式7.弹框动画8.Activity使用 总结 前言 随着产品人员不断变态下&#xff0c;总是会要求我们的界面高大上&#xf…

Java 多线程系列Ⅱ(线程安全)

线程安全 一、线程不安全线程不安全的原因&#xff1a; 二、线程不安全案例与解决方案1、修改共享资源synchronized 使用synchronized 特性 2、内存可见性Java内存模型&#xff08;JMM&#xff09;内存可见性问题 3、指令重排列4、synchronized 和 volatile5、拓展知识&#xf…

计算机毕设之基于Python+django+MySQL可视化的学习系统的设计与实现

系统阐述的是使用可视化的学习系统的设计与实现&#xff0c;对于Python、B/S结构、MySql进行了较为深入的学习与应用。主要针对系统的设计&#xff0c;描述&#xff0c;实现和分析与测试方面来表明开发的过程。开发中使用了 django框架和MySql数据库技术搭建系统的整体架构。利…