uniapp实战

news2024/11/28 0:54:10

在这里插入图片描述
上面是tab栏，下面是swiper，，tab和swiper和红色滑块动态变化，，

遇到的问题：

往下滚动 tab栏吸顶：

position:sticky;
z-index:99;
top:0;

swiper切换触发 @change 事件， :current 获取当前所在swiper的序号

在这里插入图片描述
3. 切换swiper卡顿，，因为切换swiper的动画是和加载数据渲染DOM同时进行，，会卡顿，在@animationfinish,swiper 动画执行结束后加载数据，渲染DOM
4. swiper高度是根据内容动态变化的，，需要动态计算swiper高度，，
swiper计算比较复杂，使用一个数组缓存
在这里插入图片描述
动态计算元素高度，，将每一个 swiper的里面的每一个子项，设置一个className，这个className 和 tab的index 相关，，uni.createSelectorQuery().in(this).selectAll().boundingClientRect().exec() 获取每一个DOM的height , 因为这个方法是个异步方法，使用 Promise 返回计算后的值，

在这里插入图片描述

当一个tab往下滚动之后，，再切换另一个 tab，scrollTop会被延用，当切到另一个tab的时候，scrollTop应该从第一条开始，而不是延用之前的scrollTop

监听滚动位置： onPageScroll(){}
uniapp 设置 pageScroll ：uni.pageScrollTo({scrollTop:xxx})

在这里插入图片描述

文字内容有多行的时候，使用省略号

/* 最多展示两行*/
.line-clamp-2{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}