【微信小程序】使用behavior封装search组件

behaviors 是用于组件间代码共享的特性,类似于一些编程语言中的“mixins”或“traits”。
每个 behavior 可以包含一组属性、数据、生命周期函数和方法,组件引用它时,它的属性、数据和方法会被合并到组件中,生命周期函数也会在对应时机被调用。每个组件可以引用多个 behavior 。 behavior 也可以引用其他 behavior

pagination.js
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
const paginationBev = Behavior({
data:{
dataArray:[],
total:null,
noneResult:false,
loading:false
},

methods:{
setMoreData(dataArray){
const tempArray = this.data.dataArray.concat(dataArray)
this.setData({
dataArray:tempArray
})
},

getCurrentStart(){
return this.data.dataArray.length
},

setTotal(total){
this.data.total = total
if (total == 0){
this.setData({
noneResult:true
})
}
},

hasMore(){
if(this.data.dataArray.length >= this.data.total){
return false
} else{
return true
}
},

initialize(){
// this.data.dataArray = []
this.setData({
dataArray:[],
noneResult:false,
loading:false
})
this.data.total = null
},

isLocked(){
return this.data.loading
},

locked(){
// this.data.loading = true
this.setData({
loading:true
})
},

unLocked(){
// this.data.loading = false
this.setData({
loading:false
})
},
}
})

export {paginationBev}
searchCmp.js
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
// components/search/searchCmp.js
import { KeywordModel } from "../../models/keyword";
import { BookModel } from "../../models/book";
import { paginationBev } from "../behaviors/pagination";

const keywordModel = new KeywordModel()
const bookModel = new BookModel()

Component({
behaviors:[paginationBev],
/**
* 组件的属性列表
*/
properties: {
more:{
type:String,
observer:'loadMore'
}
},

/**
* 组件的初始数据
*/
data: {
historyWords:[],
hotWords:[],
searching:false,
q:'',
loadingCenter:false,
},

attached(){
this.setData({
historyWords: keywordModel.getHistory()
})

keywordModel.getHot().then(res => {
this.setData({
hotWords: res.hot
})
})
},

/**
* 组件的方法列表
*/
methods: {
onCancel(e){
this.initialize()
this.triggerEvent('cancel',{},{})
},

onConfirm(e){
this._showResult()
this._showLoadingCenter()
// this.initialize()
const q = e.detail.value || e.detail.text
this.setData({
q
})
bookModel.search(0, q).then(res =>{
this.setMoreData(res.books)
this.setTotal(res.total)
keywordModel.addToHistory(q)
this._hideLoadingCenter()
})
},

onDelete(e){
this.initialize()
this._closeResult()
},

loadMore(){
if(!this.data.q){
return
}
if(this.isLocked()){
return
}
console.log('load more')
// const length = this.data.dataArray.length
if(this.hasMore()){
// this.data.loading = true
this.locked()
bookModel.search(this.getCurrentStart(), this.data.q).then(res =>{
this.setMoreData(res.books)
// this.data.loading = false
this.unLocked()
}, ()=>{
this.unLocked()
})
}
},

_showResult(){
this.setData({
searching: true
})
},

_closeResult(){
this.setData({
searching: false,
q:''
})
},

_showLoadingCenter(){
this.setData({
loadingCenter:true
})
},

_hideLoadingCenter(){
this.setData({
loadingCenter:false
})
},
}
})