写在前言
初次用mpvue来开发,自身对小说比较感兴趣,所以仿了个微信阅读小程序,真的是该遇到的坑都遇到了。如果你还在面临一样的问题,不妨大家交流一下。主要是想看看大家的解决方案,hhhh~
我这里写一些我遇到的问题以及解决方法,随后源码地址我会给出的。
复制代码
用到的技术: mpvue + easy-mock仿数据 + flyio + vuex
效果展示
ps:搜索那里会出现很多重复条,是因为我filter的是整个数据,自己仿的数据,再加onReachBottom加载数据,重复的会很多。大家可以在getters中来处理整个数据的内容,去掉重复的。数据到达之前的,加载效果。我没做。我私底下补一下好了。
复制代码
遇到的问题
- 小程序使用小图标的处理 网址 我是借鉴了这里的
- 搜索框要求,1. 从首页的搜索框进入只会显示搜索历史 2. 在输入框中输入内容,会出现查找内容 3. 从热词进入会出现查找的内容 4. 结果没有找到就输出结果为空
- 对于搜索框和内容的展示,我采用了不同的组件来做,对于search页面来说,它们就是兄弟节点
<template>
<div class="container">
<search-wrapper :tag="tag"></search-wrapper>
<search-history></search-history>
</div>
</template>
复制代码
有数据的共享,可以使用eventBus(但鉴于我是接触了vuex,虽然用于小项目不太合适,但是总得练练手不是 emmm~)
复制代码
- 不同的搜索情况
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)
}
},
复制代码
针对输入框自行输入内容
复制代码
-
结果为空
输入框为空,那好说,直接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 } 复制代码
最后(哈,有头有尾才合适嘛)
如果大家有问题,欢迎大家提出来。我也学习学习