我们一起来读书吧 关注:153贴子:2,627
  • 2回复贴,共1

uniapp 8.27-9.2

只看楼主收藏回复

常用组件:
view类似html中的div,但是有一些自己的事件属性,div的属性和事件需要用css、js编写
属性名 类型 默认值 说明
hover-class String none 指定按下去的样式类。当 hover-class="none" 时,没有单击态效果
hover-stop-propagation Boolean false 指定是否阻止本节点的祖先节点出现单击态,App、H5、支付宝小程序、百度小程序不支持
hover-start-time Number 50 按住后多久出现单击态,单位毫秒
hover-stay-time Number 400 手指松开后单击态保留时间,单位毫秒
使用div,编译时会被转换成view
scroll-view,可滚动视图区域
scorll-x可实现水平滚动
scroll-y可实现垂直滚动
注意实现跳转到顶部,scrollTop.value=tmpScrollTop,监听滚动条当前位置的值赋给控制滚动条的位置
setTimeout(()=>{
scrollTop.value=0;//滚动到顶部 },30);
setTimeout或者nextTick
scroll-x要设置好css,防止view换行
设置display为inline-block行内块,width和overflow:hidden也进行设置
scroll-view嵌套input卡顿问题
比如一个数字更改的text-input,可以设置不同状态下不同


IP属地:北京1楼2024-09-03 09:59回复
    swiper一般用于左右滑动或上下滑动,如制作banner轮播图。注意,滑动切换和滚动切换是有区别的,滑动切换是一屏一屏地切换。swiper下的每个swiper-item都是一个滑动切换区域,不能停留在两个滑动切换区域之间。
    注意swiper-item组件内部的image组件并非HTML元素,而是uni-app内置的image组件
    组件默认的宽度为300px、高度为225px,src属性值支持相对路径、绝对路径, 支持base64 码。当页面结构比较复杂时,使用 image 可能导致样式生效较慢,出现“闪一下” 的情况,此时设置 image{will-change: transform}可优化此问题,will-change会告知浏览器该元素会有哪些变化,这样浏览器可以在元素属性真正发生变化之前做好对应的优化准备工作。
    在自定义组件中使用时,若src使用相对路径,可能出现路径查找失败的情况,因此建议使用绝对路径。


    IP属地:北京2楼2024-09-03 10:06
    回复
      不要将 will-change应用到太多元素上:
      浏览器已经尽力尝试去优化一切可以优化的东西了。有一些更强力的优化,如果与 will-change 结合在一起的话,有可能会消耗很多机器资源,如果过度使用的话,可能导致页面响应缓慢或者消耗非常多的资源。
      有节制地使用:
      通常,当元素恢复到初始状态时,浏览器会丢弃掉之前做的优化工作。但是如果直接在样式表中显式声明了 will-change 属性,则表示目标元素可能会经常变化,浏览器会将优化工作保存得比之前更久。所以最佳实践是当元素变化之前和之后通过脚本来切换 will-change 的值。
      不要过早应用 will-change优化:
      如果你的页面在性能方面没什么问题,则不要添加 will-change 属性来榨取一丁点的速度。 will-change 的设计初衷是作为最后的优化手段,用来尝试解决现有的性能问题。它不应该被用来预防性能问题。过度使用 will-change 会导致大量的内存占用,并会导致更复杂的渲染过程,因为浏览器会试图准备可能存在的变化过程。这会导致更严重的性能问题。
      给它足够的工作时间:
      这个属性是用来让页面开发者告知浏览器哪些属性可能会变化的。然后浏览器可以选择在变化发生前提前去做一些优化工作。所以给浏览器一点时间去真正做这些优化工作是非常重要的。使用时需要尝试去找到一些方法提前一定时间获知元素可能发生的变化,然后为它加上 will-change 属性。


      IP属地:北京3楼2024-09-03 10:14
      回复