小程序新闻列表页面布局代码_论坛小程序·“我的”页面布局

这次让我们来看看界面是怎么布局的吧！

比如打开模拟器里“我的”页面，找到其所对应的me文件夹里的文件

打开me.wxml

查看第一段代码，发现其中包含五个view类，他们的属性标签分别是：class='amountBg'、class='img'、class='account'、class='nick-name'、class='address'，

对应着背景、头像、账号、昵称、地址五个方面。他们之间的包含关系也不难看出。

View是一个视图容器，它可以展示一些内容，我们通过对他的属性进行标记来区分，并通过对应的wxss文件修改其样式。

比如对于第一个view类amountBg，我么打开me.wxss文件，看到第一段代码

wxss是按照css的格式来的，代码的编写标准可以参考这个：http://css.cuishifeng.cn/index.html。

遇到不懂的可以在里面查，比较方便。大概说一下上面这段的意思：

display: flex——设置为弹性伸缩

flex-direction: row——横向从左到右排列

height: 100px——高度为100px，px是尺寸单位

background-color: #5495e6——背景颜色，具体颜色代码我在第一篇里说了网址，也可以百度搜，这里再给一个http://cha.buyiju.com/tool/color.html。

align-items: center——弹性盒子元素在该行的纵轴上居中放置。

遇到其他不懂的去查代码标准的那个网址就是了。

在第二个view类img中我们可以看到其中包含了一个叫open-data的类。

Open-data是一个开放的框架，它可以直接显示用户的基础数据而不用经过用户授权，常用在不需要把用户数据传到后台数据库的时候。

它使用type来表示不同的含义：

zh_CN是简体中文的意思。

具体文档在这里：https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html

第一部分看完了，来看一下第二部分

重点说一下收藏列表的实现：

这里新出现了两个东西，bindtap属性和image类

这个bindtap表示当用户点击时，触发onCollectClick事件，而这个事件在me.js里定义了，我们看一下：

发现是一个跳转到新页面的功能。me.js是小程序的逻辑关系，下次再说。

Image类是展示图片的方法，其中src表示要展示图片的相对路径。

"./" 代表当前文件夹。

“../”表示当前文件夹的上一级目录，即pages。

“../../“表示”再向上一层，即miniprogram文件夹。

还有一种叫绝对路径，比如C:WindowsSystem32，但一般不用。

这里看到image类还有一个style属性来规定图片大小，其实就是修改样式，和wxss的功能一样。

只不过为了省事，有时候直接在wxml里写了，你也可以给这个image定一个“class = tupian “这种，然后在wxss里编写tupian这个class的样式，最后是一样的效果。

先说这么多，是不是有点啰嗦哈哈哈，下次再说js文件。