【一步步学小程序】2.列表展示
我们上一节已经创建了一个可以点击切换的tabbar。这节我们开始正式敲代码，在首页上展示一个可以上下滚动的课程列表：
首先打开上一节的pages/home/homeMain/homeMain.wxml文件，布局相关代码都会在此文件中，小程序的布局方式类似Html标签，也有点类似Android中的xml布局文件或SwiftUI。IDE默认已经帮我们创建了一行布局代码：
<text>pages/subscribe/homeMain/homeMain.wxml</text>
对应就是属于一行文字（text）：pages/subscribe/homeMain/homeMain.wxml
运行效果如下图：
我们将其删除，并先创建第一个课程单元格视图：
<view class="container"><view class="course_main_view"><view class="course_main_item_view"><image class="course_cover_image" src="/images/course.png"></image><text class="course_title">如何成为压力管理的高手</text><text class="course_teacher">指导老师：克里斯朵夫 英国牛津大学客座教授</text><view class="course_address_view"><image class="course_address_image" src="/images/home/location.png"></image><view class="course_address">广州｜2020.05.05-05.15</view></view></view>
</view></view>
Control+S保存修改后的wxml后，小程序会被重新编译运行，效果如下：
其中/images/course.png和/images/location.png两张图片，需要我们打开images文件， 并将对应图片复制进去，如图右击images文件夹，选择硬盘打开，可以快速打开：
最外层view标签，我们通过class=“”设置其标签名为container，container为整个页面的容器。
我们目前只是把对应的控件显示到屏幕上，现在看的布局却还是乱的。我们打开pages/home/homeMain/homeMain.wxss文件，添加如下布局样式代码，语法基本与css是一致的：
/* pages/subscribe/subscribeInvestigate/subscribeInvestigate.wxss */
.course_main_view{width: 686rpx;height: 464rpx;margin-left: 14rpx;margin-right: 14rpx;margin-top: 30rpx;align-content: center;justify-content: center;display: inline-block;border-radius: 16rpx;background: white;
}.course_main_item_view{display: flex;flex-direction: column;
}.course_cover_image{width: 686rpx;height: 314rpx;background-color: #cccccc;border-top-left-radius: 16rpx;border-top-right-radius: 16rpx;
}.course_title{margin-left: 16rpx;margin-top: 10rpx;line-height: 40rpx;text-align: left;font-size: 28rpx;color: #333333;
}.course_teacher{margin-left: 16rpx;line-height: 40rpx;width: 500rpx;text-align: left;font-size: 20rpx;color: #666666;
}.course_address_view{margin-left: 16rpx;height: 40rpx;width: 500rpx;display: flex;flex-direction: row;justify-content: start;
}.course_address_image{margin-top: 10rpx;width: 20rpx;height: 20rpx;
}.course_address{margin-left: 10rpx;line-height: 40rpx;text-align: left;font-size: 20rpx;color: #999999;
}
其中container容器的样式，系统在app.wxss已经设置其默认样式。control+s（Mac是command+s）保存后，运行效果如下：
此时我们列表只有一个单元格，我们可以简单地用一个for循环，显示3个课程单元格，这样看起来才是个列表。打开pages/subscribe/homeMain/homeMain.wxml，在class为course_main_view的view中添加wx:for="{{3}}"，表示这个view需要循环3次，即：
<view class="course_main_view">
改为
<view class="course_main_view" wx:for="{{3}}">
此时保存wxml文件，IDE自动编译运行后效果如图：
此时虽然完成了一个可以上下滚动的列表，但是数据是固定的并且都是一样的。下一节将介绍怎么将json数据映射到列表中，使其成为一个动态的列表，并将单元格封装成组件（component）。
相关文章：
git分支的合并
原文： http://gitbook.liuhui998.com/3_3.html http://gitbook.liuhui998.com/5_3.html 一、如何分支的合并在git中，可以使用git merge 和git rebase两个命令来进行分支的合并。git merge 和git rebase在大体上都差不多，下文主要以git merg…
【一步步学小程序】3. 使用自定义组件(component)
上一节创建了一个包含多个课程数据的列表。这一节我们用自定义组件（component），来优化列表页面，即如图，我们把每个课程单元格封装为组件。 使用组件的好处： 自定义组件可以在不同的页面中重复使用将复杂…
《lua程序设计（第二版）》学习笔记（五）-- 函数基础
-- 第 5 章 函数-- 一种对语句和表达式进行抽象的主要机制 print(os.date()); -- 打印日期 Sun Apr 20 12:44:46 2014 -- 一看到sun，感慨广州没有晴天 -- 函数没有参数也要括号 -- 特殊情况:只有一个参数的时候, 并且参数一个string／table构造…
HTTP协议中的chunked编码解析
“ HTTP协议中的chunked传输编码全接触。”在HTTP协议中，服务器发往客户端的数据中，通常都包括HTTP头和HTTP体，当存在HTTP体的时候，HTTP体的长度通常是由HTTP头内的“Content-Length”字段确定。就像下图：不过…
html-css实例
<!DOCTYPE html> <html><head><meta charset"utf-8" /><title>求签</title><style type"text/css">*{margin: 0px;padding: 0px;font-family: "微软雅黑",arial,sans-serif;}body{background: url(im…
【Swift】变量/常量/类型总结
1、变量（Variable） 变量，可以理解为存放某一类型的值的容器，如： var count:Int var shouldRemind:BOOL var text:String var list:[ChecklistItem]一个变量的数据类型，决定了它能存放什么类型的数据。有些…
ODBC更新记录集提示”记录集为只读“
创建的ODBC应用程序默认的记录集不具有只读属性，但是再更新记录表时会提示”记录集为只读“，这是为什么呢？ 今天看书找到了答案： 因为MFC中的数据库类不支持需要连接两个或者多个表的记录集更新，如果选择数据源的时候选…
gzip格式分析与识别
“ 介绍gzip格式，识别gzip压缩的数据流量。”在协议分析过程中，经常会发现gzip压缩的数据，例如在HTTP协议中，在HTTP头中会标示，内容编码为gzip、DEFLATE。但是，还有很多情况，例如一些非HTTP协议…
CSS 和 JS 动画哪个更快
基于Javascript的动画暗中同CSS过渡效果一样，甚至更加快，这怎么可能呢？而Adobe和Google持续发布的富媒体移动网站的性能可媲美本地应用，这又怎么可能呢？ 本文逐一遍览了基于Javascript的DOM动画库，如Veloci…
C语言之分支结构 if(一)
一 程序的三种基本结构 顺序结构：程序从上往下依次执行，这个叫顺序结构 分支结构：有选择的执行或者不执行某段代码 循环结构：重复的执行某段代码 二 分支结构之if 最简单的俩种用法 (tips: if语句后面的大括号可以省略：…
react-native安装Ant Design
1.集成Ant Design到项目 项目根目录中执行命令： npm install ant-design/react-native --save2.集成按需加载babel-plugin-import到项目 项目根目录中执行命令： npm install --save-dev babel-plugin-import3.创建.babelrc文件 根目录中创建新文件…
车联网APP，安全设施薄弱的山寨品
“ 目前的车联网APP，几乎没有安全性可言。”在网络上闲逛，一不小心，逛进了车联网的领地。物联网、车联网、IoT如火如荼，各个大佬、院士加持，看着相当的高大上。但是，在伟岸的外表下，到底真实的情…
CSS里总算是有了一种简单的垂直居中布局的方法了
<!DOCTYPE html> <html xmlns"http://www.w3.org/1999/xhtml"> <head><meta http-equiv"Content-Type" content"text/html; charsetutf-8"/><title>无标题文档</title><style type"text/css"&…
【星榜单】盘点那些坑爹的国产手机们
【星榜单】盘点那些坑爹的国产手机们 国产手机的那些坑爹事儿很多，中庸到基本大众脸的设计还算是有点良心的，那些奇葩的名字、所谓的高配低价低却又山寨级的做工、饥饿营销让你看得到买不到、伪小清新却又华而不实放眼过去的国产智能手机比比皆是&#x…
App Tracking Transparency被拒解决
App Tracking Transparency 如果使用了App Tracking Transparency，苹果要求在iOS 14.5及以上的版本中必须在弹框取得用户同意后，才可以跟踪用户。否则会被拒： 解决方案 参照官方文档说明（https://developer.apple.com/documen…
ProtoBuf格式详解
“介绍protobuf编码格式。”protobuf是一种数据交换格式，又称PB编码，由Google开源，类似于Json、XML，但其内部是纯二进制格式，比Json，XML等格式要更精炼，主要用于数据的序列化和反序列化…
Android studio 第二次作业
作业要求： 作一个显示框里面分成三行 一二行占这个框的1/2 第三行独占1/2 第三行里面分成两列第一列占25%，第二列占75%。 屏幕显示效果 实现步骤： <LinearLayout android:orientation"vertical"注意这里是横向布局 …
Cable master (POJ No.1064)
二分搜索思想：bool C(double x)可以得到长度为x的绳子//#define LOCAL #include<stdio.h> #include<math.h> int const MAX_N10005; int const MAX_M100; double const INF100000000; int N,K; double d[MAX_N],lb,ub; //判断是否满足条件 bool C(doubl…
iOS 11 导致tableview 刷新之后漂移问题
在10 系好好的，在11系统刷新只有就会多一个白块。查询才返现，添加一下代码 完美解决此bugself.mainTableView.estimatedRowHeight 0; self.mainTableView.estimatedSectionHeaderHeight 0; self.mainTableView.estimatedSectionFooterHeight 0;
HTTP协议解析之Cookie
“ Cookie与身份认证。”提到HTTP协议，不可避免地都会牵涉到Cookie，可以说，Cookie作为HTTP的重要组成部分，促进了HTTP协议的发展壮大。HTTP协议如果没有了Cookie，将会是一个无状态，无法便捷地进行用户识别的…
libevent源码深度剖析十一
libevent源码深度剖析十一 ——时间管理 张亮 为了支持定时器，Libevent必须和系统时间打交道，这一部分的内容也比较简单，主要涉及到时间的加减辅助函数、时间缓存、时间校正和定时器堆的时间值调整等。下面就结合源代码来分析一下。 1 初始化…
CentOS 安装Apache
# centOS 安装A M P 环境[参考简书作者,非常感谢！！！](https://www.jianshu.com/p/bc14ff0ab1c7) ## 一 Apache 环境安装 1 安装Apache > yum install httpd2 操作指令一览 > systemctl start httpd //启动apache > systemct…
使用admin lte 碰到访问Google字体的问题
下载了admin lte 的模板，运行的时候，发现很慢，看了一下console,发现adminlte.css里有import google的字体文件，众所周知的原因，无法访问，所以网页很慢，没办法，只能下载到本地了,cnbl…
如何突破DNS报文的512字节限制
“DNS协议大家都应该很熟悉，最近有同学问到如何获得UDP承载的超过512字节的DNS报文，借此机会，我们一起了解下DNS协议与报文长度有关的一些细节。”本文将讨论的是DNS协议在UDP承载时超过512字节的这一细节。在之前的文章里，对DNS协…
Fragment为什么须要无参构造方法
日前在项目代码里遇到偷懒使用重写Fragment带参构造方法来传参的做法，顿生好奇，继承android.support.v4.app.Fragment而又不写无参构造方法不是会出现lint错误编译不通过的咩？仔细追究，原来是这货被加了SuppressLint("ValidF…
CentOS 安装FTP
# 安装FTP * 1 安装命令> yum -y install vsftpd * 2 使用如下命令增加账户，其中 /var/www/html 是我们的 ftp 目录，ftpadmin 为 ftp 用户名。 > useradd -d /var/www/html -s /sbin/nologin ftpadmin * 3 给 ftpadmin 这个用户设置密码 > pa…
HTTP协议中的Range和Content-Range
“ 琢磨HTTP协议的每一个细节。”HTTP协议博大精深，每一个细节都应细细体会。否则，在协议还原的过程中，你会遇到各种问题。今天，本文中将对HTTP协议的Range和Content-Range进行分析。Range和Content-Range是 HTTP/1.1中新增的HTTP…
【HTML5游戏开发】简单的《找不同汉字版》，来考考你的眼力吧
一，准备工作 本次游戏开发需要用到lufylegend.js开源游戏引擎，版本我用的是1.5.2（现在最新的版本是1.6.0）。 引擎下载的位置：http://lufylegend.googlecode.com/files/lufylegend-1.5.2.rar 引擎API文档：ht…
FTP 命令的使用详解
# 使用Terminal 连接FTP ####Tips: 1 通过!进入本地主机的shell，然后通过exit退出本地主机进入远程服务器shell 2 要把文件下载到哪一个目录 就要先cd 到 哪个目录，再去进行ftp 连接，这样 执行 get 文件 自动下载到目录3 下载的文件的时候…
html 11 内联（行内）
行内元素 <span> 块级元素 <div> <p> <section> <header> <footer> 行内元素，这是高 margin-top margin-bottom 无意义 ，无效果，因为它仅仅在行内 ，它跳不出行，行多少它就多少。…