小程序开发 列表 第1篇
在实际业务中数据肯定不是固定,所以还需用运用到 WXML 语法之数据绑定。数据绑定的数据来源自于js文件data对象,页面上数据绑定使用 Mustache 语法(双大括号)将变量包起来。
小程序data的数据格式为 json。这里是在的data里面添加以下数据。
使用wx:for,数组当前项的变量名默认为 item.
显示效果:数据绑定除了可以应用到for数组对象遍历,还可以应用到单个文本。举个例子把“你来了?”这个问候语改成动态的“你好吗?”。
数据动态从js里面获取了,接下来还有个功能就是通过数据是否为空来控制不同的布局展示。在这里我们要应用到 WXML 语法之条件渲染。
Wxml通过判断 isEmpty 这个变量来控制显示的布局,我们来看下 isEmpty 是在 js 里面如何定义的。
isEmpty根据判断list数组的长度来控制显示,如果数组长度大于0就是false,否则就是true。这里用到了setData函数,这个函数用于设置data数据,因为很多数据并不是一开始就已经定义好了,大部分数据都是通过数据逻辑处理或者从其他数据源才能获得的,所以setData使用频率非常高。绑定isEmpty变量后就直接可以直接影响页面的显示结果了。
只要我们动态的改变data中的list内容就可以控制显示列表还是空布局了。有数据状态:无数据状态:在这里有人肯定会说,为了看个效果还需要删除数据改变代码再编译,好麻烦,能不能简单点?可以!在这里我们需要用到调试器之AppData。在AppData数据区域可以随意修改数据,修改过程中页面实时渲染界面上的数据显示。这里修改的数据不影响实际数据,只用于调试看效果。这句话是不是有点似曾相识?没错就是和之前说过的调试器的Wxml调试样式一样一样的。一个样式调试神器一个数据调试神器,这两个调试工具也是小程序开发过程中最常用的。
到这里,数据列表页面也就完成了90%,还有10%就是替换成动态数据源。上面4个也没按,我们已经完成3个了,接下来还剩下一个添加备忘录页面了。今天 的教程就到此结束了。
这一章节带大家完成了备忘录列表页面,学习了:
以上都是小程序开发常用技术,大家一定要自己实践多次加深印象。
小程序开发 列表 第2篇
输入模型名称
添加列的时候要根据实际情况选择类型,一旦选择后,如果后续需要修改只能把列删掉重新添加
小程序开发 列表 第3篇
首先是要打开我们的工具,无代码开发是基于浏览器进行开发,并不需要我们电脑上安装啥开发工具,也不需要配置环境变量
他的功能呢有点类似于设计软件的figma,也是分为个人空间和共享空间。
个人空间呢主要是你自己创建的项目,只能你自己看得到。而共享空间是分享给别人的项目,大家可以一起在共享空间里协作开发。
然后双击页面的名称就可以进行修改