微信小程序開發07-列表頁面怎麼作

接上文： 微信小程序開發06-一個業務頁面的完成

github地址：https://github.com/yexiaochai/wxdemo

咱們首頁功能基本完成，我對比了下實際工做中的需求，完成度有70%以上，若是再花一兩天時間，便能跟以前工做作的差很少了，今天咱們繼續實現一個頁面列表，便結束此次的學習，後面幾天要出差，因此總結性的文章本週未必能出來，靜待下週吧。

這裏考慮demo複雜度，列表頁功能完成度也僅僅完成主功能模塊，與真實工做完成度對比60%左右吧，因而咱們開始愉快的代碼，首先是將咱們的頁面樣式實現：

 1 <view class="page-wrapper ">
 2   <view class="bus-list js_bus_list ">
 3     <view data-supplierid="100020" data-key="" class="bus-list-item  ">
 4       <view class="bus-time"> 08:25</view>
 5       <view class="tobooking"> 預訂 </view>
 6       <view class="detail">
 7         <view class="detail1">
 8           <view class="start">
 9             <text class="icon-circle s-icon1"></text>東莞市南城汽車客運站</view>
10           <view class="end">
11             <text class="icon-circle s-icon2"></text>連州</view>
12         </view>
13         <view class="tags">
14           <view>
15             <text class="price">￥135</text>
16           </view>
17           <view>
18             <text class="countleft">10張</text>
19           </view>
20           <view>
21             <text class="b-tags js_tags"></text>
22           </view>
23         </view>
24       </view>
25     </view>
26   </view>
27 
28   <view class="bus-list js_bus_list ">
29     <view data-supplierid="100020" data-key="" class="bus-list-item  ">
30       <view class="bus-time"> 08:25</view>
31       <view class="tobooking"> 預訂 </view>
32       <view class="detail">
33         <view class="detail1">
34           <view class="start">
35             <text class="icon-circle s-icon1"></text>東莞市南城汽車客運站</view>
36           <view class="end">
37             <text class="icon-circle s-icon2"></text>連州</view>
38         </view>
39         <view class="tags">
40           <view>
41             <text class="price">￥135</text>
42           </view>
43           <view>
44             <text class="countleft">10張</text>
45           </view>
46           <view>
47             <text class="b-tags js_tags"></text>
48           </view>
49         </view>
50       </view>
51     </view>
52   </view>
53   <view class="bus-list js_bus_list ">
54     <view data-supplierid="100020" data-key="" class="bus-list-item  ">
55       <view class="bus-time"> 08:25</view>
56       <view class="tobooking"> 預訂 </view>
57       <view class="detail">
58         <view class="detail1">
59           <view class="start">
60             <text class="icon-circle s-icon1"></text>東莞市南城汽車客運站</view>
61           <view class="end">
62             <text class="icon-circle s-icon2"></text>連州</view>
63         </view>
64         <view class="tags">
65           <view>
66             <text class="price">￥135</text>
67           </view>
68           <view>
69             <text class="countleft">10張</text>
70           </view>
71           <view>
72             <text class="b-tags js_tags"></text>
73           </view>
74         </view>
75       </view>
76     </view>
77   </view>
78 
79   <include src="../mod/calendar.wxml" />
80   <include src="../../utils/abstract-page.wxml" />
81 
82 </view>

View Code

  1 .page-wrapper {
  2     margin: 0;
  3     font-size: 28rpx;
  4     line-height: 1.5;
  5     color: #333;
  6     background-color: #efefef;
  7     overflow-x: hidden;
  8     -webkit-overflow-scrolling: touch;
  9     -webkit-tap-highlight-color: transparent;
 10     min-height:2000rpx;
 11 }
 12 
 13 .bus-list .bus-list-item {
 14  position: relative;
 15  height: 160rpx;
 16  background-color: #fff; 
 17  margin: 16rpx 0;
 18  border: 2rpx solid #e5e5e5;
 19  border-width: 2rpx 0;
 20 }
 21 
 22 .bus-list .bus-list-item::before,.bus-list .bus-list-item::after {
 23  position: absolute;
 24  left: 122rpx;
 25  content: '';
 26  width: 24rpx;
 27  height: 12rpx;
 28  background-color: #efefef;
 29  border: 2rpx solid #e5e5e5;
 30 }
 31 
 32 .bus-list .bus-list-item::before {
 33   border-radius: 0 0 60rpx 60rpx;
 34     border-top: none;
 35   top: -2rpx;
 36 }
 37 
 38 .bus-list .bus-list-item::after {
 39   border-radius: 60rpx 60rpx 0 0;
 40     border-bottom: none;
 41   bottom: -2rpx;
 42 }
 43 
 44 .bus-list .bus-list-item .bus-time {
 45  position: absolute;
 46  left: 0;
 47  width: 134rpx;
 48  height: 100rpx;
 49  line-height: 100rpx;
 50  margin: 30rpx 0;
 51  color: #00b358;
 52  text-align: center;
 53  font-size: 40rpx;
 54  font-family: Arial;
 55  border-right: 2rpx dashed #e5e5e5;
 56 }
 57 
 58 .bus-list .bus-list-item .tobooking {
 59  background-color: #00B358;
 60  position: absolute;
 61  right: 0;
 62  width: 120rpx;
 63  height: 160rpx;
 64  line-height: 160rpx;
 65  text-align: center;
 66  color: #fff;
 67  font-size: 30rpx;
 68 }
 69 
 70 .bus-list .bus-list-item.disabled .tobooking {
 71   background-color: #c5c5c5;
 72 }
 73 
 74 .bus-list .bus-list-item .detail {
 75  height: 80rpx;
 76  padding: 36rpx 0;
 77  margin: 0 140rpx 0 144rpx;
 78 }
 79 
 80 .bus-list .bus-list-item .detail  .sub-list{
 81     height: 52rpx;
 82 }
 83 
 84 
 85 .bus-list .bus-list-item .start, .bus-list .bus-list-item .end {
 86  color: #333333;
 87  font-size: 26rpx;
 88  
 89 }
 90 
 91 .bus-list .bus-list-item .price {
 92  font-family: Arial;
 93  color: #fd8f01;
 94  font-size: 32rpx;
 95  font-weight: 600;
 96 }
 97 
 98 .bus-list .bus-list-item.disabled .ticket {
 99  display: none;
100 }
101 
102 .bus-list .bus-list-item .ticket {
103   color: #fd8f01;
104   font-size: 24rpx;
105   border: 2rpx solid #fd8f01;
106   padding: 2rpx 8rpx;
107   border-radius: 10rpx;
108   font-family: Arial;
109 }
110 
111 .bus-list .bus-list-item.disabled .ticket {
112   color: #c5c5c5;
113 }
114 
115 .bus-list .bus-list-item .s-icon1 {
116   margin: 0 10rpx;
117   border-color: #00B358;
118 }
119 
120 .bus-list .bus-list-item .s-icon2 {
121   margin: 0 10rpx;
122   border-color: #f06463;
123 }
124 
125 .bus-list .bus-list-item .tags {
126     width: 160rpx;
127     text-align: right;
128     position: absolute;
129     right: 0;
130     margin-right: 138rpx;
131     margin-top: 34rpx;
132     top: 0;
133 }

View Code

輕輕鬆鬆完成了頁面主體佈局：

而後這裏需求請求數據，因此咱們去設置一個請求實體：

 1 class ListModel extends DemoModel {
 2   constructor() {
 3     super();
 4     this.url = '/schedule/list';
 5   }
 6 }
 7 
 8 module.exports = {
 9   cityModel: new CityModel,
10   city2Model: new City2Model,
11   listModel: new ListModel
12 
13 }

開始請求參數：

 1 onLoad: function (data) {
 2     let scope = this;
 3 
 4     if(!data || !data.sid || !data.aid || !data.date) {
 5       this.showToast('參數錯誤');
 6       return
 7     }
 8 
 9     this.index = 0;
10     let listModel = models.listModel;
11 
12     listModel.setParam({
13       startcityid: data.sid,
14       arrivalcityid: data.aid,
15       startdatetime: data.date / 1000,
16       page: this.index + 1
17     });
18 
19     this.showLoading();
20     listModel.execute(function(data) {
21       scope.hideLoading();
22       scope._appendList(data.schedules);
23 
24     });
25 
26   }

接下來的工做即是渲染頁面便可，若是不考慮細節，只是作demo，真的很輕易呢：）

 1 //獲取公共ui操做類實例
 2 const _page = require('../../utils/abstract-page.js');
 3 let modCalendar = require('../mod/calendar.js');
 4 const models = require('../../data/demo-model.js')
 5 const util = require('../../utils/util.js')
 6 
 7 //獲取應用實例
 8 const app = getApp()
 9 
10 Page(_page.initPage({
11   data: {
12     listData: []
13   },
14   // methods: uiUtil.getPageMethods(),
15   methods: {
16   },
17 
18   goIndex: function () {
19 
20     wx.navigateTo({
21       url: '../index/index'
22     })
23   },
24   onShow: function () {
25     global.sss = this;
26     let scope = this;
27   },
28 
29   _appendList: function (data) {
30 
31     for(let i = 0, len = data.length; i < len; i++) {
32       data[i].dateStr = util.dateUtil.format(new Date(data[i].datetime * 1000), 'H:F' )
33     }
34 
35     this.setData({
36       listData: this.data.listData.concat(data)
37     });
38   },
39 
40   onLoad: function (data) {
41     let scope = this;
42 
43     if(!data || !data.sid || !data.aid || !data.date) {
44       this.showToast('參數錯誤');
45       return
46     }
47 
48     this.index = 0;
49     let listModel = models.listModel;
50 
51     listModel.setParam({
52       startcityid: data.sid,
53       arrivalcityid: data.aid,
54       startdatetime: data.date / 1000,
55       page: this.index + 1
56     });
57 
58     this.showLoading();
59     listModel.execute(function(data) {
60       scope.hideLoading();
61       scope._appendList(data.schedules);
62 
63     });
64 
65   }
66 }, {
67   modCalendar: modCalendar
68 }))

View Code

 1 <view class="page-wrapper ">
 2   <view class="calendar-bar-wrapper js_calendar_wrapper">
 3     <view class="bus-tabs calendar-bar">
 4       <view class="tabs-item js_pre_day">前一天</view>
 5       <view class="tabs-item js_show_calendar" style="-webkit-flex: 2; flex: 2;">2018-8-6 週一(明天)</view>
 6       <view class="tabs-item js_next_day">後一天</view>
 7     </view>
 8   </view>
 9   <view class="bus-list js_bus_list ">
10 
11     <block wx:for="{{listData}}" wx:key="k">
12       <view class="bus-list-item  ">
13         <view class="bus-time">{{item.dateStr}}</view>
14         <view class="tobooking"> 預訂 </view>
15         <view class="detail">
16           <view class="detail1">
17             <view class="start">
18               <text class="icon-circle s-icon1"></text>{{item.startstationname}}</view>
19             <view class="end">
20               <text class="icon-circle s-icon2"></text>{{item.arrivalstationname}}</view>
21           </view>
22           <view class="tags">
23             <view>
24               <text class="price">￥{{item.price / 100}}</text>
25             </view>
26             <view>
27               <text class="countleft">{{item.cansellcountamount}}張</text>
28             </view>
29             <view>
30               <text class="b-tags js_tags"></text>
31             </view>
32           </view>
33         </view>
34       </view>
35 
36     </block>
37 
38   </view>
39 
40   <include src="../mod/calendar.wxml" />
41   <include src="../../utils/abstract-page.wxml" />
42 
43 
44   <view class="bus-list js_bus_list " ontap="goIndex">
45     去首頁
46   </view>
47 </view>

View Code

最後，咱們完善一下這裏日期相關操做，便暫時結束此次學習：

列表頁的一些總結

咱們作小程序相關學習有快兩週了，完成了一個簡單的demo，項目仍是有必定複雜度，感受上仍是比較適合作小程序瞭解的，可是也有一些問題，好比寫到後面事實上更可能是業務的東西了，業務會涉及不少細節體驗，須要耗時費力，好比今天的列表業務，顯然就偷懶了，代碼質量也沒怎麼關注，事實上你們能夠思考一些問題，這裏還差不少功能：

① 滾動加載

② 列表各類狀態

③ ......

事實上，列表頁是經常使用的一種業務頁面，雖然各類列表頁的篩選條件不同，可是主體功能無非都是：

① 列表渲染

② 滾動加載

③ 條件篩選、從新渲染

因此說咱們其實能夠將其作成一個頁面基類，跟abstract-page一個意思，這裏留待咱們下次來處理吧，藉此咱們微信小程序的學習教程就此結束，我後面幾天總結下前面所學整理一個博客出來，幫助各位更好的瞭解