多行文本域隐藏问题

overflow: hidden; 首先是溢出隐藏，不可或缺

display: -webkit-box; 以弹性盒模型显示

-webkit-box-orient: vertical; 盒模型元素的排列方式

-webkit-line-clamp: 3; 显示行数

<style>
	.postnameStyle{
		font-size: 30rpx;
		font-weight: 600;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
</style>

这样就成功隐藏了溢出文本

单行文本域隐藏问题

overflow: hidden;溢出隐藏

white-space: nowrap;文字不能转行

text-overflow:ellipsis;隐藏的部分用…表示

单行文本域的隐藏就比较简单

<style>
	.postnameStyle{
		font-size: 30rpx;
		font-weight: 600;
		text-overflow:ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
</style>

这样成功隐藏啦

uniapp解决在循环中调接口数据顺序混口问题

今天在做uni-app的调接口时，遇到这样的情况，在forEach循环里，调用一个异步请求时，返回来的值顺序是乱的

因此，在以下的代码里，push到数组里的值，每次的顺序可能都是不一样的

而造成这样一个原因，是forEach循环是单线程的，异步请求是多线程的，往往在forEach循环结束了，异步请求还没有结束

async getAllPostDetailsInfo(articleId: number) {
    await getPostComment(articleId, this.page, 10).then((res:any) => {
		res.list.forEach (async (i: any) => {
			// 这里就会往往在循环结束了，异步请求还没有结束，造成数据混乱
			await getPostCommentReply(i.commentId, 1, 2).then((resCommentReply:any)=>{
				this.articleTwoCommentReply.push(resCommentReply);				
		 	});
		});
	});
  }

修改后

async getAllPostDetailsInfo(articleId: number) {
    await getPostComment(articleId, this.page, 10).then((res:any) => {
   		// 利于 i 去做条件判断，从而达到循环的目的
		let i = 0;
		// 我这里的 res.list.length == 2 所以只会执行两此 isEnd 函数
		let isEnd = () => {
			if(i >= res.list.length){
				return;
			}
			this.articleAllComment.push(res.list[i]);
			getPostCommentReply(res.list[i].commentId, 1, 2).then((resCommentReply:any)=>{
					this.articleTwoCommentReply.push(resCommentReply);
					this.childComments.push(childComments);
					// 更改判断条件
					i++;
					isEnd();
			});
		}
		isEnd();
	});
  }

修改过后的就不会出现数据混乱了

Cannot read property ‘bottom’ of null的解决方法

1. 在uniapp中用u-lazy-load懒加载图片组件，图片数据来源于vuex中时，如果上一次vuex中数据没有清除会导致报这个错误

   具体原因是因为懒加载的速度在vuex写入数据之前，当图片取数据时，vuex把数据重置为空数据，这时候就会报错

   可以在离开该组件时清空本次的vuex数据，下次vuex数据为空时懒加载不会触发

 	// vuex中设置清除数据
	clear(state){
		state.goodsListSearch = []
	}
    // 在页面离开的时候调用就可以了
	onUnload(){
			this.clear()
	}

因为我这里是用的假数据，所以清除我假数据里的数据就可以了

	// 将假数据里的图片置空就可以了
	onUnload(){
		this.product.detailWeApp = [];
	}

原文链接：https://blog.csdn.net/cc_66666/article/details/126260378

2. uViewUI在H5下报错’bottom’ of null，产生的原因是：吸顶组件u-sticky和底部导航栏tabbar切换页面时产生冲突，sticky组件创建了Observer监听，当切换页面且页面没有销毁时，导致组件仍然保持监听，所以出现Cannot read property ‘bottom’ of null报错

<template>
   <view>
       <u-sticky :enable="enable"></u-sticky>
   </view>
</template>
<script>
export default {
    data() {
        return {
			enable: true
        }
    },
    // 在对应的show和hide页面生命周期中打开或关闭监听
    onShow() {
        this.enable= true
    },
    onHide() {
        this.enable= false
    }
}
</script>

原文链接：https://blog.csdn.net/qq_41732757/article/details/114932746

for循环ref后，利用ref变量取值

当使用for循环，来循环出不同的 ref 的值，每一个循环出来的DOM节点就由一个唯一的ref值，我们需要哪一个就可以去取哪一个，但是取值时不能直接用 this.$refs.变量这样是取不出来了，而是应该用this.$refs[`变量`]这样才可以取，需要用 `` 来取变量

<template>
   <view>
       <view  v-for="(item,index) in product.skus" >
			<view :ref="'ref'+index" class="skuStyle" @click="a(index)"></view>
		</view>
   </view>
</template>
<script>
export default {
	a(index:any){
			this.$refs[`ref${index}`][0].$el.style.backgroundColor = '';
	}
}
</script>