微信小程序开发07-列表页面怎么做
github地址：https://github.com/yexiaochai/wxdemo
我们首页功能基本完成，我对比了下实际工作中的需求，完成度有70%以上，如果再花一两天时间，便能跟之前工作做的差不多了，今天我们继续实现一个页面列表，便结束这次的学习，后面几天要出差，所以总结性的文章本周未必能出来，静待下周吧。
这里考虑demo复杂度，列表页功能完成度也仅仅完成主功能模块，与真实工作完成度对比60%左右吧，于是我们开始愉快的代码，首先是将我们的页面样式实现：
<view class="page-wrapper ">
<view class="bus-list js_bus_list ">
<view data-supplierid="100020" data-key="" class="bus-list-item ">
<view class="bus-time"> 08:25</view>
<view class="tobooking"> 预订 </view>
<view class="detail">
<view class="detail1">
<view class="start">
<text class="icon-circle s-icon1"></text>东莞市南城汽车客运站</view>
<view class="end">
<text class="icon-circle s-icon2"></text>连州</view>
</view>
<view class="tags">
<view>
<text class="price">￥135</text>
</view>
<view>
<text class="countleft">10张</text>
</view>
<view>
<text class="b-tags js_tags"></text>
</view>
</view>
</view>
</view>
</view> <view class="bus-list js_bus_list ">
<view data-supplierid="100020" data-key="" class="bus-list-item ">
<view class="bus-time"> 08:25</view>
<view class="tobooking"> 预订 </view>
<view class="detail">
<view class="detail1">
<view class="start">
<text class="icon-circle s-icon1"></text>东莞市南城汽车客运站</view>
<view class="end">
<text class="icon-circle s-icon2"></text>连州</view>
</view>
<view class="tags">
<view>
<text class="price">￥135</text>
</view>
<view>
<text class="countleft">10张</text>
</view>
<view>
<text class="b-tags js_tags"></text>
</view>
</view>
</view>
</view>
</view>
<view class="bus-list js_bus_list ">
<view data-supplierid="100020" data-key="" class="bus-list-item ">
<view class="bus-time"> 08:25</view>
<view class="tobooking"> 预订 </view>
<view class="detail">
<view class="detail1">
<view class="start">
<text class="icon-circle s-icon1"></text>东莞市南城汽车客运站</view>
<view class="end">
<text class="icon-circle s-icon2"></text>连州</view>
</view>
<view class="tags">
<view>
<text class="price">￥135</text>
</view>
<view>
<text class="countleft">10张</text>
</view>
<view>
<text class="b-tags js_tags"></text>
</view>
</view>
</view>
</view>
</view> <include src="../mod/calendar.wxml" />
<include src="../../utils/abstract-page.wxml" /> </view>
.page-wrapper {
margin: 0;
font-size: 28rpx;
line-height: 1.5;
color: #333;
background-color: #efefef;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
-webkit-tap-highlight-color: transparent;
min-height:2000rpx;
}
.bus-list .bus-list-item {
position: relative;
height: 160rpx;
background-color: #fff;
margin: 16rpx 0;
border: 2rpx solid #e5e5e5;
border-width: 2rpx 0;
}
.bus-list .bus-list-item::before,.bus-list .bus-list-item::after {
position: absolute;
left: 122rpx;
content: '';
width: 24rpx;
height: 12rpx;
background-color: #efefef;
border: 2rpx solid #e5e5e5;
}
.bus-list .bus-list-item::before {
border-radius: 0 0 60rpx 60rpx;
border-top: none;
top: -2rpx;
}
.bus-list .bus-list-item::after {
border-radius: 60rpx 60rpx 0 0;
border-bottom: none;
bottom: -2rpx;
}
.bus-list .bus-list-item .bus-time {
position: absolute;
left: 0;
width: 134rpx;
height: 100rpx;
line-height: 100rpx;
margin: 30rpx 0;
color: #00b358;
text-align: center;
font-size: 40rpx;
font-family: Arial;
border-right: 2rpx dashed #e5e5e5;
}
.bus-list .bus-list-item .tobooking {
background-color: #00B358;
position: absolute;
right: 0;
width: 120rpx;
height: 160rpx;
line-height: 160rpx;
text-align: center;
color: #fff;
font-size: 30rpx;
}
.bus-list .bus-list-item.disabled .tobooking {
background-color: #c5c5c5;
}
.bus-list .bus-list-item .detail {
height: 80rpx;
padding: 36rpx 0;
margin: 0 140rpx 0 144rpx;
}
.bus-list .bus-list-item .detail .sub-list{
height: 52rpx;
}
.bus-list .bus-list-item .start, .bus-list .bus-list-item .end {
color: #333333;
font-size: 26rpx;
}
.bus-list .bus-list-item .price {
font-family: Arial;
color: #fd8f01;
font-size: 32rpx;
font-weight: 600;
}
.bus-list .bus-list-item.disabled .ticket {
display: none;
}
.bus-list .bus-list-item .ticket {
color: #fd8f01;
font-size: 24rpx;
border: 2rpx solid #fd8f01;
padding: 2rpx 8rpx;
border-radius: 10rpx;
font-family: Arial;
}
.bus-list .bus-list-item.disabled .ticket {
color: #c5c5c5;
}
.bus-list .bus-list-item .s-icon1 {
margin: 0 10rpx;
border-color: #00B358;
}
.bus-list .bus-list-item .s-icon2 {
margin: 0 10rpx;
border-color: #f06463;
}
.bus-list .bus-list-item .tags {
width: 160rpx;
text-align: right;
position: absolute;
right: 0;
margin-right: 138rpx;
margin-top: 34rpx;
top: 0;
}
轻轻松松完成了页面主体布局：
然后这里需求请求数据，所以我们去设置一个请求实体：
class ListModel extends DemoModel {
constructor() {
super();
this.url = '/schedule/list';
}
}
module.exports = {
cityModel: new CityModel,
city2Model: new City2Model,
listModel: new ListModel
}
开始请求参数：
onLoad: function (data) {
let scope = this;
if(!data || !data.sid || !data.aid || !data.date) {
this.showToast('参数错误');
return
}
this.index = 0;
let listModel = models.listModel;
listModel.setParam({
startcityid: data.sid,
arrivalcityid: data.aid,
startdatetime: data.date / 1000,
page: this.index + 1
});
this.showLoading();
listModel.execute(function(data) {
scope.hideLoading();
scope._appendList(data.schedules);
});
}
接下来的工作便是渲染页面即可，如果不考虑细节，只是做demo，真的很轻易呢：）
//获取公共ui操作类实例
const _page = require('../../utils/abstract-page.js');
let modCalendar = require('../mod/calendar.js');
const models = require('../../data/demo-model.js')
const util = require('../../utils/util.js') //获取应用实例
const app = getApp() Page(_page.initPage({
data: {
listData: []
},
// methods: uiUtil.getPageMethods(),
methods: {
}, goIndex: function () { wx.navigateTo({
url: '../index/index'
})
},
onShow: function () {
global.sss = this;
let scope = this;
}, _appendList: function (data) { for(let i = 0, len = data.length; i < len; i++) {
data[i].dateStr = util.dateUtil.format(new Date(data[i].datetime * 1000), 'H:F' )
} this.setData({
listData: this.data.listData.concat(data)
});
}, onLoad: function (data) {
let scope = this; if(!data || !data.sid || !data.aid || !data.date) {
this.showToast('参数错误');
return
} this.index = 0;
let listModel = models.listModel; listModel.setParam({
startcityid: data.sid,
arrivalcityid: data.aid,
startdatetime: data.date / 1000,
page: this.index + 1
}); this.showLoading();
listModel.execute(function(data) {
scope.hideLoading();
scope._appendList(data.schedules); }); }
}, {
modCalendar: modCalendar
}))
<view class="page-wrapper ">
<view class="calendar-bar-wrapper js_calendar_wrapper">
<view class="bus-tabs calendar-bar">
<view class="tabs-item js_pre_day">前一天</view>
<view class="tabs-item js_show_calendar" style="-webkit-flex: 2; flex: 2;">2018-8-6 周一(明天)</view>
<view class="tabs-item js_next_day">后一天</view>
</view>
</view>
<view class="bus-list js_bus_list "> <block wx:for="{{listData}}" wx:key="k">
<view class="bus-list-item ">
<view class="bus-time">{{item.dateStr}}</view>
<view class="tobooking"> 预订 </view>
<view class="detail">
<view class="detail1">
<view class="start">
<text class="icon-circle s-icon1"></text>{{item.startstationname}}</view>
<view class="end">
<text class="icon-circle s-icon2"></text>{{item.arrivalstationname}}</view>
</view>
<view class="tags">
<view>
<text class="price">￥{{item.price / 100}}</text>
</view>
<view>
<text class="countleft">{{item.cansellcountamount}}张</text>
</view>
<view>
<text class="b-tags js_tags"></text>
</view>
</view>
</view>
</view> </block> </view> <include src="../mod/calendar.wxml" />
<include src="../../utils/abstract-page.wxml" /> <view class="bus-list js_bus_list " ontap="goIndex">
去首页
</view>
</view>
最后，我们完善一下这里日期相关操作，便暂时结束这次学习：
列表页的一些总结
我们做小程序相关学习有快两周了，完成了一个简单的demo，项目还是有一定复杂度，感觉上还是比较适合做小程序了解的，但是也有一些问题，比如写到后面事实上更多是业务的东西了，业务会涉及很多细节体验，需要耗时费力，比如今天的列表业务，显然就偷懒了，代码质量也没怎么关注，事实上大家可以思考一些问题，这里还差很多功能：
① 滚动加载
② 列表各种状态
③ ......
事实上，列表页是常用的一种业务页面，虽然各种列表页的筛选条件不一样，但是主体功能无非都是：
① 列表渲染
② 滚动加载
③ 条件筛选、重新渲染
所以说我们其实可以将其做成一个页面基类，跟abstract-page一个意思，这里留待我们下次来处理吧，借此我们微信小程序的学习教程就此结束，我后面几天总结下前面所学整理一个博客出来，帮助各位更好的了解
微信小程序开发07-列表页面怎么做的更多相关文章
- 微信小程序开发-新闻列表之新闻列表绑定
微信小程序开发-新闻列表之新闻列表绑定开发教程: 1.效果图预览 2.准备工作 在拿到效果图后不要先急着去写代码,而是要去分析一下页面的整体结构,用什么方式定位和布局.小程序里建议使用flex布局,因 ...
- 转载【小程序】： 微信小程序开发---应用与页面的生命周期
App App() App() 函数用来注册一个小程序.接受一个 object 参数,其指定小程序的生命周期函数等. object参数说明: 属性 类型 描述 触发时机 onLaunch Functi ...
- 微信小程序开发 [07] 写在后面的话
写在后面的话基本算是吐槽了,在学完小程序的课程之后,我用博客园的api,写了个闪存的小程序,本来兴致勃勃甚至这篇是准备写"我的第一个小程序发布啦",然而并没有. 不是说我偷懒了没写 ...
- 微信小程序开发 -- 获取当前页面路径
Page.prototype就是this: 你在任何一个Page里面都可以使用route字段和setData()函数: 示例代码: /** * 生命周期函数--监听页面加载 */ onLoad: fu ...
- 微信小程序开发06-一个业务页面的完成
前言 接上文:微信小程序开发05-日历组件的实现 github地址:https://github.com/yexiaochai/wxdemo 这里来说一说我们的理念,我们也学习小程序开发有一周多了,从 ...
- 微信小程序开发系列七：微信小程序的页面跳转
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...
- 微信小程序开发--页面结构
一.微信小程序开发--页面文件组成 [page.name].js 页面逻辑文件,用于创建页面对象,以及处理页面生命周期控制和数据处理 [page.name].wxml wxml指的是Wei Xin M ...
- 微信小程序开发：学习笔记[8]——页面跳转及传参
微信小程序开发:学习笔记[8]——页面跳转及传参 页面跳转 一个小程序拥有多个页面,我们可以通过wx.navigateTo推入一个新的页面.在首页使用2次wx.navigateTo后,页面层级会有三层 ...
- 【微信小程序开发】页面配置
app下的app.json文件是全局配置. app下的每一个page中,也可以配置.json文件. page中配置的内容是对应app中window配置项下的内容. page中的配置将覆盖window中 ...
随机推荐
- JS代码检查工具ESLint
前面的话 ESLint是一个JavaScript代码静态检查工具,可以检查JavaScript的语法错误,提示潜在的bug,可以有效提高代码质量,维持前端团队高度一致的编码风格.ESLint不但提供一 ...
- loj536 「LibreOJ Round #6」花札
一眼二分图博弈,于是我们可以拿到69分的好成绩. 二分图暴力加边的数目是O(n^2)的,于是我们考虑网络流优化建图,将alice的每个牌向其的颜色和编号节点连边,bob的每个牌由其颜色和编号节点向其连 ...
- react VS vue 我们究竟该如何选择(从项目的角度帮你分析)
一.序言 现在web开发最火的两个框架,react和vue.听起来就感觉很牛逼的样子.确实,不得不服,创造出这2种框架的人真的是牛逼.不过更牛逼的是为这2中框架不断完善的人.一个优秀的idea,会在很 ...
- MYSQL—— year类型的使用与注意点！
mysql的日期与时间类型:分为time.date.datetime.timestamp.year,主要总结下year的用法: 1.类型支持:year 与 year(4),注意无year(2)的定义方 ...
- PoiDemo【Android将表单数据生成Word文档的方案之二（基于Poi4.0.0）】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 使用Poi实现android中根据模板文件生成Word文档的功能.这里的模板文件是doc文件.如果模板文件是docx文件的话,请阅读 ...
- ES6--浅析Promise内部结构
首发地址:sau交流学习社区 一.前言 什么是promise?promsie的核心是什么?promise如何解决回调地狱的?等问题 1.什么是promise?promise是表示异步操作的最终结果:可 ...
- 中国.NET：各地微软技术俱乐部汇总(持续更新中...)
中国.NET:各地微软技术俱乐部汇总(持续更新中...) 本文是转载文,源地址: https://www.cnblogs.com/panchun/p/JLBList.html by 史记微软. ...
- SpringCloud学习系列之二 ----- 服务消费者(Feign)和负载均衡(Ribbon)使用详解
前言 本篇主要介绍的是SpringCloud中的服务消费者(Feign)和负载均衡(Ribbon)功能的实现以及使用Feign结合Ribbon实现负载均衡. SpringCloud Feign Fei ...
- 女朋友也能看懂的Zookeeper分布式锁原理
前言 关于分布式锁,在互联网行业的使用场景还是比较多的,比如电商的库存扣减,秒杀活动,集群定时任务执行等需要进程互斥的场景.而实现分布式锁的手段也很多,大家比较常见的就是redis跟zookeep ...
- Java多线程与并发面试题
1,什么是线程? 线程是操作系统能够进行运算调度的最小单位,它被包含在进程之中,是进程中的实际运作单位.程序员可以通过它进行多处理器编程,你可以使用多线程对运算密集型任务提速.比如,如果一个线程完成一 ...