微信小程序之上拉加载更加多,微信小程序支付07

微信小程序开发07-列表页面如何做

2018/08/10 · 基本功技术 ·
小程序

原来的文章出处: 叶小钗   

接上文: 微信小程序开发06-三个作业页面的姣好

github地址:

作者们首页功用核心做到,作者比较了下实际工作中的供给,完毕度有70%上述,假若再花一二日时间,便能跟以前工作做的基本上了,前日大家继承贯彻二个页面列表,便停止此次的学习,后边几天要出差,所以总计性的作品本周未必能出去,静待下一周呢。

那边考虑demo复杂度,列表页功能实现度也单独实现主成效模块,与实际工作完毕度相比较百分之六十左右啊,于是大家初始喜欢的代码,首先是将大家的页面样式达成:

<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=”一千20″
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=”壹仟20″
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
/ 一千, 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有本质二〇一六-10-13转发小编:oopsguy

贯彻效益:点击搜索框,有追寻记录时以下拉菜单展现,点击下拉子菜单,将数据赋值到搜索框,点击搜索图标搜索,协理清空历史记录,可手动输入和清空查询关键字,

loadmore

近期微信小程序被炒得非常流行热,自己也抱着试一试的神态下载了微信web开发者工具,开发工具比较短小,功用相对相比少,本性化设置也尚未。驾驭完开发工具之后,顺便看了弹指间小程序的官方开发文档,差不多精晓了小程序的支付流程和局地常用的API。理解了小程序之后,自个儿就有了想要做3个小demo的激动,就算自个儿对小程序还未曾做过许多执行,只是在法定例子上犹犹豫豫,可是依旧想做出点小东西。既然要做三个demo,自然需求到数量,本身有又不想单独搭建服务端,所以在网上检索能够用来提供测试数据的免费api,最终本人选拔了豆瓣图书。豆瓣图书提供的api成效比较少,加上不开放appkey申请,所以不能操功能户数量。只好做点简单的图书查询和书本详细音讯展现,那些demo唯有七个页面,万分之差不多。豆子图书APIdemo中用到的豆子图书api只有多个,四个是书本搜索,另一个是获取图书详情。查找图书GET

 

加载越来越多(分页加载)

参数意义备注

UI:美高梅开户网址 6

 

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

 

当用户打开二个页面时,倘诺后台数据量庞大时,壹遍性地回去全部数据给客户端,页面包车型客车开辟速度就会具有下降,而且用户只看上边的剧情而不供给看前面包车型地铁始末时,也浪耗费户流量,基于优化的角度来考虑,后台不要一回性再次回到全数数据,当用户有需求再往下翻的时候,再加载越发数据出来。

tag查询的tagq和tag必传其一

wxml:

 

start取结果的offset暗许为0

<!–查询历史记录数据–>
<view class=”ddclass” style=”margin-left: 50rpx;z-index:80″
hidden=”{{!StorageFlag}}” style=”z-index:100″>
  <view wx:for=”{{sercherStorage}}” wx:key=”item.id”>
    <view class=”liclass” style=”color:#ec9e14;border-bottom:0;”
id=”{{item.id}}” bindtap=”tapSercherStorage”>
      <text style=”width:100rpx”>{{item.name}}</text>
    </view>
  </view>
  <view wx:if=”{{sercherStorage.length!==0}}”
style=”text-align:center;” bindtap=”clearSearchStorage”>
    <text
style=”text-align:center;color:red;font-size:28rpx”>清空历史记录</text>
  </view>
</view>

工作必要:

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

 

列表滚动到底层时,继续往上拉,加载越来越多内容

返回status=200{ “start”: 0, “count”: 10, “total”: 30, “books” : [Book,
…] }

wxss:

 

获得图书详情GET

/*二级菜单外部容器样式*/
   .ddclass {
 position: absolute;
 width: 100%;
 margin-top: 10px;
 left: 0;
 
}

供给参数:

参数意义

 
/*二级菜单普通样式*/
 
 .liclass {
 font-size: 14px;
 line-height: 34px;
 color: #575757;
 height: 34px;
微信小程序之上拉加载更加多,微信小程序支付07。 display: block;
 padding-left: 18px;
 background-color: #fff;
 border-bottom: 1px solid #dbdbdb;
}
 
/*二级菜单高亮样式*/
 
 li.highlight {
 background-color: #f4f4f4;
 color: #48c23d;
}

(1)pageindex: 1 //第五遍加载

:id图书id

 

(2)callbackcount: 15 //须要回到数据的个数

以下是现实图书的详情音讯,部分demo中用不到的新闻省略{ “id”:”1003078″,
“title”:”小王子”, “alt”:””,
“image”:””, “author”:[
“圣埃克苏佩里” ], “publisher”:”中夏族民共和国友谊出版公司”, “pubdate”:”三千-9-1″,
“rating”:{“max”:10,”numRaters”:9438,”average”:”9.1″,”min”:0},
“author_intro”:”圣Eck苏佩里(一九〇一-1945)一九零二年,玛雅·戴斯特莱姆……”,
“catalog”:”序言:法国玫瑰\n小王子\n圣埃克苏佩里年表\n” }

js:

其余参数:

德姆o编写创制项目花色取名为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

data:{

依照接口的所需参数

利用的主调色参考了豆瓣app的色泽,选取了偏藏蓝。首页首页顶部展现搜索输入框,用户输入图书名称,点击搜索按钮,体现图书列表。图书也许会众多,无法弹指间任何展现,供给用到分页,app上最广泛的列表分页就是上拉加载方式,依据小程序提供的零件中,找到了2个相比适合场景的scroll-view组件,那一个组件有1个下拉到底层自动触发的bindscrolltolower事件。先制作出界面包车型地铁静态效果,之后再整合API,由于自家对界面设计不灵活,所以不管弄了三个粗糙的布局,看得过去就行了,嘿嘿~~index.wxml<view
> <input type=”text”
placeholder=”输入书名搜索”></input><icon type=”search”
size=”20″/></view><scroll-view scroll-y=”true”
style=”width:百分百;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/二零一五-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; }

sercherStorage: [],  

 

书本详细页面书本详细页面正是展示具体的图书音讯,通用首页穿过了的书籍id来收获图书音信之后在呈现出来,获取的历程中大概有延迟,必要二个加载效果来连接detail.wxml<view>
<view > <image src=”images/demo.png”></image>
</view> <view > <view > <text
>图书标题</text> <text >小编:笔者名称</text>
<text >出版社:xxx出版社</text> <text
>出版日期:二〇一〇-05-07</text> </view> <view >
<text >0</text> <text >0</text> </view>
</view> <view > <view
><text>简介</text></view> <text >
那是书籍简介 </text> </view> <view > <view
><text>小编</text></view> <text >
这是我简介 </text> </view></view><loading>
加载中…</loading>detail.wxsspage { background: #EEE; }
.cover-container { background: #42BD56; text-align: center; padding:
50rpx 0; } .cover-container image { display: inline-block; width:
300rpx; height: 400rpx; } .book-meta { position: relative; padding:
20rpx; overflow: hidden; } .book-meta .range { position: absolute; top:
30rpx; right: 20rpx; width: 180rpx; background: #FFF; padding: 20rpx
10rpx; text-align: center; box-shadow: 2px 2px 10px #CCC; } .book-meta
.meta-info { margin-right: 200rpx; } .meta-info text { display: block }
.book-title { font-weight: bold; font-size: 50rpx; } .other-meta {
padding-top: 10rpx; color: #888; font-size: 30rpx; } .range text {
display: block; } .range .score { font-size: 50rpx; font-weight: bold; }
.range .starts { font-size: 40rpx; } .range .viewers { font-size: 30rpx;
} .book-intro { padding: 20rpx; font-size: 40rpx; } .book-intro
.intro-header { color: #888 } .book-intro .intro-content { font-size:
35rpx; line-height: 45rpx; }

inputValue: “”,             //搜索框输入的值  

落到实处原理:

盘活了首页和详细页的静态页面,接下去正是通过网络请求api来获取数据,并呈现到页面上来。互连网请求和数量处理为了更好的军管api,作者把api专门放置了3个单身的api.js文件中api.jsconst
API_BASE = “”; module.exports = {
API_BOOK_SEARCH: API_BASE + “/search”, API_BOOK_DETAIL: API_BASE +
“/:id” }

StorageFlag: false,         //显示搜索记录标志位

当第贰次访问接口时,传递1个要求参数(第二次加载,须要回到数据的个数为十七个),和别的参数(须求寻找的字符串)给后台,后台再次回到第二回数据苏醒。在乞请成功的的回调函数中,判断再次回到的数码是还是不是>0,是,则取出数据,渲染视图层,并把“上拉加载”显示在列表底部;否,则从未多少可取,并把“没有越多”突显在列表底部,同时把“上拉加载”隐藏掉。

多少日常利用的工具函数放到了util.js中util.jsfunction isFunction { return
typeof obj === ‘function’; } module.exports = { isFunction: isFunction }

}

当用户已经滚动到列表底部(那里运用到小程序提供的scroll-view组件的bindscrolltolower事件),触发bindscrolltolower事件,参数pageindex+1,再把二个必备参数(第3次加载,供给返回数据的个数为1四个)和其余参数(供给摸索的字符串)给后台,后台把别的的数目重回给前台,前台在原先数据的根底上添加多少。

微信小程序提供了二个用于网络请求的api:wx.request,具体的参数跟jquery的ajax方法大多,为了便于调用,小编把网络请求放到了request.js中request.jsvar
api = require(‘./api.js’); var utils = require(‘../utils/util.js’);
/** * 网路请求 / function request(url, data, successCb, errorCb,
completeCb) { wx.request({ url: url, method: ‘GET’, data: data, success:
function { utils.isFunction(successCb) && successCb; }, error:
function() { utils.isFunction && errorCb(); }, complete: function() {
utils.isFunction(completeCb) && completeCb; } /
* * 搜索图书 /
function requestSearchBook(data, successCb, errorCb, completeCb) {
request(api.API_BOOK_SEARCH, data, successCb, errorCb, completeCb); }
/
* * 获取图书详细消息 */ function requestBookDokDetail(id, data,
successCb, errorCb, completeCb) {
request(api.API_BOOK_DETAIL.replace(‘:id’, id), data, successCb,
errorCb, completeCb); } module.exports = { requestSearchBook:
requestSearchBook, requestBookDokDetail: requestBookDokDetail }

 

 

首页有图书搜索和列表展示,上拉加载的机能。微信小程序中从不了DOM操作的定义,一切的界面成分的改变都要经过数据变动来改变,所以须要在js中的Page中的data中注解很多数据成员。用户在输入数据时,输入框的input绑定了searchInput伊芙nt事件,就回捕获到输入的多寡,把输入的数据更新的data中的searchKey中。searchInput伊夫nt:
function { this.setData( { searchKey: e.detail.value }); }

  //获取输入框的输入音信
  bindInput: function (e) {
    this.setData({
      inputValue: e.detail.value
    })
  },

wxml:

当点击搜索按钮是,触发tap事件,其绑定了searchClick伊芙nt

 //清楚输入框数据
  clearInput:function(){
    this.setData({
      inputValue: “”
    })
  },
  //清楚缓存历史并关闭历史搜索框
  clearSearchStorage: function () {
    wx.removeStorageSync(‘searchData’)
    this.setData({ sercherStorage: [],
      StorageFlag: false,  })
  },
  //点击缓存搜索列表
  tapSercherStorage:function(e)
{
    var that = this;
    var index = parseInt(e.currentTarget.id);
    for (var j = 0; j < that.data.sercherStorage.length; j++) {
      if (j == index) {
        //将所选的搜索历史加到搜素框
        this.setData({
          inputValue: that.data.sercherStorage[j].name,
          StorageFlag: false,   
        })
      }}
    if (this.data.inputValue != ”) {
    //请求搜索记录
    }

<view class=”search”>
<view class=”search-bar”>
<view class=”search-wrap”>
<icon type=”search” size=”16″ class=”icon-search” />
<input type=”text” placeholder=”请输入搜索内容” class=”search-input”
name=”searchKeyword” bindinput=”bindKeywordInput”
value=”{{searchKeyword}}” />
</view>
<view class=”search-cancel”
bindtap=”keywordSearch”>搜索</view>
</view>
<view class=”search-result”>
<scroll-view scroll-y=”true”
bindscrolltolower=”searchScrollLower”>
<view class=”result-item” wx:for=”{{searchSongList}}” wx:key=”unique”
data-data=”{{item}}” >
<view class=”icon{{item.isonly==’0′ ? ‘ nocopyright’ :
”}}”></view>
<text class=”title”>{{item.songname}}</text>
<view class=”subtitle”>
<text wx:for=”{{item.singer}}”
wx:key=”unique”>{{item.name}}</text>
</view>
</view>
<view class=”loading”
hidden=”{{!searchLoading}}”>正在载入愈多…</view>
<view class=”loading complete”
hidden=”{{!searchLoadingComplete}}”>已加载全部</view>
</scroll-view>
</view>
</view>

searchClickEvent: function { if( !this.data.searchKey ) return;
this.setData( { pageIndex: 0, pageData: [] }); requestData.call; }

},  
//打开历史记录列表
  openLocationsercher:function(e)
  {
    this.setData({
      sercherStorage: wx.getStorageSync(‘searchData’) || [],  
//调用API从当地缓存中获取数据
      StorageFlag: true,
      listFlag: true,
    })
  },
美高梅开户网址,//添加搜索记录并招来
  setSearchStorage: function () {
    //let data;
    var that=this;
  //let localStorageValue = [];
    if (this.data.inputValue != ”) {
      //将搜索记录更新到缓存
      var searchData = that.data.sercherStorage;
      searchData.push({
        id: searchData.length,
        name: that.data.inputValue})
      wx.setStorageSync(‘searchData’, searchData);
      that.setData({ StorageFlag: false,})
      
      //请求搜索
      /*wx.request({
        url: ”,
        data: {SercherValue:that.data.inputValue,
            SercherTypeNum:that.data.SercherTypeNum,
            typeItem:that.data.typeItem },
        header: {},
        method: ”,
        dataType: ”,
        success: function(res) {},
        fail: function(res) {},
        complete: function(res) {},
      })*/
      //wx.navigateTo({
      //  url: ‘../result/result’
     // })
      // console.log(‘马上快要跳转了!’)
    } else {
      console.log(‘空白的你搜个jb’)
    }
    // this.onLoad();
  },

 

requestData中封装了请求图书列表的办法/** * 请求图书消息 */ function
requestData() { var _this = this; var q = this.data.searchKey; var
start = this.data.pageIndex; this.setData( { loadingMore: true, isInit:
false }); updateRefreshBall.call; requests.requestSearchBook( { q: q,
start: start }, => { if( data.total == 0 ) { //没有记录
_this.setData( { totalRecord: 0 }); } else { _this.setData( {
pageData: _this.data.pageData.concat( data.books ), pageIndex: start +
1, totalRecord: data.total }); } }, () => { _this.setData( {
totalRecord: 0 }); }, () => { _this.setData( { loadingMore: false
}); }); }

 

JS:

上拉加载的效益是2个小球不停的变换颜色,需求叁个颜色列表//刷新动态球颜色
var iconColor = [ ‘#353535’, ‘#888888’ ];

var util = require(‘../../utils/util.js’)
Page({
data: {
searchKeyword: ”, //必要寻找的字符
searchSongList: [], //放置再次回到数据的数组
isFromSearch: true, //
用于判断searchSongList数组是还是不是空数组,私下认可true,空的数组
searchPageNum: 1, // 设置加载的第三遍,暗许是率先次
callbackcount: 15, //再次回到数据的个数
searchLoading: false, //”上拉加载”的变量,私下认可false,隐藏
searchLoadingComplete: false //“没有数量”的变量,暗中认可false,隐藏
},
//输入框事件,每输入一个字符,就会触发3回
bindKeywordInput: function(e){
console.log(“输入框事件”)
this.setData({
searchKeyword: e.detail.value
})
},
//搜索,访问网络
fetchSearchList: function(){
let that = this;
let searchKeyword = that.data.searchKeyword,//输入框字符串作为参数
searchPageNum = that.data.searchPageNum,//把第两遍加载次数作为参数
callbackcount =that.data.callbackcount; //再次来到数据的个数
//访问网络
util.getSearchMusic(searchKeyword, searchPageNum,callbackcount,
function(data){
console.log(data)
//判断是或不是有数量,有则取多少
if(data.data.song.curnum != 0){
let searchList = [];
//倘诺isFromSearch是true从data中取出数据,否则先从原来的数据继续丰盛
that.data.isFromSearch ? searchList=data.data.song.list :
searchList=that.data.searchSongList.concat(data.data.song.list)
that.setData({
searchSongList: searchList, //获取数据数组
zhida: data.data.zhida, //存放明星属性的靶子
searchLoading: true //把”上拉加载”的变量设为false,展现
});
//没有数据了,把“没有数据”显示,把“上拉加载”隐藏
}else{
that.setData({
searchLoadingComplete: true, //把“没有数据”设为true,呈现
searchLoading: false //把”上拉加载”的变量设为false,隐藏
});
}
})
},
//点击搜索按钮,触发事件
keywordSearch: function(e){
this.setData({
searchPageNum: 1, //第三回加载,设置1
searchSongList:[], //放置重临数据的数组,设为空
isFromSearch: true, //第②次加载,设置true
searchLoading: true, //把”上拉加载”的变量设为true,展现
searchLoadingComplete:false //把“没有多少”设为false,隐藏
})
this.fetchSearchList();
},
//滚动到底层触发事件
searchScrollLower: function(){
let that = this;
if(that.data.searchLoading && !that.data.searchLoadingComplete){
that.setData({
searchPageNum: that.data.searchPageNum+1,
//每回触发上拉事件,把searchPageNum+1
isFromSearch: false //触发到上拉风浪,把isFromSearch设为为false
});
that.fetchSearchList();
}
}
})

然后用三个定时器来动态改变小球图标的颜料/** * 刷新上拉加载效果变色球
*/ function updateRefreshBall() { var cIndex = 0; var _this = this;
var timer = setInterval( function() { if( !_this.data[ ‘loadingMore’
] ) { clearInterval; } if( cIndex >= iconColor.length ) cIndex = 0;
_this.setData( { footerIconColor: iconColor[ cIndex++ ] }); }, 100 );
}

 

详细页面包车型客车来得要求到首页点击了现实图书的id,所以供给首页传值过来,这里运用了小程序的wx.navigateTo方法,给其内定的url参数前面带以询问字符串格式情势的参数,被跳转的页面就会在onLoad方法中获得值。//跳转到详细页面
toDetailPage: function { var bid = e.currentTarget.dataset.bid; //图书id
[data-bid] wx.navigateTo( { url: ‘../detail/detail?id=’ + bid }); }

util.js:

detail.js中经受参数onLoad: function { this.setData({ id: option.id }); }

function getSearchMusic(keyword, pageindex, callbackcount, callback){
wx.request({
url: ”,
data: {
g_tk: 5381,
uin: 0,
format: ‘json’,
inCharset: ‘utf-8’,
outCharset: ‘utf-8’,
notice: 0,
platform: ‘h5’,
needNewCode: 1,
w: keyword,
zhidaqu: 1,
catZhida: 1,
t: 0,
flag: 1,
ie: ‘utf-8’,
sem: 1,
aggr: 0,
perpage: 20,
n: callbackcount, //重临数据的个数
p: pageindex,
remoteplace: ‘txt.mqq.all’,
_: Date.now()
},
method: ‘GET’,
header: {‘content-Type’: ‘application/json’},
success: function(res){
if(res.statusCode == 200){
callback(res.data);
}
}
})
}

事实上小程序的页面制作跟常常的html和css大约,只是页面中无法用古板的html标签,而是改用了小程序提供的自定义标签,小程序对css的支撑也有限量,注意如何写法不般配也大都懂了。操作页面变化是通过数据变动来显现出来的,那点有点像react和vue。以上的demo用到的知识点并不多,首假若页面包车型大巴数码绑定、事件绑定、模版知识和网络请求等相关api。仔细看看文书档案也大多能够做出2个小例子。qi

module.exports = {
getSearchMusic: getSearchMusic
}

末尾效果图一体化来说,Demo很简短,只有七个页面,界面也是丑丑的T_T,算是自身入门小程序的第2课吧。[图片上传中。。。]安插一而再会有愈多小例子正在编辑中的德姆o,不久将不辱义务,敬请期待[图形上传中。。。]Hello小程序将与你共同成长。微信号:130870319
QQ群:40726600

 

wxss:

page{
display: flex;
flex-direction: column;
height: 100%;
}

/*搜索*/
.search{
flex: auto;
display: flex;
flex-direction: column;
background: #fff;
}
.search-bar{
flex: none;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20rpx;
background: #f4f4f4;
}
.search-wrap{
position: relative;
flex: auto;
display: flex;
align-items: center;
height: 80rpx;
padding: 0 20rpx;
background: #fff;
border-radius: 6rpx;
}
.search-wrap .icon-search{
margin-right: 10rpx;
}
.search-wrap .search-input{
flex: auto;
font-size: 28rpx;
}
.search-cancel{
padding: 0 20rpx;
font-size: 28rpx;
}

/*追寻结果*/
.search-result{
flex: auto;
position: relative;
}
.search-result scroll-view{
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
}
.result-item{
position: relative;
display: flex;
flex-direction: column;
padding: 20rpx 0 20rpx 110rpx;
overflow: hidden;
border-bottom: 2rpx solid #e5e5e5;
}

.result-item .media{
position: absolute;
left: 16rpx;
top: 16rpx;
width: 80rpx;
height: 80rpx;
border-radius: 999rpx;
}
.result-item .title,
.result-item .subtitle{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 36rpx;
}
.result-item .title{
margin-bottom: 4rpx;
color: #000;
}
.result-item .subtitle{
color: #808080;
font-size: 24rpx;
}
.result-item:first-child .subtitle text{
margin-right: 20rpx;
}
.result-item:not(:first-child) .subtitle
text:not(:first-child):before{
content: ‘/’;
margin: 0 8rpx;
}
.loading{
padding: 10rpx;
text-align: center;
}
.loading:before{
display: inline-block;
margin-right: 5rpx;
vertical-align: middle;
content: ”;
width: 40rpx;
height: 40rpx;
background: url(../..icon-loading.png) no-repeat;
background-size: contain;
animation: rotate 1s linear infinite;
}
.loading.complete:before{
display: none;
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图