uniapp + uview1 小程序开发中遇到的问题记录2021-12-29

620 阅读1分钟

1.字体包引入

问题:

封装引入字体包,使用uni.loadFontFace效果是有的,但是有问题:首次进入页面时,会先展示默认字体,半秒左右切换至自定义字体,

解决:使用@font-face引入静态资源。

2.uniapp分页

问题:

uniapp分页时,小程序自带的onReachBottom触底方法总是不灵敏,设置onReachBottomDistance(距离底部距离)也无效。后来百度发现:小程序的触底事件不能在350ms之内频繁触发 也就是说它有350ms的频率限制。

解决:使用scroll-view,注意设置upper-threshold,距顶部/左边多远时,触发scrolltoupper 事件,否则不是很灵敏。

//eg:
<scroll-view  scroll-y  :upper-threshold="200"  scroll-anchoring  @scrolltolower="reachBottom"></scroll-view>

4.uview中的针对u-upload组建的封装

问题1:

on-list-change事件,虽然是当内部文件列表被加入文件、移除文件,或手动调用clear方法时触发,但是实际使用中无法准确的获取到图片的真实路径。

解决:

分别在on-succes和on-remove中获取到图片的真实路径,然后$emit该文件列表,供父组建使用。

问题2:

file-list功能是显示预置的图片,但当页面不是首次进入时渲染,而是通过某个操作(例如点击),让预置的图片发生改变,不能通过使用wacth来监听file-list来实现,会导致数据是变了,但页面没有重新渲染,还是原来的老图片。

解决:

通过操作ref先来实现清空,this.$refs.lunchPic(自定义的ref名字).clear(),然后再重新赋值。

5.uniapp 在小程序中,input输入框样式

问题:无法对输入框设置字体样式,以及字体粗细和字体大小,都看起来很别扭,无法满足UI效果。

解决:目前没找到解决方案, 解决方案在h5中很有效,在小程序中无效。

6.小程序中,iphone手机刘海屏问题

解决:添加env(safe-area-inset-bottom)