小程序学习之路五:scroll-view实现多列布局

上面讲解了一些部分简单功能,接下来讲讲scroll-view的进阶,实现多列布局,先上效果:

首先来看看布局文件

<scroll-view class="scroll">
    <view class="item" wx:for='{{datas}}' wx:key='index' wx:for-item="item" data-item="{{item}}">
        <text class="item-text">{{item.name}}</text>
    </view>
</scroll-view>

我这里布局很简单,就是一个scroll-view,里面放一层view当做item,item里面包裹一个文本text

因为是学习前期,我还是说明下布局里面的意思,item的数据是datas,这个datas就是上图的item01-item10,这个实在js文件的data里面添加的,然后角标index,文本text显示的是datas里面的name字段

布局说好了,接下来说样式文件

.scroll{
  width: 100%;
  height: fit-content;
  background: chartreuse;
}
.item{
  width: calc(100% / 3);
  height: 100rpx;
  background: darkgray;
  position: relative;
  float: left;
  padding: 20rpx 10rpx;
  box-sizing: border-box;
}
.image{
  width: 50rpx;
  height: 50rpx;
}
.text{
  width: initial;
  height: max-content;
  color: brown;
}

大家可以看到我的scroll和image,text样式都是中规中矩的宽高背景色,没其他样式,那么主要操作就在item里面了:

    首先说说item的position: relative;这个是代表item位置的绝对位置,我去掉这个也能达到展示图片效果,这里也是我的一个疑问,这个position什么场景下使用呢,求指教;

    第二个float: left;这个是代表列表左边开始显示,你也可以试试right,看看效果就知道了;

    第三个padding这个可以不管,就是设置内边距的;

    第四个box-sizing: border-box;,查了下资料设置边框的,但是我把这一行去掉后居然就只显示两列了,比较懵,也求指教

至此就可以实现多列效果了

热门文章

暂无图片
编程学习 ·

什么是嵌入式培养?要不要选嵌入式培养?

前言 马上要高考了,高考完后势必要面临选专业,本人作为大二的计算机专业老油条,要为想选计算机专业的小萌新们科普科普,什么是嵌入式培养。嵌入式培养的概述 这里的嵌入式,说白了,就是要把社会上的东西,嵌入到学校的教学里 这个概念本来是没有的,但是上级领导认为,计算…
暂无图片
编程学习 ·

RocketMQ 5:消息重试

1.创建消费者RetryConsumer,使用consumer.setMaxReconsumeTimes()方法可以设置重试次数,默认15次,返回ConsumeConcurrentlyStatus.RECONSUME_LATER;消费失败后,先会进入%RETRY%group1中,再到这个ConsumerGroup。而如果一直这样重复消费都持续失败超过重试次数,就会投递到D…
暂无图片
编程学习 ·

java.lang.NullPointerException 自己踩过得坑 记录下来

java.lang.NullPointerExceptionjava.lang.NullPointerException 这个问题困扰了我好长时间 解答: 因为自己写的MybatisUtils工具类中 SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream); 这句话中多写了一个 SqlSessionFactory , 因为…
暂无图片
编程学习 ·

mmdetection训练出现:IndexError: list index out of range 错误

mmdetection训练出现:IndexError: list index out of range 错误文章目录:1 问题分析1.1 尝试解决错误:第一次1.2 尝试解决错误:第二次2 我的问题解决方式我的环境:Ubuntu18.04 TorchVision: 0.6.0 OpenCV: 4.2.0 MMCV: 0.5.5 MMDetection: 2.0.0+d9c8f14 MMDetection Com…
暂无图片
编程学习 ·

nginxj简单安装文档

安装依赖包yum -y install pcre-develyum -y install openssl-develyum -y install gccyum -y install lrzszyum -y install openssh-clients安装nginx上传su - root1、cd /usr/local2、rz –y解压tar -xzvf nginx-1.7.7.tar.gz重命名mv nginx-1.7.7 nginx安装nginx进入解压后的…
暂无图片
编程学习 ·

学人工智能首选Python吗 从事Python开发累不

学人工智能首选Python吗?从事Python开发累不?受到人工智能、机器学习、大数据等前沿科技的影响,Python排名越来越靠前。大家有没有发现,跟Python紧密联系的人工智能、机器学习,大数据都是热门话题。学Python开发累吗?下面来看看吧。 其实,我们从事哪些工作会不累呢?不知…
暂无图片
编程学习 ·

Promise的深入理解

一、promise 的认识 1.js的单线程 1)javascript的执行环境是单线程的 2)单线程:指JS引擎中负责解释和执行JavaScript代码的线程只有一个,也就是一次只能完成一项任务,这个任务执行完后才能执行下一个,它会「阻塞」其他任务,这个任务可称为主线程,但是实际上还有其他线程…
暂无图片
编程学习 ·

GitHub Git bash 常用命令

这里写自定义目录标题1. 下载安装2. 设置GitHub用户信息3. 进入文件夹4. 仓库连接4.1 初始化本地仓库4.2 GitHub上新建一个仓库4.3 配置SSH Key4.3.1 没有的话4.3.2 有的话4.3.3 测试一下4.3 建立连接4.4 文件上传4.5 查看提交记录4.6 pull操作 1. 下载安装 点击下载windows版本…
暂无图片
编程学习 ·

手把手撸一个轮播图

轮播图HTML和CSSJS HTML和CSS <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>轮播图</titl…
暂无图片
编程学习 ·

Redis之父的“退役”感言

Redis之父Antirez今早发布了一篇文章,题为《The end of the Redis adventure》。多年以前深入学习过Redis,这个最流行的缓存解决方案。当时惊叹于其近乎“变态”的性能表现,简直就是一个性能猛兽。而更令人印象深刻的是,在优异的外在表现背后,其代码质量也同样优秀。当年又…
暂无图片
编程学习 ·

来啊!快看---redis缓存雪崩,缓存击穿(布隆过滤器),缓存穿透

今天来看看面试中大概率问到的redis三个缓存问题 (缓存雪崩,缓存击穿,缓存穿透) 还是按照常规,来一张期待已久的图片简单说一下上面数据的流程: 当用户发出一个请求,服务器会对其进行解析,然后就是去查找数据啦 第一步去reids缓存查找数据,如果查到想要的数据就返回给…
暂无图片
编程学习 ·

(精品)cesium-绘制动态线(解决闪烁)的进击研究教程

文章目录前因后果效果图先行动态线绘制思路代码及效果图动态线连续绘制思路代码及效果图结论 前因后果 最近项目中,需要绘制墙体,测试了cesium提供的诸多entity,发现都死在了贴纹理阶段;最后妥协于使用wall实体进行墙体的绘制.期间解决了纹理贴图效果,高程遮挡,动态绘制线路闪烁…
暂无图片
编程学习 ·

最大子列和问题

实例1.1 最大子列和问题 (20分)给定K个整数组成的序列{ N​1​​, N​2​​, ..., N​K​​ },“连续子列”被定义为{ N​i​​, N​i+1​​, ..., N​j​​ },其中 1≤i≤j≤K。“最大子列和”则被定义为所有连续子列元素的和中最大者。例如给定序列{ -2, 11, -4, 13, -5, -…
暂无图片
编程学习 ·

Linux 外网服务

记录一次linux服务器请求外网服务出现的状况情况:偶尔请求成功,ws握手无响应然后超时中断整个请求结果:DNS问题,vi etc/resolv.conf 添加 nameserver 114.114.114.114
暂无图片
编程学习 ·

C#的process进程的处理

查找进程、启用进程、关闭进程 using …… using …… using System.Diagnostics; //启用进程 void process() { Process p;//实例化一个Process对象 p=Process.Start(@“E:\1.txt”);//要开启的进程(或 要启用的程序),括号内为绝对路径 p.Kill();//结束进程 } //查找进程、…
暂无图片
编程学习 ·

CAN协议要点及车辆CAN协议破解

一、CAN协议要点1. 电压2. 波形3. CAN报文概述CAN一共规定了5中类型的帧,帧也称为报文。CAN总线的数据帧有标准格式(Standard Format)和扩展格式(Extended Format)的区分。4. CAN报文编码格式Intel格式编码当一个信号的数据长度不超过1 Byte,并且信号在一个字节内实现时,…