项目总结 0V0

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);
	}
});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值