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绑定

  1. 子组件获取输入框的值,发送给父组件
<input type="text" class="navbar-search_text" value="" placeholder="————新开的游泳馆?" v-model="val" @input="inputChange" />


inputChange(e) {
				const {
					value
				} = e.detail
				this.$emit('input',value)
			}


  1. 父组件接收,每隔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)
				}
			},

  1. 子组件实时接收父组件
//******功能:点击历史标签进入搜索*************
		props: {
			isSearch: {
				type: Boolean,
				default: false
			},
			value:{
				type:[String,Number],
				default:''
			}
		},

		watch:{
			value(newVal){
				this.val=newVal
			}
		},
**************v-modle双向数据绑定,将标签内容显示在搜素框***************
  1. 卡片组件在点击后添加标签
open(){
				this.$emit('FromCard',this.item)
			}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值