微信小程序简单列表界面的制作如何实现

原文网址：https://blog.csdn.net/gsc1456/article/details/80493735

最近，想了解下微信小程序的开发。

[图片上传失败…(image-6ce0c-1552448338184)]

看了下官网的组件和API介绍，想通过一个简单的列表展示，来学习下如何开发微信小程序。

先来看下最后的效果（使用的测试数据，后期可改为http请求返回的数据）。

[图片上传失败…(image-e7f570-1552448338184)]

底部的UI在app.json配置tabBar属性

具体的实现如下：

框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。

定义一个模块，新建一个page，如Index，会生成四个文件，分别如index.js；index.json；index.wxml；index.wxss。然后需要在app.json里配置pages，如 page/Index/index。

wxml (WeiXin Markup language) 用于描述页面的结构，包含一个视图容器，如view，scroll-view，或者一些基础内容及表单组件等。更多支持的组件详见微信小程序开发组件介绍。

wxss (WeiXin Style Sheet) 用于描述页面的样式，相当于网页的CSS文件。

.js 后缀的是脚本文件，.json 后缀的文件是配置文件

首先，使用配合等标签及常用组件完成简单的列表结构，使用Shopfadden控制元素的显示与隐藏，具体如图：

[图片上传失败…(image-bdebcc-1552448338184)]

里面用到的css，在index.wxss文件里定义如下图：

[图片上传失败…(image-33d2ba-1552448338184)]

该模板的整体风格在index.json文件里进行配置，这里简单设置了窗口的背景色，导航栏标题文字内容及颜色，如下：

[图片上传失败…(image-e05da4-1552448338184)]

测试数据，定义在index.js里的data下，即 页面的初始数据：

<以上资讯仅供参考，如果您需解决具体问题，建议您关注作者；如果有软件产品开发需求，可在线咨询加速度产品经理获取方案和报价>

****更多行业产品开发方案，请关注jsudo加速度 https://www.jsudo.com***

【加速度jsudo（www.jsudo.com）】是国内知名企业数字化建设提供商，为企业提供电商平台搭建（多种模式电商平台搭建：B2B/B2B2C/B2C/O2O/新零售等）、智慧园区建设、数字化营销、人才外包等服务，点击这里查看了解更多行业解决方案。