1. ~~~ //使用頁面 data: { /* 是否加載更多數據 */ more:0 }, //當到達底部時隨機生成一個隨機數 然后將隨機數傳給子組件 在子組件中有一個observed屬性表示只用值發生改變就會觸發該函數 （監聽傳來的值改變） ~~~ properties: { more: { type: Number, observer: '_loadMore' } }, ~~~ onReachBottom(){ this.setData({ more:Math.random() }) } <v-search wx:if="{{isSearch}}" bind:cancel="onCancel" more="{{more}}"></v-search> ~~~ ~~~ //組件中的js // components/search/index.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({ /** * 組件的屬性列表 */ properties: { more: { type: Number, observer: '_loadMore' } }, behaviors: [paginationBev], /** * 組件的初始數據 */ data: { history_words: [], hot_words: [], clear: false, value: null, /* 是否顯示搜索結構 */ isSearch: false, /* 表示是否向服務器在發送請求 */ loading: false, }, /** * 組件的方法列表 */ attached() { this.setData({ history_words: keywordModel.getHistory() }) keywordModel.getHot().then(res => { this.setData({ hot_words: res.hot }) }) }, methods: { _loadMore() { let length = this.getCurrentStart(); /* 在開始請求之前loading設置為true */ /* 只有有關鍵詞的情況下,才觸發搜索 */ if (this.data.value && this.hasMore()) { /* 自定義下拉滾動 */ /* 下拉出現 */ this._showLoading(); bookModel.search(length, this.data.value).then(res => { this.setMoreData(res.books); /* 數據加載完成隱藏 */ this._hideLoading(); },err=>{ this._hideLoading(); }) } }, onConfirm(e) { // this.initialize(); wx.showLoading(); this._showResult(); const value = e.detail.value || e.detail.text; bookModel.search(0, value).then(res => { this.setMoreData(res.books); this.setTotal(res.total); if(res.total == 0){ this.setData({ noneResult:true }) } /* 只有在服務器中能夠被搜索到的關鍵詞才放入緩存中 */ keywordModel.addToHistory(value); this.setData({ value, history_words:keywordModel.getHistory() }) wx.hideLoading(); }) }, _showLoading(){ this.setData({ loading:true }) }, _hideLoading(){ this.setData({ loading:false }) }, _showResult(){ this.setData({ isSearch:true }) }, onCancel(e) { this.triggerEvent('cancel', {}) }, onFocus() { this.setData({ clear: true }) }, onBlur() { this.setData({ clear: false }) }, onClear() { this.setData({ value: "", isSearch:false }) this.initialize(); } } }) ~~~ ~~~ //組件中公共的 behaviors const paginationBev = Behavior({ data:{ books:[], /* 服務器返回數據的總記錄數 */ total:0, noneResult:false }, methods:{ setMoreData(dataArray){ const tempArray = this.data.books.concat(dataArray); this.setData({ books:tempArray }) }, getCurrentStart(){ return this.data.books.length; }, hasMore(){ if(this.data.books.length>=this.data.total){ return false }else{ return true } }, setTotal(total){ this.data.total = total; if(total==0){ this.setData({ noneResult:true }) } }, initialize(){ this.setData({ books:[], noneResult:false }) this.data.total = null; } } }) export {paginationBev}; <v-loading wx:if="{{loading}}"></v-loading> <view class="noneResult" wx:if="{{noneResult}}">沒有搜索到任何結果</view> ~~~