隨時隨地，閱讀小說(mpvue)

下雨不愁發表於2018-08-01
Vue

寫在前言

初次用mpvue來開發，自身對小說比較感興趣，所以仿了個微信閱讀小程式，真的是該遇到的坑都遇到了。如果你還在面臨一樣的問題，不妨大家交流一下。主要是想看看大家的解決方案，hhhh~
我這裡寫一些我遇到的問題以及解決方法，隨後原始碼地址我會給出的。
複製程式碼
用到的技術: mpvue + easy-mock仿資料 + flyio + vuex

效果展示

ps:搜尋那裡會出現很多重複條，是因為我filter的是整個資料，自己仿的資料，再加onReachBottom載入資料，重複的會很多。大家可以在getters中來處理整個資料的內容，去掉重複的。資料到達之前的，載入效果。我沒做。我私底下補一下好了。
複製程式碼

隨時隨地，閱讀小說(mpvue)

遇到的問題

  • 小程式使用小圖示的處理 網址 我是借鑑了這裡的
  • 搜尋框要求，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~)
複製程式碼
  1. 不同的搜尋情況
  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)
    }
  },
複製程式碼
針對輸入框自行輸入內容
複製程式碼

  1. 結果為空

    輸入框為空，那好說，直接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
}
複製程式碼

最後（哈，有頭有尾才合適嘛）

我的原始碼地址

如果大家有問題，歡迎大家提出來。我也學習學習

相關文章