小程序学习之路五: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;,查了下资料设置边框的,但是我把这一行去掉后居然就只显示两列了,比较懵,也求指教

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

热门文章

暂无图片
编程学习 ·

Linux centos7 乱码设置中文字符集

1.locale 查看现在使用的字符集locale -a 查看有哪些字符集utf8的就可以显示中文yum -y install kde-l10n-Chinese 安装后选个uft8的 ,设置一下全局变量vi /etc/profileexport LANG=en_CA.utf8=号后面是字符集,这个大家随意最后让这个配置文件生效就可以了. /etc/profile 可能…
暂无图片
编程学习 ·

BIO、NIO、AIO基本概念

BIO 采用BIO通信模型的服务端,通常由一个独立的Acceptor线程负责监听客户端的连接,它接收到客户端连接请求之后为每个客户端创建一个新的线程进行链路处理,处理完成后,通过输出流返回应答给客户端,线程销毁。 BIO主要的问题在于每当有一个新的客户端请求接入时,服务端必须…
暂无图片
编程学习 ·

实战系列-Spring Cloud微服务中三把利器Feign、Hystrix、Ribbon

导语在之前的分享中分享过关于Fegin的底层实现原理,以及Spring Cloud OpenFegin的启动原理。在这次的分享中主要总结一下Spring Cloud 微服务架构的三把利器。对于Fegin、Hystrix、Ribbon三个组件来说它们之间是什么样的关系。怎么样综合使用等这些问题就是这次分享的内容文章…
暂无图片
编程学习 ·

Docker 2375 端口入侵服务器,部分解决方案

docker remote API的同学对2375端口入侵服务器2375->上传镜像-》获取控制权-》ssh pub key 注入-》登入服务器核心总结:1.禁用2375 2.创建linux新用户 3.禁止root远程登录4.卸载重新安装docker,并删除之前的文件5.禁止外网一、创建新用户以及授权创建用户adduser limp用户…
暂无图片
编程学习 ·

线程

1.线程 1.什么叫做线程,跟进程之间的关系 进程:独立的cup空间运行 线程:进程中的一个执行流程,一个进程中可以包含多个线程,这些线程共享该进程提供的资源 2.创建线程(两种方式) 让这类继承Thread类 class XXX extends Thread{ public void run() Thread xx = new Threa…
暂无图片
编程学习 ·

怎么才能最短时、高效、踏实的学习 Python?

作者:飞绝眷岭 链接:https://www.zhihu.com/question/28530832/answer/58656332 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。Dataquest 这个网站上提供了一系列和数据分析相关的python教程,从python基本语法到data analysis的基本函数…
暂无图片
编程学习 ·

POM 标签大全详解

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0http://maven.apache.org/maven-v4_0_0.xsd"><!--父项目的坐标。…
暂无图片
编程学习 ·

2020/7/1 方程根的存在性及个数/证明函数不等式

复习内容科目 内容 补充 时间数学 第九次课(83;148-151) 方程根的存在性及个数、证明函数不等式数学 题型三 方程的根的存在性及个数 1.存在性 方法1:零点定理; 方法2:罗尔定理。 2.根的个数 方法1:单调性 方法2:罗尔定理推论 推论:若在区间III上的f(n)(x)≠0f^{(n)}(…
暂无图片
编程学习 ·

数据结构之查找

【知识框架】一、查找的基本概念 1、查找表 查找表是由同一类的数据元素(或记录)构成的集合。集合中的数据元素之间存在着完全松散的关系,因此查找表是一种非常灵便的数据结构。 2、关键字 关键字是数据结构(或记录)中某个数据项的值,用它可以标识一个数据元素(或记录)…
暂无图片
编程学习 ·

java面试-JVM内存区域划分

JVM内存划分说到Java内存区域,刚开始接触java的人会下意识说出“堆栈”。这里要明确堆栈不是一个概念,而是两个概念,堆和栈是两块不同的内存区域,简单理解的话,堆是用来存放对象而栈是用来执行程序的。其次,堆内存和栈内存的这种划分方式比较粗糙,这种划分方式只能说明大…
暂无图片
编程学习 ·

硕彦博创李飞授——Linux权限、掩码、编译

1、文件的权限 - rw- rw- -w- a.txt 类型 创建者 群组 其他人常用类型有:文件(-),文件夹(d),链接文件(l)等文件的权限:文件允许用户操作的一个权限文件对于用户的分类:创建者(u)群组(g)其他人(o)所有用户(a)文件的权限:r (read)读 …
暂无图片
编程学习 ·

C#中常见的简答题(第三天)

8.简述ADO.NET中五个主要对象A.Connection:主要是开启程序和数据库之间的连接。没有利用连接对象将数据库打开,是无法从数据库中取得数据的。Close和Dispose的区别,Close以后还可以Open,Dispose以后则不能再用。B.Command:主要可以用来对数据库发出一些指令,例如可以对数据…
暂无图片
编程学习 ·

String类、Arrays类

String类 概念:之前都已经接触到了String的对象,是一个字符串。String类就代表的是字符串 特点 1.双引号引起来的"abc",这种也是String对象,这种对象不是保存到堆中而是方法区的常量池中 2.字符串对象是不可变的对象,只要你观察到字符串的内容变化了,那么肯定是…
暂无图片
编程学习 ·

Efficient Large-Scale Multi-Modal Classification 多模态学习论文阅读

引言 多模态问题我们应该不会陌生。 Efficient Large-Scale Multi-Modal Classification(AAAI2018) 摘要 早期的互联网主要是基于文本的,但现代数字世界正变得越来越多模式。这里,我们研究多模态分类,其中一个模态是离散的,例如文本;而另一个是连续的,例如从卷积神经网…
暂无图片
编程学习 ·

Niushop单商户商城系统后台新增功能啦!

随着单商户商城系统直播功能的上线,越来越多的牛友反馈,这真的是太方便啦! 抗疫期间,商城直播无疑是当下最红,再加上地摊经济,线上直播,线下溜达的功夫还能看看商品实物,简直不要太完美! 因此,Niushop研发团队就直播这一功能,又新增了几项功能,更方便于牛友们直播带…