uniapp

顶部导航

1: 外部100%， flex
2：scroll-view 部分 flex: 1 overflow： hidden 高度 padding
3: 右侧固定宽度
4: 伪元素 : 给top bottom 不用给height

<view class="tab">
		<scroll-view class="tab-scroll" scroll-x>
			<view class="tab-scroll__box">
				<view v-for="(item, index) in list" :key="index" class="tab-scroll__item" :class="{active:activeIndex === index}"
				 @click="clickTab(item, index)">{{item.name}}</view>
			</view>
		</scroll-view>
		<view class="tab-icons" @click="open">
			<uni-icons type="gear" size="26" color="#666"></uni-icons>
		</view>
	</view>

	.tab {
		display: flex;
		background: #fff;
		border-bottom: 1px solid #f5f5f5;
		width: 100%;

		.tab-scroll {
			flex: 1;
			overflow: hidden;

			.tab-scroll__box {
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
				height: 45px;
				box-sizing: border-box;

				.tab-scroll__item {
					flex-shrink: 0;
					padding: 0 10px;
					color: #333;
					font-size: 14px;

					&.active {
						color: $mk-base-color
					}
				}
			}
		}

		.tab-icons {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 45px;

			&::after {
				content: '';
				position: absolute;
				top: 12px;
				bottom: 12px;
				left: 0;
				width: 1px;
				background-color: #ddd;
			}
		}
	}

滚动条

1： 父元素 flex ： 1 ， height:100%
2: 子元素height：100% 需要固定上面 下面

左右布局

1: 左测给固定宽
2：右侧 100%，防止挤压，左侧图片加flex-shirenk
3:

加icon

1: 左侧加 padding， icon right top 0 给宽高

选中态

:class="{active: activeIndex === index}"
:style="{height: navHeight + ‘px’,}"

fixed的应用

父元素：

.navbar-fix {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		width: 100%;
		background-color: $mk-base-color;

		.nav_contain {
			height: 45px;
			padding: 0 15px;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;

			.nav_search {
				display: flex;
				align-items: center;
				width: 100%;
				height: 30px;
				background: #fff;
				border-radius: 30px;
				padding: 0 10px;
				box-sizing: border-box;

				.nav_search-icon {
					margin-right: 10px;

				}

				.nav_search-txt {
					color: #999;
					font-size: 12px;
				}
			}

js

动态改变返回的数据

data.unshift.push({name: '自定义'})

icon根据状态 改变type值

:type：”like ? '' : ''“

请求中，加Loading Toast

在请求前和请求后，添加弹框
uni.showLoading()
成功后，根据状态，显示信息
uni.hideLoading()
uni.showToast({ title:this.like?'收藏成功':'取消收藏', icon:'none' })

更新

1： 点击改变状态，调用更新函数

watch监听data 和props的变化

防止子组件用父组件的属性，但是还没有传来

watch: {
			tabIndex(newVal, oldVal) {
				console.log('新', newVal, '旧', oldVal)
				this.activeIndex = newVal
			}
		},

swiper swiper-item

:current=“activeIndex”

watch监听的应用

提高性能，如果没有新的数据，就不进行刷新

	watch:{
			tab (newVal) {
				if (newVal.length < 0) return
				this.getList(this.acticveIndex)
			}
		},

change(e) {
				const {
					current
				} = e.detail
				// console.log('当前数据', this.tab[current].name)
				// 当数据不存在或者数据长度为0的时候,才请求数据
				if (!this.listCatchData[current] || this.listCatchData.length === 0) {
					this.getList(current)
				}
				this.$emit('change', current)
			},

对象想用数组

|| []

简洁的传参方式: 如果是判断路径，很省事

this.$emit(‘change’, {
path: data.path,
index: index
})
接收：

@change="change"
change(obj) {
conso.log(obj.path)
console.log(obj.index)
}

自定义tabbar闪烁问题

tabbar随页面动，所以每次切换，都是新的切换tabbar,所以会出现闪烁，解决就是：固定tabbar，每次切换是切换页面的组件

云函数

aggregate 创建数据库的聚合操作，对数据更详细的操作，求和，分组，指定返回字段

match 根据条件过滤字段，将返回的结果，返回下一个流水线

let matchObj = {}
	if (name !== '全部') {
		matchObj = {
			classify: name
		}
	}

project 选择返回或者不返回的字段