俄罗斯贵宾会-俄罗斯贵宾会官网
做最好的网站

微信小程序开发07-列表页面怎么做

微信小程序开发07-列表页面怎么做

2018/08/10 · 基础技术 · 小程序

原文出处: 叶小钗   

接上文: 微信小程序开发06-一个业务页面的完成

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<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>

CSS

.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; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
.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;
}

轻轻松松完成了页面主体布局:

图片 1

然后这里需求请求数据,所以我们去设置一个请求实体:

class ListModel extends DemoModel { constructor() { super(); this.url = '/schedule/list'; } } module.exports = { cityModel: new CityModel, city2Model: new City2Model, listModel: new ListModel }

1
2
3
4
5
6
7
8
9
10
11
12
13
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); }); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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 }))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
//获取公共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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<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>

图片 2

最后,我们完善一下这里日期相关操作,便暂时结束这次学习:

图片 3

图片 4

列表页的一些总结

我们做小程序相关学习有快两周了,完成了一个简单的demo,项目还是有一定复杂度,感觉上还是比较适合做小程序了解的,但是也有一些问题,比如写到后面事实上更多是业务的东西了,业务会涉及很多细节体验,需要耗时费力,比如今天的列表业务,显然就偷懒了,代码质量也没怎么关注,事实上大家可以思考一些问题,这里还差很多功能:

① 滚动加载

② 列表各种状态

③ ……

事实上,列表页是常用的一种业务页面,虽然各种列表页的筛选条件不一样,但是主体功能无非都是:

① 列表渲染

② 滚动加载

③ 条件筛选、重新渲染

所以说我们其实可以将其做成一个页面基类,跟abstract-page一个意思,这里留待我们下次来处理吧,借此我们微信小程序的学习教程就此结束,我后面几天总结下前面所学整理一个博客出来,帮助各位更好的了解。

1 赞 收藏 评论

图片 5

[教程]微信小程序之试手豆瓣图书API,有demo有真相2016-10-13转载作者:oopsguy

最近微信小程序被炒得很火热,本人也抱着试一试的态度下载了微信web开发者工具,开发工具比较简洁,功能相对比较少,个性化设置也没有。了解完开发工具之后,顺便看了一下小程序的官方开发文档,大概了解了小程序的开发流程和一些常用的API。了解了小程序之后,自己就有了想要做一个小demo的冲动,虽然自己对小程序还没有做过很多实践,只是在官方例子上徘徊,但是还是想做出点小东西。既然要做一个demo,自然需要到数据,自己有又不想独自搭建服务端,所以在网上搜索可以用来提供测试数据的免费api,最后我选择了豆瓣图书。豆瓣图书提供的api功能比较少,加上不开放appkey申请,所以无法操作用户数据。只能做点简单的图书查询和图书详细信息展示,这个demo只有两个页面,非常之简单。豆瓣图书APIdemo中用到的豆瓣图书api只有两个,一个是图书搜索,另一个是获取图书详情。搜索图书GET https://api.douban.com/v2/book/search

参数意义备注

q查询关键字q和tag必传其一

tag查询的tagq和tag必传其一

start取结果的offset默认为0

count取结果的条数默认为20,最大为100

返回status=200{ "start": 0, "count": 10, "total": 30, "books" : [Book, ...] }

获取图书详情GET https://api.douban.com/v2/book/:id

参数意义

:id图书id

以下是具体图书的详情信息,部分demo中用不到的信息省略{ "id":"1003078", "title":"小王子", "alt":"https://book.douban.com/subject/1003078/", "image":"https://img3.doubanio.com/mpic/s1001902.jpg", "author":[ "圣埃克苏佩里" ], "publisher":"中国友谊出版公司", "pubdate":"2000-9-1", "rating":{"max":10,"numRaters":9438,"average":"9.1","min":0}, "author_intro":"圣埃克苏佩里(1900-1944)1900年,玛雅·戴斯特莱姆......", "catalog":"序言:法兰西玫瑰n小王子n圣埃克苏佩里年表n" }

Demo编写创建项目项目取名为DouBanBookApp,项目的结构小程序默认的结构一样DouBanBookApp pages index 首页 index.js index.wxml index.wxss detail 详情页 detail.js detail.wxml detail.wxss requests api.js API地址 request.js 网络请求 utils util.js 工具 app.js app.json app.wxss

应用的主调色参考了豆瓣app的色调,采用了偏绿色。首页首页顶部展示搜索输入框,用户输入图书名称,点击搜索按钮,展示图书列表。图书可能会很多,不能一下子全部展示,需要用到分页,app上最常见的列表分页就是上拉加载模式,根据小程序提供的组件中,找到了一个比较符合场景的scroll-view组件,这个组件有一个下拉到底部自动触发的bindscrolltolower事件。先制作出界面的静态效果,之后再整合API,由于本人对界面设计不敏感,所以随便弄了一个粗糙的布局,看得过去就行了,嘿嘿~~index.wxml<view > <input type="text" placeholder="输入书名搜索"></input><icon type="search" size="20"/></view><scroll-view scroll-y="true" style="width:100%;position:relative;top:40px;height:200px"> <view style="text-align:center;padding-top:50rpx;"> <icon type="cancel" color="red" size="40" /> <view><text>没有找到相关图书</text></view> </view> <view style="text-align:center;padding-top:50rpx;"> <icon type="search" size="60" /> <view><text>豆瓣图书</text></view> </view> <view > <text>图书 10本图书</text> </view> <view > <view > <view > <view > <image src="images/demo.png"></image> </view> <view > <view >图书标图</view> <text >9.0/oopsguy/2016-07-08</text> </view> </view> </view> </view> <view > <icon type="waiting" size="30" color="reed" /> </view></scroll-view>index.wxsspage { background: #F2F1EE; } /seach/ .search-container { position: fixed; top: 0; right: 0; left: 0; background-color: #42BD56; color: #FFF; height: 40px; padding: 0 10rpx; z-index: 100; } .search-container input { background: #FFF; color: #AAA; margin-top: 5px; padding: 5px 10rpx; height: 20px; border-radius: 8rpx; } .search-container icon { position: absolute; top: 10px; right: 20rpx; } /header/ .header { padding: 20rpx 30rpx; } .header text { color: #A6A6A6; } /common list/ .list-item { position: relative; overflow: hidden } /index list/ .index-list-item { background: #FFF; padding: 15rpx 30rpx; overflow: hidden; } .index-list-item::active { background: #EEE; } .index-list-item .cover { float: left; width: 120rpx; height: 160rpx; overflow: hidden } .index-list-item .cover image.cover-img { width: 120rpx; height: 160rpx; } .index-list-item .content { margin-left: 140rpx; } .index-list-item .title { display: inline-block; height: 90rpx; padding-top: 20rpx; overflow: hidden; } .index-list-item .desc { display: block; font-size: 30rpx; padding-top: 10rpx; color: #AAA; white-space:nowrap; overflow: hidden; text-overflow: ellipsis; } .refresh-footer { text-align: center; padding: 10rpx 0; }

本文由俄罗斯贵宾会发布于Web前端,转载请注明出处:微信小程序开发07-列表页面怎么做

您可能还会对下面的文章感兴趣: