肉饼博客

Talk is cheap. Show me the code.

0%

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

发表于 更新于 分类于 Disqus： 本文字数： 3.4k 阅读时长 ≈ 3 分钟

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