1.uniapp 全局悬浮窗实现 这个可以记录拖拽的坐标位置
组件部分
<template>
<view>
<view class="fab_parent">
<movable-area style="width: 100vw; height: 85vh;">
<movable-view :x="this.x" :y=" this.y" direction="vertical"
@change="onChange">
<view class="fab" @touchstart="touchstart" @touchend="touchend" :class="xian == false?'xian1': 'xian2'">
<image @click="jiaoy" src="/static/inde/OTC.gif" style="width: 120rpx;height: 120rpx;"></image>
</view>
<view :class="xian == false?'xian3': 'xian4'">
<image @click="qicait" src="/static/inde/qcrs.gif" style="width: 120rpx;height: 120rpx;"></image>
</view>
</movable-view>
</movable-area>
</view>
</view>
</template>
<script>
export default {
name: "online-fab",
props : {
xian: {type:Boolean, default:false}
},
data() {
return {
time: 0,
x: 365,
y: 413
};
},
onShow() {
},
created() {
this.int()
},
methods: {
int(){
if(uni.getStorageSync('x') != '' && uni.getStorageSync('x') != null){
// console.log(uni.getStorageSync('x'))
// console.log(uni.getStorageSync('y'))
this.x = uni.getStorageSync('x')
this.y = uni.getStorageSync('y')
// console.log(this.x)
// console.log(this.y)
}
},
onChange: function(e) {//拖拽过程中记录坐标位置
this.x = e.detail.x
this.y = e.detail.y
},
touchstart: function(e) {
this.$emit('fabState', "start")
},
touchend: function(e) {//拖拽结束后将位置赋值
let position = {
x: this.x,
y: this.y
}
uni.setStorageSync('x', this.x);
uni.setStorageSync('y', this.y);
// console.log(uni.getStorageSync('x'))
// console.log(uni.getStorageSync('y'))
},
// 跳转
jiaoy(){
this.$emit('jiaoy')
},
qicait(){
this.$emit('qicait')
},
}
}
</script>
<style>
.fab_parent {
position: fixed;
/* bottom: 0; */
/* height: calc(100vh - 200rpx); */
/* height: 100vh;
width: 100vw; */
left: 0;
z-index: 999999999;
pointer-events: none;
/* background-color: pink; */
}
.fab {
font-size: 16px;
color: #005500;
padding-top: 40rpx;
padding-left: 30rpx;
margin-bottom: -30rpx;
}
.xian1{
pointer-events:auto; width: 120rpx;height: 120rpx;border-radius: 50rpx;overflow: hidden;position: fixed;bottom: 400rpx;right: -10rpx;transition: 0.8s
}
.xian2{
pointer-events:auto; width: 120rpx;height: 120rpx;border-radius: 50rpx;overflow: hidden;position: fixed;bottom: 400rpx;right: -60rpx;transition: 0.8s
}
.xian3{
pointer-events:auto; width: 120rpx;height: 120rpx;border-radius: 50rpx;overflow: hidden;position: fixed;bottom: 470rpx;right: -10rpx;transition: 0.8s
}
.xian4{
pointer-events:auto; width: 120rpx;height: 120rpx;border-radius: 50rpx;overflow: hidden;position: fixed;bottom: 470rpx;right: -60rpx;transition: 0.8s
}
</style>
页面引用
<online-fab :xian="ion" @qicait='qicait' @jiaoy='jiaoy'></online-fab>
2.因为此APP是一期和二期共存的 页面的tabBar根据不同的版本显示不同的内容,实现原理把所有的tabbar都写在pages.json中 在APP.vue的globalData 中定义全局方法 在每次进入页面时就走一下全局的这个方法 不同页面传的不同参数 根据参数去判断显示什么内容 为了避免闪烁问题可以在 APP.vue 的 onshow方法里先全部设置为false 让他先都不显示
globalData: {
reviseTabbarByUserType: function(item) {
//权限1
if (item == 1) {
uni.setTabBarItem({
index: 0,
visible: false,
})
uni.setTabBarItem({
index: 1,
visible: false,
})
uni.setTabBarItem({
index: 2,
visible: true,
})
uni.setTabBarItem({
index: 3,
visible: true,
})
} else {
uni.setTabBarItem({
index: 0,
visible: true,
})
uni.setTabBarItem({
index: 1,
visible: true,
})
uni.setTabBarItem({
index: 2,
visible: false,
})
uni.setTabBarItem({
index: 3,
visible: false,
})
}
}
},
3.实现下拉刷新功能
①pages.json里开启下拉刷新
②在和onShow同级目录下引用 调用进入页面要触发的初始事件
onPullDownRefresh() {
this.page = 1
this.int()
},
③在事件调用成功 或 失败后使用 uni.stopPullDownRefresh()
4.调用uni.getLocation时要在https下才能触发才能请求成功
uni.getLocation({
type: 'gcj02',
isHighAccuracy: true,
success: function(res) {
console.log(res)
console.log('当前位置的经度:' + res.longitude);
console.log('当前位置的纬度:' + res.latitude);
}
});