uni-APP学习日记7
收藏功能实现
uni-app阻止冒泡
<view class="icons" @click.stop="likeTap"> <!-- @click.stop 阻止自定义组件冒泡 -->
**
## *addToSet*
**
数组更新操作符。原子操作。给定一个或多个元素，除非数组中已存在该元素，否则添加进数组。
*******************************************************************
示例代码 1：添加一个元素
如果 tags 数组中不包含 database，添加进去
const dbCmd = db.command
let res = await db.collection('todos').doc('doc-id').update({
data: {
tags: dbCmd.addToSet('database')
}
})
*******************************************************************
示例代码 2：添加多个元素
需传入一个对象，其中有一个字段 each，其值为数组，每个元素就是要添加的元素
const dbCmd = db.command
let res = await db.collection('todos').doc('doc-id').update({
data: {
tags: dbCmd.addToSet({
each: ['database', 'cloud']
})
}
})
搜索页面
vuex管理历史记录
***
## store文件夹下
***
// Vuex 状态管理
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store =new Vuex({
})
export default store
***
## 在main.js注册
***
import Vue from 'vue'
import App from './App'
import api from './common/api'
import store from './store'//************
Vue.config.productionTip = false
Vue.prototype.$api=api
App.mpType = 'app'
const app = new Vue({
store,//**********
...App
})
app.$mount()
究极体
// Vuex 状态管理
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store =new Vuex.Store({
// 数据源
state:{
// 本地缓存搜索历史
historyList:uni.getStorageSync("_history")||[]//先取本地缓存的数据，没有数据则为空
},
mutations:{
//类似methods，放置方法的
SET_HISTORY_LIST(state,history){
state.historyList=history
},
CLEAR_HISTORY(state){
state.historyList=[]
}
},
actions:{
//有点像main函数，供外界调用
set_history({
commit,state},history){
let list=state.historyList
list.unshift(history)
uni.setStorageSync('_history',list)//会覆盖掉原来该 key 对应的内容，这是一个同步接口
commit('SET_HISTORY_LIST',list)
},
clearHistory({
commit}){
uni.removeStorageSync('_history')
commit('CLEAR_HISTORY')
}
}
})
export default store
搜索页面的调用
//**********先引用************************
import {
mapState
} from 'vuex'
//*************methods中调用******************
setHistory() {
this.$store.dispatch('set_history', {
name: this.value
})
},
clear(){
this.$store.dispatch('clearHistory')
uni.showToast({
title:'已清空搜索历史'
})
},
自定义搜索组件与搜索页面的value绑定
- 子组件获取输入框的值，发送给父组件
<input type="text" class="navbar-search_text" value="" placeholder="————新开的游泳馆？" v-model="val" @input="inputChange" />
inputChange(e) {
const {
value
} = e.detail
this.$emit('input',value)
}
- 父组件接收，每隔700ms搜索一次
<navbar :isSearch="true" v-model="value" @input="input"></navbar>
input(value) {
console.log('键盘输入：', value)
if (!value) {
clearTimeout(this.timer)
this.mark = false
this.getSearch(value)
return
}
// 做定时标记mark 不会在页面渲染，不用在data中声明
if (!this.mark) {
this.mark = true
this.timer = setTimeout(() => {
this.mark = false
this.getSearch(value)
}, 700)
}
},
- 子组件实时接收父组件
//******功能：点击历史标签进入搜索*************
props: {
isSearch: {
type: Boolean,
default: false
},
value:{
type:[String,Number],
default:''
}
},
watch:{
value(newVal){
this.val=newVal
}
},
**************v-modle双向数据绑定，将标签内容显示在搜素框***************
- 卡片组件在点击后添加标签
open(){
this.$emit('FromCard',this.item)
}