小程序书单页面的实现

整体的实现过程
开发book组件

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    book:Object
  },

  /**
   * 组件的初始数据
   */
  data: {
  },
  methods: {
    onTap(event){
      const bid = this.properties.book.id
      wx.navigateTo({
        url:`/pages/fashion-detail/fashion-detail?bid=${bid}`
      })
    }
  }
})

<view bind:tap="onTap" class="container">
	<image class="img" src="{{book.image}}" ></image>
	<view class="description">
		<text class="title">{{book.title}}</text>
		<text class="author">{{book.author}}</text>
		<view class="foot">
			<text class="footer">{{book.fav_nums}} 喜欢</text>
		</view>
	</view>
</view>

book组件应该接收一个book的对象，在page的book主页传过来

<view class="books-container">
			<block  wx:for="{{books}}" wx:key="index">
				<v-book book="{{item}}" />
			</block>
</view>

点击搜索时页面和搜索组件切换
使用wx:if()来决定谁来显示

onSearch(event){
    this.setData({
      searching:true
    })
  },

  onCancel(event){
    this.setData({
      searching:false
    })
  },

<view class="container" wx:if="{{!searching}}">
	<view class="header">
		<view class="box" bind:tap="onSearch">
			<image class="img" src="/images/icon/search.png"></image>
			<text class="text">搜索书籍</text>
		</view>
	</view>
	<view class="sub-container">
		<image class="heade-img" src="/images/book/quality.png"></image>
		<view class="books-container">
			<block  wx:for="{{books}}" wx:key="index">
				<v-book book="{{item}}" />
			</block>
		</view>
	</view>
</view>
<v-search more="{{more}}" bind:cancel="onCancel" wx:if="{{searching}}"/>

新建一个搜索的组件

<view class="container">
	<view class="header">
		<view class="search-container">
			<image class="icon" src="images/search.png"></image>
			<input class="bar" 
				   value="{{q}}" 
				   bindconfirm="onConfirm" 
				   placeholder="请输入书籍名" 
				   placeholder-class="in-bar" 
				   auto-focus="true">
			</input>
			<image bind:tap="onDelete" 
				   class="cancel-img" 
				   src="images/cancel.png">
			</image>
		</view>
		<view class="cancel" bind:tap="onCancel">取消</view>
	</view>
	<view wx:if="{{resultn}}">
		<view class="history">
			<view class="title">
				<view class="chunk"></view>
				<text>历史搜索</text>
			</view>
			<view class="tags">
				<block wx:key="index" wx:for="{{historyWords}}">
					<v-tag bind:tapping="onConfirm"  text="{{item}}"/>
				</block>
			</view>
		</view>
		<view class="history hot-search">
			<view class="title">
				<view class="chunk"></view>
				<text>热门搜索</text>
			</view>
			<view class="tags">
				<block wx:key="index" wx:for="{{hotWords}}" >
					<v-tag bind:tapping="onConfirm"  text="{{item}}"/>
				</block>
			</view>
		</view>
	</view>
	<view wx:if="{{!resultn}}" class="books-container">
		<block wx:for="{{dataArray}}" wx:key="id">
			<v-book book="{{item}}" />
		</block>
	</view>

	<v-loading class="loading-center" wx:if="{{loadingCentenr}}"/>
	<v-loading class="loading" wx:if="{{loading}}" />
	<text wx:if="{{noneResult}}" class="empty-tip">没有搜索到书籍</text>
</view>

// component/search/index.js
import {KeywordModel} from '../../models/keyword.js'
import {BookModel} from '../../models/book.js'
import {paginationBev} from '../behaviors/pagination.js'

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

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

  /**
   * 组件的初始数据
   */
  data: {
    historyWords:[],
    hotWords:[],
    resultn:true,
    q:'',
    loading:false,
    loadingCentenr:false
  },

  attached(){

    const hotWords = keywordModel.getHot()
    .then(res=>{
      this.setData({
        historyWords:keywordModel.getHistory(),
        hotWords:res.hot
    })
  })
  },
  /**
   * 组件的方法列表
   */
  methods: {
    loadMore(event){

      if(!this.data.q){
        return
      }
      if(this.isLocked()){
        return
      }
      if(this.hasMore()){

        this.locked()
        bookModel.search(this.getCurrentStart(),this.data.q)
        .then(res=>{
          this.setMoreData(res.books)
          this.unLocked()
        },()=>{
          this.unLocked()
        })
      }
  },

    onCancel(event){
      this.initialize()
      this.triggerEvent('cancel',{
        
      })
    },

    onConfirm(event){
      this.initialize()
      this._showLoading()
      const q = event.detail.value || event.detail.text
      bookModel.search(0,q).then(res=>{
        this.setMoreData(res.books)
        this.setTotal(res.total)
        keywordModel.addToHistory(q)
        this._hideLoading()
      })
      this.setData({
        resultn: false,
        q:q
      })
    },

    onDelete(event){
      this.initialize()
      this.setData({
        resultn: true,
        q:''
      })
    },

    _showLoading(){
      this.setData({
        loadingCentenr:true
      })
    },

    _hideLoading(){
      this.setData({
        loadingCentenr:false
      })
    },
  }
})

存在的知识点

1. 存储搜索记录
2. 点击搜索记录即可搜索
3. 加载中的图标
4. 加载更多书籍

第一个存储搜索书籍和获取历史数据

getHistory(){ //获取历史书籍数据
		const words = wx.getStorageSync(this.key)
		if(!words){
			return []
		}
		return  words
	}
maxLength = 10
key = 'q'
//存储历史方法，最多十条数据，多了需要删除
addToHistory(keyword){
		let words = this.getHistory()
		const has = words.includes(keyword) //判断历史数据是否存在
		if(!has){
			const length = words.length
			if(length >= this.maxLength){
				words.pop()
			}
			words.unshift(keyword)
			wx.setStorageSync(this.key,words)
		}
	}

在对应的地方调用

keywordModel.addToHistory(q)

historyWords:keywordModel.getHistory(),

第二个是监听确定事件，获取历史获热门的关键字

const q = event.detail.value || event.detail.text