微信小程序开发(7)：列表页面怎么做

作者：叶小钗 

www.cnblogs.com/yexiaochai/p/9431816.html


接上文： 

微信小程序开发(6)：一个业务页面的完成


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一个意思，这里留待我们下次来处理吧，借此我们微信小程序的学习教程就此结束，我后面几天总结下前面所学整理一个博客出来，帮助各位更好的了解。

感兴趣的小伙伴，可以关注公众号【grain先森】，回复关键词 “小程序”，获取更多资料，更多关键词玩法期待你的探索~

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 220,295评论 6赞 512
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 93,928评论 3赞 396
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 166,682评论 0赞 357
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 59,209评论 1赞 295
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 68,237评论 6赞 397
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,965评论 1赞 308
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,586评论 3赞 420
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,487评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 46,016评论 1赞 319
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,136评论 3赞 340
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,271评论 1赞 352
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,948评论 5赞 347
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,619评论 3赞 331
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,139评论 0赞 23
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,252评论 1赞 272
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,598评论 3赞 375
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 45,267评论 2赞 358

推荐阅读更多精彩内容