type
status
date
slug
summary
tags
category
icon
password

创建uniapp项目

安装：可以通过 vue-cli 创建 uni-app 项目
  • 先安装脚手架
    • vue3/vite，创建以ts开发的工程
      • mp-PLATFORM可以指定平台

      实现滚动触底加载

      使用@scrolltolower事件来监听滚动到底部，然后加载下一页的数据。
      • 每一项通知的高度是80px
      • 滚动区域的高度算成是800px
      notion image
      • 也就是通过计算可视区域的索引以及监听滚动条距离顶部的高度，在全部表项中选出（slice）[startIndex, endIndex]之间的表项来展示，其他数据都不用渲染
      • 通过取余操作可以实现绿色部分的第一条数据永远是完整渲染的，只是因为滑动时未停下，js未响应前，新的列表不会生成，就会有一个假滑动的效果
      template：
      • 用offsetY来造成一种一直滚动的假象

      CSS单位

      rpx：
      • 小程序中会用到的单位，根据屏幕宽度进行自适应
      • 如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素
      vw、vh：
      vw（Viewport Width）、vh(Viewport Height)是基于视图窗口的单位，是css3的一部分，基于视图窗口的单位，除了vw、vh还有vmin、vmax。
      • vw:1vw 等于视口宽度的1%
      • vh:1vh 等于视口高度的1%
      • vmin: 选取 vw 和 vh 中最小的那个,即在手机竖屏时，1vmin=1vw
      • vmax:选取 vw 和 vh 中最大的那个 ,即在手机竖屏时，1vmax=1vh
      JS/TSHTML/CSS/TS/JS
      • Giscus