随时随地，阅读小说(mpvue)

写在前言

初次用mpvue来开发，自身对小说比较感兴趣，所以仿了个微信阅读小程序，真的是该遇到的坑都遇到了。如果你还在面临一样的问题，不妨大家交流一下。主要是想看看大家的解决方案，hhhh~
我这里写一些我遇到的问题以及解决方法，随后源码地址我会给出的。
复制代码

用到的技术: mpvue + easy-mock仿数据 + flyio + vuex

效果展示

ps:搜索那里会出现很多重复条，是因为我filter的是整个数据，自己仿的数据，再加onReachBottom加载数据，重复的会很多。大家可以在getters中来处理整个数据的内容，去掉重复的。数据到达之前的，加载效果。我没做。我私底下补一下好了。
复制代码

遇到的问题

• 小程序使用小图标的处理 网址 我是借鉴了这里的
• 搜索框要求，1. 从首页的搜索框进入只会显示搜索历史 2. 在输入框中输入内容，会出现查找内容 3. 从热词进入会出现查找的内容 4. 结果没有找到就输出结果为空

1. 对于搜索框和内容的展示，我采用了不同的组件来做，对于search页面来说，它们就是兄弟节点

<template>
  <div class="container">
    <search-wrapper :tag="tag"></search-wrapper>
    <search-history></search-history>
  </div>
</template>
复制代码

有数据的共享，可以使用eventBus(但鉴于我是接触了vuex,虽然用于小项目不太合适，但是总得练练手不是 emmm~)
复制代码

2. 不同的搜索情况

  watch: {
    tag (newVal, oldVal) {
      this.$store.dispatch('addSearchHistory', this.tag)      
      this.$store.dispatch('searchSomething', {'tag':this.tag})
    }
  },
复制代码

只要是热词点进来的，都要加入搜索历史(searchHistory),和临时的搜索(searchSomething)
复制代码

  methods: {
    tempsearch () {
      this.$store.dispatch('searchSomething', this.inputContent)        
    },
    search () {
      this.$store.dispatch('addSearchHistory', this.inputContent)
    }
  },
复制代码

针对输入框自行输入内容
复制代码

3. 结果为空

   输入框为空，那好说，直接state.tempHistory = []，还有要对tag（热词传进来的时候是以对象的形式）的值判断

   搜索结果为空的提示，要知道临时列表这时候是空的，同一个页面上还有搜索历史的结果存在

   多谢一个数据就好

    tempHistoryState: ''
    if (keys.length) {
        commit(types.ADD_TEMP_HISTORY, data)      
      } else {
        state.tempHistoryState = '暂无搜索结果'
      } 
复制代码

• 文本只显示为两行，我。。。。

  .element 
    display -webkit-box
    overflow hidden
    text-overflow ellipsis
    word-break break-all
    -webkit-box-orient vertical
    -webkit-line-clamp 2
    max-height 100rpx
    transition max-height .3s
  .element.active 
    display inline-block
    max-height 600rpx
    text-align left
  复制代码

    为了让点击更多有过渡的效果（就没有用display值了），同时又不占用其他的位置，给max-height设置transition,在点击之后，把max-height换成合适的值。
    
    tip: 有的人可能担心，那两行效果怎么消除，我改了display为inline-block就可以了，利用它的“包裹性” + text-align left，让多行文本的最后一行居左显示(我一开始设置了居中效果)
  复制代码

• 一个小技巧

  有的data值，在改了一次后，再次进入值为原样，我们可以使用小程序的生命周期(onShow)

  onShow () {
      this.more = false
  }
  复制代码

最后（哈，有头有尾才合适嘛）

我的源码地址

如果大家有问题，欢迎大家提出来。我也学习学习