金沙棋牌官方平台

当前位置:金沙棋牌 > 金沙棋牌官方平台 > 微信小程序之试手豆瓣图书API,微信小程序之上

微信小程序之试手豆瓣图书API,微信小程序之上

来源:http://www.logblo.com 作者:金沙棋牌 时间:2019-11-22 11:09

Wechat小程序开拓07-列表页面如何是好

2018/08/10 · 幼功技能 · 小程序

原来的书文出处: 叶小钗   

接上文: Wechat小程序开拓06-多少个事情页面包车型地铁姣好

github地址:

我们首页效能为主产生,笔者相比了下实际工作中的供给,达成度有百分之八十上述,若是再花生龙活虎二日时间,便能跟在此之前工作做的大都了,今天我们一而再一而再再而三完成叁个页面列表,便甘休这一次的求学,前边几天要出差,所以总计性的篇章本周不见得能出来,静静等待下一周啊。

此地思虑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="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五个意思,这里留待我们后一次来拍卖呢,借此我们Wechat小程序的就学课程就此截止,小编背后几天计算下眼前所学收11个博客出来,扶助各位越来越好的精晓。

1 赞 收藏 评论

金沙棋牌官方平台 5

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

loadmore

StorageFlag: false,         //呈现寻找记录标识位

然后用一个机械漏刻来动态改造小球Logo的颜料/** * 刷新上拉加载效果变色球 */ 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 ); }

/*搜索*/
.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;
}

 

近些日子Wechat小程序被炒得很销路广,本身也抱着试大器晚成试的神态下载了Wechatweb开采者工具,开垦工具比较轻易,功用相对比非常少,性子化设置也未有。理解完开拓工具之后,顺便看了大器晚成晃小程序的官方开采文档,大约领悟了小程序的花费流程和局地常用的API。领会了小程序之后,本身就有了想要做二个小demo的快乐,就算自身对小程序还未做过众多执行,只是在官方例子上犹豫,不过仍然想做出点小东西。既然要做三个demo,自然须要到数量,本身有又不想单独搭建服务端,所以在英特网检索能够用来提供测量检验数据的无偿api,最终小编采纳了豆瓣图书。豆瓣图书提供的api功效超级少,加上不开放appkey申请,所以不能操効客商数量。只好做点轻松的书本查询和书籍详细新闻呈现,这一个demo只有七个页面,极度之大致。豆瓣图书APIdemo中用到的豆子图书api只有八个,二个是书籍寻找,另三个是收获图书详细情形。搜寻图书GET

加载更加多(分页加载卡塔 尔(英语:State of Qatar)

wxml:

tag查询的tagq和tag必传其生机勃勃

wxml:

 

图书详细页面图书详细页面就是体现具体的书籍新闻,通用首页穿过了的图书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; }

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

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

实在小程序的页面制作跟平常的html和css大致,只是页面中无法用守旧的html标签,而是改用了小程序提供的自定义标签,小程序对css的援助也会有约束,注意怎样写法不合作也差不离懂了。操作页面变化是通过数量变动来显现出来的,这一点有一点像react和vue。以上的demo用到的知识点并相当少,首假如页面包车型大巴数码绑定、事件绑定、模版知识和网络诉求等连锁api。留心看看文书档案也大半能够做出一个小例子。qi

当客户展开二个页面时,假设后台数据量庞大时,一遍性地回去全数数据给客商端,页面的张开速度就能有着回降,并且客商只看上边的剧情而不需求看前面包车型地铁内容时,也浪成本户流量,基于优化的角度来假造,后台不要一遍性重临全数数据,当客户有需求再往下翻的时候,再加载特别数据出来。

 

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

落实原理:

data:{

start取结果的offset默感到0

var util = require('../../utils/util.js')
Page({
data: {
searchKeyword: '', //须求搜求的字符
searchSongList: [], //放置重返数据的数组
isFromSearch: true, // 用于决断searchSongList数组是否空数组,默许true,空的数组
searchPageNum: 1, // 设置加载的第两回,暗中同意是首先次
callbackcount: 15, //重临数据的个数
searchLoading: false, //"上拉加载"的变量,暗中认可false,掩没
searchLoadingComplete: false //“未有数量”的变量,暗中认可false,隐敝
},
//输入框事件,每输入三个字符,就能接触一回
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();
}
}
})

 

以下是切实图书的实际情况消息,部分demo中用不到的新闻省略{ "id":"1003078", "title":"小王子", "alt":"", "image":"", "author":[ "圣Eck苏佩里" ], "publisher":"中中原人民共和国友谊出版集团", "pubdate":"2004-9-1", "rating":{"max":10,"numRaters":9438,"average":"9.1","min":0}, "author_intro":"圣Eck苏佩里(一九零二-一九四三卡塔尔国1904年,玛雅·戴斯特青柠......", "catalog":"序言:法兰西玫瑰n小王子n圣Eck苏佩里年表n" }

 

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

参数意义备注

 

sercherStorage: [],  

参数意义

/*追寻结果*/
.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;
}

<!--查询历史记录数据-->
<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>

q查询关键字q和tag必传其大器晚成

JS:

}

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

<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>

wxss:

德姆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

 

UI:金沙棋牌官方平台 6

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

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

 

动用的主调色参谋了豆瓣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:百分百;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; }

当第叁次访谈接口时,传递2个必要参数(第1次加载,需求重回数据的个数为拾二个卡塔 尔(英语:State of Qatar),和任何参数(要求搜索的字符串卡塔尔国给后台,后台重临第叁次数据复苏。在央浼成功的的回调函数中,判别重回的数额是不是>0,是,则抽取数据,渲染视图层,并把“上拉加载”突显在列表尾巴部分;否,则并不多可取,并把“未有更多”显示在列表后面部分,同不平时候把“上拉加载”隐蔽掉。

 

当点击搜索开关是,触发tap事件,其绑定了searchClick伊夫nt

module.exports = {
getSearchMusic: getSearchMusic
}

js:

首页有图书寻找和列表展现,上拉加载的作用。Wechat小程序中未有了DOM操作的概念,一切的界面成分的变动都要通过数量变化来改动,所以必要在js中的Page中的data中评释相当多数据分子。客户在输入数据时,输入框的input绑定了searchInputEvent事件,就回捕获到输入的多寡,把输入的多寡更新的data中的searchKey中。searchInput伊夫nt: function { this.setData( { searchKey: e.detail.value }); }

util.js:

 
/*二级菜单普通样式*/
 
 .liclass {
 font-size: 14px;
 line-height: 34px;
 color: #575757;
 height: 34px;
 display: block;
 padding-left: 18px;
 background-color: #fff;
 border-bottom: 1px solid #dbdbdb;
}
 
/*二级菜单高亮样式*/
 
 li.highlight {
 background-color: #f4f4f4;
 color: #48c23d;
}

搞好了首页和详细页的静态页面,接下去正是经过互连网央浼api来获取数据,并展示到页面上来。网络诉求和数目管理为了更加好的管住api,作者把api特地放置了一个独自的api.js文件中api.jsconst API_BASE = ""; module.exports = { API_BOOK_SEARCH: API_BASE + "/search", API_BOOK_DETAIL: API_BASE + "/:id" }

别的参数:

},  
//展开历史记录列表
  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();
  },

:id图书id

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

inputValue: "",             //搜索框输入的值  

最后效果图全体来讲,Demo很简单,只有多个页面,分界面也是丑丑的T_T,算是小编入门小程序的率先课吧。[图形上传中。。。]安插继续会有越来越多小例子正在编纂中的德姆o,不久将成功,敬请期望[图片上传中。。。]Hello小程序将与您一同成长。Wechat号:130870319 QQ群:40726600

 

 //清楚输入框数据
  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 != '') {
    //乞请寻觅记录
    }

稍加经常选用的工具函数放到了util.js中util.jsfunction isFunction { return typeof obj === 'function'; } module.exports = { isFunction: isFunction }

wxss:

完结效果与利益:点击搜索框,有追寻记录时以下拉菜单显示,点击下拉子菜单,将数据赋值到搜索框,点击搜索Logo找寻,援救清空历史记录,可手动输入和清空查询关键字,

收获图书详细情形GET

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

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

 

Wechat小程序提供了八个用以互联网须求的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 }

作业需要:

上拉加载的功用是叁个小球不停的转移颜色,要求二个颜色列表//刷新动态球颜色 var iconColor = [ '#353535', '#888888' ];

 

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

基于接口的所需参数

[教程]Wechat小程序之试手豆瓣图书API,有demo有本质二零一四-10-13转发作者:oopsguy

 

(1卡塔尔pageindex: 1 //第四次加载

(2卡塔 尔(阿拉伯语:قطر‎callbackcount: 15 //须求重回数据的个数

当顾客已经滚动到列表底部(这里运用到小程序提供的scroll-view组件的bindscrolltolower事件卡塔尔,触发bindscrolltolower事件,参数pageindex+1,再把2个须求参数(第2次加载,要求再次来到数据的个数为15个卡塔尔和别的参数(必要寻觅的字符串卡塔 尔(英语:State of Qatar)给后台,后台把任何的数额再次回到给前台,前台在本来数据的底工上添增加少。

 

必要参数:

本文由金沙棋牌发布于金沙棋牌官方平台,转载请注明出处:微信小程序之试手豆瓣图书API,微信小程序之上

关键词: