杂记

杂记，顾名思义就是记录一些小程序开发过程中一些杂七杂八的事情；可能是一些经验、心得、问题等等

一. css

1. 文本
   • 内容超出一行，显示省略号

     .line-clamp{
       overflow: hidden;
       display: -webkit-box;
       -webkit-line-clamp: 1;
       -webkit-box-orient: vertical;
     }
     

2. button
   • 透明button

     .button-plan{
       padding: 0;
       background-color: transparent!important;
       &::after{
         border: none!important;
       }
     }
     

3. 隐藏滚动条滑块；用view，不采用scroll-view；设置css属性：

   overflow-y: hidden;
   overflow-x: scroll;
   &::-webkit-scrollbar{
     display: none;
     overflow: -moz-scrollbars-none;
     -ms-overflow-style: none;
   }
   

二. wxml

1. 滑动置顶

   • 采用WXS响应事件来处理
   • IntersectionObserver监听处理

2. 点击授权（XButton组件）

   封装XButton组件；授权只能使用官方Button，但产品需求的样式都不只是单纯的按钮，所以封装Xbutton组件
   • 可透明背景，自定义样式
   • 支持slot插槽
   • 默认处理获取授权信息

3. XRow组件

   简易的封装flex布局行，方便新人页面样式布局书写
   • align 水平排列属性，同justify-content
   • valign 垂直排列属性，align-items

4. XDialog

   统一弹出页面对话框风格样式

5. XItem

   列表子项，避免渲染显示的列表过于太长，部分不在显示范围的子项，就没有必要渲染了；IntersectionObserver监听移入或移出指定显示区域，处理显示或隐藏；
   • 支持插槽slot
   • 支持动态高度
   • 指定显示范围高度

三. 动画

四. 其他

1. localStorage

   localStorage存储后getItem取到的数据都是string类型

   localStorage.setItem('val1', true);
   localStorage.setItem('val2', 1);
   let val1 = localStorage.getItem('val1');
   typeof val1 === 'string'
   val1 === 'false'
   let val2 = localStorage.getItem('val2');
   typeof val2 === 'string'
   

五. 优化

1. setData

   根据官方文档优化建议来书写

   • setData调用频率不能太频繁
   • setData数据大小不能太大
   • 和渲染无关的数据，尽量不放在data中
   • 列表数据避免整个列表刷新，只针对对应项设置数据

   setData({
       [`lists[1]`]: itemValue
       ...
   })