从后台请求数据、数据绑定与列表渲染实现
2018-06-13原创侠课岛 初级拔高
前端/移动端/小程序前端开发实战-流夏旅行网 35 0 7158
本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。
赞 35
小程序创建和搜索开始页创建 08分04秒
小程序创建和开始页创建,wxml页面和样式wxss建立和基本使用
图片组件使用 05分57秒
image组件使用
内容切换-交互实现 12分36秒
基于Swiper实现内容切换,可以左右滑动
内容切换-样式实现 13分03秒
根据设计图实现样式,传统网页样式在小程序中使用
使用定位API 09分04秒
使用定位API和百度地图实现当前城市名等信息获取
带参数导航跳转 03分33秒
使用navigateTo API实现页面带参数跳转
城市选择-搜索 20分38秒
搜索组件实现、搜索历史、城市选择
城市选择-国内与国际酒店UI实现 32分37秒
根据不同的入口参数,显示不同的城市选择界面,演示外部模板、缓存API、自定义事件、表单元素等的使用
城市选择-国内与国际酒店UI实现02 07分48秒
日期选择-UI实现 36分01秒
日历效果的UI界面实现制作
日期选择-根据路由参数实现不同操作 33分36秒
根据路由参数实现日期选择的不同操作:单日选择、起始选择、价格显示等功能
日期选择-单选和价格显示 18分29秒
单选和价格显示的技术实现
日期选择-数据选择存储与回传 23分52秒
数据选择存储与回传
酒店结果列表 08分11秒
下拉刷新与上拉加载 10分04秒
请求到列表数据后,需要实现往下滚动加载更多数据,下拉到顶部后需要实现刷新页面
数据筛选 制作中...
通过不同的参数实现数据的筛选
详细页实现-相册图片列表 15分26秒
详细页的图片列表与大图查看功能实现
详细页实现-住客评价和详情 04分33秒
详细页的住客评价和详情实现解说
详细页实现-地图位置查看 06分25秒
详细页的地图位置查看功能实现
订单填写UI实现 制作中...
picker组件、form组件、input组件等使用实现订单页面UI
表单验证与提交 制作中...
实现表单提交时的验证和数据的提交处理
显示富文本 制作中...
通过rich-text组件、第三方插件wxParse、web-view组件来显示富文本
通过页面栈传递数据 制作中...
同一组页面栈的页面,从一个页面向另外一个页面传递数据
其他页面实现 制作中...
其他的页面功能实现简单讲解
总结 制作中...
总结回顾本实例使用的技术点和注意点
数据请求、绑定、列表渲染需求从后台请求数据,显示到页面实现思路通过封装的网络请求,请求后端列表数据数据列表渲染与绑定到UI核心知识this.setData({})设置数据,并且更新UI界面{{}} 在WXML中绑定数据wx:for循环数据,默认列表项为item
数据请求、绑定、列表渲染
需求
从后台请求数据,显示到页面
实现思路
通过封装的网络请求,请求后端列表数据
数据列表渲染与绑定到UI
核心知识
this.setData({})设置数据,并且更新UI界面
{{}} 在WXML中绑定数据
wx:for循环数据,默认列表项为item
扫码加微信领取1天全站体验VIP
已签到2天,连续签到7天即可领取7天全站VIP
金币可以用来做什么?
恭喜!签到成功,获得+2积分
react进阶教程,深入了解React的高阶组件,store的最佳实践,reducer性能优化,component性能优化等