uniapp 工作记录

啥时候成大佬

已于 2022-06-15 19:31:37 修改

阅读量339

点赞数

分类专栏： uniapp 文章标签：前端

于 2021-10-29 15:26:08 首次发布

本文链接：https://blog.csdn.net/weixin_53008757/article/details/121035757

版权

uniapp 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

nvue 下 input 调起键盘闪退
uni.navigateToMiniProgram APP暂时不可以使用（2021.11.02）
跳转到外部页面 -由外部浏览器打开
var urlStr = encodeURI(url)//把字符串作为url进行编码
plus.runtime.openURL(‘http://’ + urlStr);
外部h5引入APP内部查看通过 webview 页面 <web-view :src="url"></web-view>
箭头函数运用时记得查看一下当前函数下 this 的赋值 问题
返回页面顶部

uni.pageScrollTo({
scrollTop: 0,
duration: 300
});

scroll-view下 flex 不换行不生效(scroll-view下需要再加一层box 然后给display 属性，才会生效)

解决：子列表为块级元素，会单独占一行，在子列表class类上定义css属性：display:inline-block;

代码示例如下：
<scroll-view class="list_box" scroll-y="true" enable-back-to-top="true" show-scrollbar="false">
	<view class="m_box">
	</view>
</scroll-view>
<style>
.list_box{
	display:flex;
}
.m_box{
	display:inline-block;
}
</style>

picker 多列数据不更新

uniapp picker 实例中，多列选择器中的数据是动态实现的，如果不是本地的json数据及方式处理的话，this.cityArr[0]=[数组内容],会得不到赋值内容。
在网上借鉴了一些网友的文章，暂做记录如下。

// 错误
this.cityArr[0]=[数组内容]
这样的内容为空。

//正确方法
let data,arr = [];
data = res.data;
data.forEach(item => {
	arr.push(item);
});
this.cityArr.splice(0, 1, arr)

子窗体hide失效

可能是因为上一次调用未关闭，当前页面调用子窗体的，离开当前当前页面，需在onUnload方法中执行 close() 方法。
onUnload(){
	uni.getSubNVueById('XXX').close()
}

动态数据不及时更新

this.$forceUpdate();
this.$set(数组, 下标, 更新数据);

sticky 黏性吸顶不生效

sticky不生效踩坑：

父元素设置了overflow:hidden或者overflow:auto属性
未指定top、right、bottom、left中的任意一个
父元素的高度低于sticky定位的元素高度
当父元素的height：100%时，页面滑动到一定高度之后sticky属性会失效

sticky属性仅在以下几个条件都满足时有效：
父元素不能设置overflow:hidden或者overflow:auto属性
必须指定top、bottom、left、right中的任意一个，否则只会处于相对定位
父元素的高度不能低于sticky定位的元素高度
父元素不要设置高度：100% 

sticky原理：
sticky属性依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位

子组件调用

注册： uni.getSubNVueById(‘xxx’).show()
全局调用子组件，可以在首页注册
单页面子组件，需注册在当前页面的路由下
关闭 uni.getSubNVueById(‘xxx’).close()
全局调用子组件，需在底部tab页面中的 unonload周期里面关闭子组件 .close(),其他页面调用即可，无需在写关闭方法
单页面子组件，需要当前页面关闭时 unonload 周期里面关闭子组件 .close()
uni.getSubNVueById(‘xxx’).hide()
hide 是隐藏了当前的子组件，并没有关闭，会导致如果页面有蒙层等设置的话，再次点击子组件，出现多个蒙层的情况，最好用.close() 方法