共计 972 个字符，预计需要花费 3 分钟才能阅读完成。
1. switches.vue 组件：
上传中 …]
组件原则：解耦在这个组件中，将点击组件的索引传播即可
methods: {
switchItem(index) {
this.$emit(‘switch’, index)
}
}
高亮样式
.switch-item
flex: 1
padding: 8px
text-align: center
font-size: $font-size-medium
color: $color-text-d
&.active
background: $color-highlight-background
color: $color-text
2.tab 栏切换，两个滚动列表边界逻辑
1. 在 watch 中
query(newVal) {
// 切换 tab 栏的时候，刷新 scroll
if (!newVal) {
this.refreshList()
}
}
2. methods 中定义方法，刷新两个滚动组件
refreshList() {
setTimeout(() => {
if (this.currentIndex === 0) {
this.$refs.songList.refresh()
} else {
this.$refs.searchList.refresh()
}
}, 20)
},
3. add-song.vue 和 search.vue：mixin
两个组件有公共方法，所以使用 mixin
export const searchMixin = {
data() {
return {
query: ”,
refreshDelay: 120
}
},
computed: {
…mapGetters([
‘searchHistory’
])
},
methods: {
onQueryChange(query) {
this.query = query
},
// 开始滚动的时候输入框的键盘收缩，调用子组件中 input，blur 事件，收缩键盘
blurInput() {
this.$refs.searchBox.blur()
},
addQuery() {
this.$refs.searchBox.setQuery(this.query)
},
// 保存搜索历史
saveSearch() {
this.saveSearchHistory(this.query)
},
…mapActions([
‘saveSearchHistory’,
‘deleteSearchHistory’
])
}
}
