菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 前端-汪刚-2023.07.01 [打印本页]

作者: 霁后彩虹O 时间: 2023-7-4 18:18
标题: 前端-汪刚-2023.07.01
今日学习内容：

1.文字折行处理
限制行数,行数传参
@mixin clamp($row){
  overflow: hidden;
ellipsis:当对象内文本溢出时显示省略标记(...)。
  text-overflow: ellipsis;
  必须结合的属性，将对象作为弹性伸缩盒子模型显示。
  display:box 在元素上设置该属性，可使其子代排列在同一水平上，类似display:inline-block;。
  display: -webkit-box;
  必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式
  -webkit-box-orient: vertical;
  -webkit-line-clamp 用来限制在一个块元素显示的文本的行数，从第几行开始裁剪
  -webkit-line-clamp: $row;
}
2.iscroll动态刷新

问题：由于网络请求时长不确定，应该在滚动区域内数**据都完成渲染后**，重新计算滚动范围
方案：MutationObserver（百度：MutationObserver mdn）
目标：动态监听
1 创建一个观察者对象
2 告诉观察者对象观察什么内容
3 告诉观察者：观察谁，观察什么内容
用以下代码替换之前setTimeout中的refresh方法
* 1 创建一个观察者对象
* MutationObserver构造函数只有监听元素有变化就会调用回调函数
* mutationList：发生变化节点的数组
* observer：观察者对象
* */
const observer = new MutationObserver((mutationList, observer) => {
   this.iscroll.refresh()
})
/*
**2 告诉观察者对象观察什么内容
*/
const config = {
   childList: true, // 观察目标子节点的变化，添加或删除
   subtree: true, // 默认为false 设置为true可以观察后代节点
   attributeFilter: ['height', 'offsetHeight'], // 观察特定属性

   attributes: true, // 观察属性变化
   characterData: true, // 节点内容或节点文本的变化
   attributeOldValue: true, // 观察attributes变动时，是否需要记录变动前的值
   characterDataOldValue: true// 观察characterData变动，是否需要记录变动前的值
}
/*
**3 告诉观察者：观察谁，观察什么内容
* 第一个参数：观察谁
* 第二个参数：观察内容
3.如果IScroll不能滚动，排查下列条件
1 iscroll只能滚一个子元素
2 容器的高度一定要小于scroll的高度
3 初始化Iscroll时，元素必须是显示的状态
4 swiper定位必须为relative，并且高度设置固定值，overflow:hidden;

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)