网站首页 >> 牛刀云小程序开发 >> 第1篇制作模式 >> 页面制作 >> 认识页面

2.3.1.2 页面展示信息

页面上展示的信息绝大部分是图片和文字,也有少部分的音频和视频等多媒体信息。如图4-2所示,这些图片中展示的全都是图片和文字。牛刀云提供图片组件和文本组件,如图4-3所示,在页面中展示图片和文字。

4-3  文本和图片组件

1、静态信息和动态信息

页面上展示的信息分为静态信息和动态信息。静态信息就是不会变化的信息,例如发现页中展示的信息。动态信息是会发生变化的信息,例如微信页中展示的信息。那么图片组件和文本组件如何展示静态信息和动态信息呢?

静态信息因为不会变化,所以在页面中直接设置好即可。

动态信息因为会产生变化,所以需要使用数据集存储这些动态信息,在页面中显示数据集中存储的信息即可。

l  文本组件使用文本属性设置静态文字

l  图片组件使用图片地址设置静态图片

l  文本组件使用动态文本属性关联数据集显示数据集中存储的文字信息

l  图片组件使用动态图片地址关联数据集显示数据集中存储的图片信息

2、单个信息和同类信息

在通讯录页中显示当前用户所有联系人的信息,单击某个联系人,打开新的页面,显示一个联系人的信息,如图4-4所示。因此页面中显示的内容又分为显示单个信息和显示同类信息。

 说明: C:\Users\Administrator\Documents\Tencent Files\465659832\FileRecv\MobileFile\Screenshot_20180412-100114.png

4-4  通讯录及单个联系人

显示单个信息使用图片和文字组件即可。

显示同类信息需要使用动态列表组件,如图4-5所示,绑定数据集,动态列表组件会将数据集中的全部数据都依次显示出来。

4-5  动态列表组件

3、分列显示信息

界面美观和交互性好是用户使用的关键因素。界面美观包括内容布局整齐,如图4-2所示。单独看其中一个联系人的信息,如图4-6所示。联系人信息分为3列,第1列显示联系人头像和未读数。第2列显示联系人名称和最后聊天记录。第3列显示最后聊天时间。

4-6  联系人及最后聊天记录

    将页面中的一行分为3列,在每列中通过图片和文本组件显示图片和文字,形成整齐的页面效果。这种控制显示位置可以通过行列组件来实现,如图4-7所示。行列组件中可以设置多列,每列中还可以设置多行,行中在包括列。通过行列组件可以形成即复杂又整齐的页面。

4-7  行列组件

4、顶部和底部固定

有些页面内容很多,一屏显示不下,显示在最下面的内容要滚动到最下面才能看到,最上面的内容,向上滚动后就看不到。如何实现头部区域和底部区域固定显示在屏幕的顶部和底部,不受中间内容滚动的影响,页面滚动效果如图4-8所示.

说明: C:\Users\Administrator\Documents\Tencent Files\465659832\FileRecv\MobileFile\Screenshot_20180412-110357.png 说明: C:\Users\Administrator\Documents\Tencent Files\465659832\FileRecv\MobileFile\Screenshot_20180412-110504.png

4-8  购物车页面

    牛刀云提供上中下布局组件,如图4-9所示,实现这种效果。上中下布局组件是灵活的,可以顶部和底部都有,可以只有顶部或底部。

4-9  上中下布局组件