1.@click.stop阻止事件继续传播( 阻止事件冒泡 )

当在一个元素上使用@click.stop时 它会:

(1) 阻止该元素的点击事件向父元素传播

(2) 不会阻止该元素本身的点击事件处理函数执行

<div @click="parentClick">
  <button @click.stop="childClick">点击我</button>
</div>

• 点击按钮时，只会触发 childClick 方法
• 不会触发父 div 的 parentClick 方法
• 如果没有 .stop 修饰符，点击按钮会先触发 childClick，然后事件冒泡到父 div 触发 parentClick

2.简单二次封装uni-ui组件 把uni-modules里面的文件夹复制到自己的新建组件去操作即可 会很爽 不用考虑穿透之类的

自己的封装的select 看着舒服多了

只能说之前经验不足

3.swiper下方indicators处理

微信小程序原生组件是默认小点点在图片里面的 但是需求是小点点在图片下方 尝试去修改样式未果 想到一招 把swiper高度变大一点 但图片位置大小不变 这样小点在swiper下方 就变成了想要的效果

不过后面看到uniui里面好像有这类组件( 这也有…… )

4.轮播图点击左右按钮进行上一张/下一张图片切换 处理current即可

<swiper :current = “currentIndex”></swiper>

JS中声明响应式变量并设计函数处理

主要是要考虑第一张图片的前一张和最后一张图片的后一张处理

这里取余即可 (以总图片数为4模拟……)

const goPre = () => {
	currentIndex.value = (currentIndex.value - 1 + 4) % 4
}
const goNext = () => {
	currentIndex.value = (currentIndex.value + 1) % 4
}

5.选择日期目前暂定为点击出现popup层选择日期 不用日历 这块要想一想

6.全局颜色设置

有没有发现这项目喜欢紫色—>蓝色渐变? 起码写了50次了…… 设置全局颜色吧

common/styles/base-style.scss

uni.scss 注意路径!!! 需要用@符号表示

7.下拉框效果

通过对象设置每个下拉框的状态 防止多个下拉框之间产生关联

const foldStates = ref({
	1: true, //设置为一开始打开
	2: false, 
	3: false
})

const toggleFold = (index) => {
	foldStates.value[index] = !foldStates.value[index] //改变状态
}

通过动态类进行样式变化 加上transition实现动画效果 更美观

展示时调整最大高度即可 一开始最大高度为0 展开时max-height为1000rpx 就可以自然展现出数据