uniapp movable-view 动态配置后坐标值不生效

功能点背景

在A界面动态拖拽容器后触发跳转到B界面,从B界面返回后,需要实现A界面的Movable-view容器重置其位移
<movable-area>
	<movable-view :x="x" :y="y" inertia>
		<uni-section title="基础用法" type="line">
			<uni-list>
				<uni-list-item>
				 ....
				</uni-list-item>
			</uni-list>
		</uni-section>
	</movable-view>
</movable-area>

// script
export default {
	data() {
		return {
			x: 0,
			y: wx.getSystemInfoSync().windowHeight*0.8,
			old: {
				x: 0,
				y: 0,
			},
		}
	},	
}

解决方案

通过v-if去控制movable-view是否需要重新渲染,只有重新渲染后,movable-view才会重新读取x、y坐标值
// A界面
<movable-view  v-if="isRender"></movable-view>

export default {
	data() {
		isRender: true, 
	},
	onShow() {
		let that= this;
		// B界面返回时需要触发getPage函数
		uni.$on('getPage', (e)=>{
			console.log(e) // {init: '11'}
			// 初始化本页
			that.initView()
		})
	},
	methods: {		
		// 初始化movable-view
		initView: function() {
			this.x= 0
			this.y = wx.getSystemInfoSync().windowHeight*0.8
			this.isRender = false
			setTimeout(()=>{
				this.isRender = true
			}, 200)
		}
	}
}

// B界面
export default {
	data() {},
	onUnload() {
		uni.$emit("getPage",{
			init: '11'
		})
	},
}

更多推荐