MoeNovaClient/pages/isLand/mainLand.vue

<template>
 <view class="main-land-container">
<!--    <view class="scroll-container" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" >
      <view class="background" :style="{ transform: `translateX(${translateX}px)` }">
        <image class="island-image" src="/static/island/island.png" mode="heightFix"></image>
      </view>
    </view> -->

  
    <!-- 第三层：背景 -->
    <view class="background-layer"></view>
  
    <!-- 第二层：地图 -->
    <view class="map-layer" id="mapLayer" :style="{ transform: `translateX(${translateX}px)` }" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" @mousedown="onmousedown" @mousemove="onmousemove" @mouseup="onmouseup">
      <!-- 这里可以放置地图元素（示例：一个方块） -->
      <!-- <view style="position: absolute; top: 30%; left: 30%; width: 100px; height: 100px; background: green;"></view> -->
	  <image class="island-image" src="/static/island/island.png" mode="widthFix" style="width:1536rpx; bottom: 0rpx;left: 0rpx; position: absolute;"></image>
	  <image class="house-image" src="/static/island/building/4.png" mode="widthFix" style="width:670rpx; left: 980rpx; bottom:530rpx;position: absolute; transform:translate(-50%,50%);"></image>
    </view>
  
    <!-- 第一层：UI -->
    <view class="ui-layer">
      <view class="ui-content">
        <button class="dialog-button">打开对话框</button>
      </view>
    </view>
  </view> 
</template>


<script>
	export default {
		components: {},
		data() {
			return {
				// // 背景位置控制
				translateX: 0,
				startX: 0,
				currentX: 0,
				isDragging : false,
				// maxTranslate: 0,
				
				// // 获取屏幕宽度和背景宽度
				screenWidth: 0,
				backgroundWidth: 0,
				islandHeight: 0
			}
		},
		onLoad() {
			let self = this;
			// 获取屏幕宽度
			uni.getSystemInfo({
				success: (res) => {
					self.screenWidth = res.windowWidth;
					console.log('屏幕宽度:', self.screenWidth);
				}
			});
		},
		onShow() {
			// this.loadData();
		},
		onReady() {
			// 在组件渲染完成后获取图片尺寸
			setTimeout(() => {
				this.getImageSize();
			}, 300);
		},
		methods: {
			loadData() {
				// 可以在这里加载其他数据
			},
			getImageSize() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.island-image').boundingClientRect(data => {
					if (data) {
						// 获取岛屿图片的宽度和高度
						this.backgroundWidth = data.width;
						this.islandHeight = data.height;
						// this.backgroundWidth = 1536;
						// this.islandHeight = 1024;

						
						// 设置背景高度为岛屿高度的两倍（在CSS中实现）
						
						// 计算最大可移动距离
						this.maxTranslate = this.backgroundWidth - this.screenWidth;
						
						// 初始位置居中
						this.translateX = -this.maxTranslate / 2;
						
						// 打印调试信息
						console.log('屏幕宽度:', this.screenWidth);
						console.log('背景宽度:', this.backgroundWidth);
						console.log('岛屿高度:', this.islandHeight);
						console.log('屏幕宽度:',this.screenWidth);
						console.log('最大可移动距离:',this.maxTranslate);
						
						console.log('岛屿data:', data);
						
					} else {
						console.error('未能获取岛屿图片的尺寸');
					}
				}).exec();
			},
			// 触摸开始
			touchStart(e) {
				console.log('----------- touchStart');
				this.startX = e.touches[0].clientX;
				this.currentX = this.translateX;
				console.log('this.startX =',this.startX);
				console.log('this.currentX =',this.currentX);
			},
			// 触摸移动
			touchMove(e) {
				console.log('----------- touchMove');
				const moveX = e.touches[0].clientX - this.startX;
				let newTranslateX = this.currentX + moveX;
				
				// 限制移动范围，不让背景两侧露出
				// if (newTranslateX > 0) {
				// 	newTranslateX = 0;
				// } else if (newTranslateX < -this.maxTranslate) {
				// 	newTranslateX = -this.maxTranslate;
				// }
				
				this.translateX = newTranslateX;
				console.log('moveX =',moveX);
				console.log('this.translateX =',this.translateX);
			},
			// 触摸结束
			touchEnd() {
				console.log('----------- touchEnd');
				this.currentX = this.translateX;
				console.log('this.currentX =',this.currentX);
			},
			
			onmousedown(e) {
				console.log('----------- onmousedown');
				console.log('----------- e',e);
				this.isDragging = true;
				this.startX = e.clientX;
				this.currentX = this.translateX;
				mapLayer.style.cursor = 'grabbing';
			},
			
			onmousemove(e) {
				if(this.isDragging){
					console.log('----------- onmousemove');
					const moveX = e.clientX - this.startX;
					let newTranslateX = this.currentX + moveX;
					
					//限制移动范围，不让背景两侧露出
					if (newTranslateX > 0) {
						newTranslateX = 0;
					} else if (newTranslateX < -this.maxTranslate) {
						newTranslateX = -this.maxTranslate;
					}
					
					this.translateX = newTranslateX;
					console.log('moveX =',moveX);
					console.log('this.translateX =',this.translateX);
				}
			},
			
			onmouseup(e) {
				console.log('----------- onmouseup');
				this.isDragging = false;
				mapLayer.style.cursor = 'grab';
			},
		}
	}
</script>


<style lang="scss" scoped>
@import './mainLand.scss';
</style>