uniapp
# 1. 获取某个元素距离顶部的距离
async getRect(id) {
return new Promise((resolve, reject) => { wx.createSelectorQuery().select(id).boundingClientRect(function(rect) {
// console.log(rect)
resolve(rect)
}).exec()
})
},
mounted () {
Promise.all([this.getRect('#comments')]).then(res => {
this.commentTop = Math.ceil(res[0].top);
})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 2.导入全局过滤器
// 全局导入过滤器
import filter from "@/common/js/filter.js";
Object.keys(filter).forEach(key => Vue.filter(key, filter[key]));
1
2
3
4
2
3
4
# 3.url传值
onChoseType () {
uni.navigateTo({
url : `/page-event/pages/choseType/index?choseType=${this.choseType}`
})
},
1
2
3
4
5
2
3
4
5
onLoad (options) {
console.log(options);
}
1
2
3
2
3
# 4.页面间传值
第一次可能获取不到数据
1
onChose (item) {
this.$EventBus.$emit('choseType', item.title);
uni.navigateBack();
}
1
2
3
4
2
3
4
onLoad (options) {
this.$EventBus.$on('choseType', (item) => {
console.log("传过来的值" + item);
this.form.type = item;
});
},
onUnload () {
console.log('销毁页面')
this.$EventBus.$off('choseType');
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 5.Aniamte
//没效果, 将 animate.css里的
:root -> page
1
2
2
# 6.uniapp使用nvue，公共样式会报错
<style lang="scss">
/*每个页面公共css */
/* #ifndef APP-PLUS-NVUE */
@import "styles/common/css/animate";
@import "styles/common/reset";
@import "uview-ui/index.scss";
::-webkit-scrollbar {
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
}
/* #endif */
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 7.移动端Date.parse('2021-08-30 18:03:00') 会出现Invalid date
//解决方式
Date.parse('2021-08-30 18:03:00'.replace(/-/g,"/"))
1
2
2
# 8.长按粘贴
<div class="invite-center-code__bd" @longpress='copyText'>{{askCodeSelf}}</div>
1
copyText () {
uni.setClipboardData({
data: this.askCodeSelf,
success() {
uni.showToast({
icon:'none',
title:'已复制到剪贴板',
})
}
})
},
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 9.将key值为int类型的字符串转换成JSON数据
let obj = JSON.parse("{2:1,1:5}".replace(/(\d+):/g,"\"$1\":"));
console.log(obj);
console.log(obj instanceof Object);
1
2
3
2
3
# 10.返回到指定页面
wx.navigateBack({
delta: 4 // 1返回上一个界面，2返回上上个页面
})
1
2
3
2
3
# 11.scroll-view 组件手机端有滚动条
App.vue 增加如下样式可以去除 scroll-view 组件的滚动条（不支持nvue页面）
::-webkit-scrollbar {
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 12.将所有 iPhone X（刘海屏) 底部安全区域背景颜色 自动适应，当前页面什么颜色会自动调整。
打开 manifest.json ，打开源码视图，找到 app-plus 配置项，添加以下代码：
"safearea": {
"bottom": {
"offset": "none"
}
}
1
2
3
4
5
2
3
4
5
上次更新: 5/13/2023, 5:48:10 PM