小程序
小游戏
企业微信
微信支付
扫描小程序码分享
小程序movable-view的x y赋值成功位置没有移动
5 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
请具体描述问题出现的流程，并提供能复现问题的简单代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）。
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
2024年了还没解决吗，近期试了下，设置 X 值，数据更新了，视图有时候不更新。。。
解决了吗,我是给movable-area添加动态height的时候, movable-view的x不生效的,把那个动态添加的高度删除就正常了,,,,,,
<movable-area class="movable-area" style="width:750rpx;height:{{totalHeight}}">
<movable-view direction="vertical" wx:for="{{payList}}" wx:key="index" class="item-movable-view" x="{{item.x}}" y="{{item.y}}" bind:change="movableChange" data-index="{{index}}">
<view class="label">{{item.label}}</view>
<view class="icon">
<t-icon name="list" size="40rpx" color="#5E5E5E"></t-icon>
</view>
</movable-view>
</movable-area>
<movable-area class = "movableArea" :style="{height:height + 'px'}">
<movable-view class="backHome" id="moveBtn" style="pointer-events: auto;" v-if = "drawStates" direction="all" out-of-bounds="false" :x="x" :y=y damping="18" @touchmove="moveStart" @touchend = "moveEnd" @click = "activityCenter"></movable-view>
<movable-view class="movableView" id="moveBtn" style="pointer-events: auto;" v-else direction="all" out-of-bounds="false" :x="x" :y=y damping="18" @touchmove="moveStart" @touchend = "moveEnd" @click = "drawlottery"></movable-view>
moveEnd (e) {
let that = this;
const query = wx.createSelectorQuery();
query.select("#moveBtn").boundingClientRect();
query.exec(function(res) {
console.log(res[0].left,'位置')//获取元素距左侧距离
if ((res[0].left+23).toFixed()<= that.screenWidth/2) {
that.x = 0
console.log(that.x)
} else {
that.x = that.screenWidth
}
that.y = res[0].top.toFixed()
// setTimeout(() => {
// },200)
console.log(res[0].left,res[0].top,'顶部top值')
console.log(that.x,that.y,'位置')//获取元素距左侧距离
});
},
贴代码
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
请具体描述问题出现的流程，并提供能复现问题的简单代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）。
<movable-view class="backHome" id="moveBtn" style="pointer-events: auto;" v-if = "drawStates" direction="all" out-of-bounds="false" :x="x" :y=y damping="18" @touchmove="moveStart" @touchend = "moveEnd" @click = "activityCenter"></movable-view>
<movable-view class="movableView" id="moveBtn" style="pointer-events: auto;" v-else direction="all" out-of-bounds="false" :x="x" :y=y damping="18" @touchmove="moveStart" @touchend = "moveEnd" @click = "drawlottery"></movable-view>
</movable-area>
moveEnd (e) {
let that = this;
const query = wx.createSelectorQuery();
query.select("#moveBtn").boundingClientRect();
query.exec(function(res) {
console.log(res[0].left,'位置')//获取元素距左侧距离
if ((res[0].left+23).toFixed()<= that.screenWidth/2) {
that.x = 0
console.log(that.x)
} else {
that.x = that.screenWidth
}
that.y = res[0].top.toFixed()
// setTimeout(() => {
// },200)
console.log(res[0].left,res[0].top,'顶部top值')
console.log(that.x,that.y,'位置')//获取元素距左侧距离
});
},
2024年了还没解决吗，近期试了下，设置 X 值，数据更新了，视图有时候不更新。。。
解决了吗,我是给movable-area添加动态height的时候, movable-view的x不生效的,把那个动态添加的高度删除就正常了,,,,,,
<movable-area class="movable-area" style="width:750rpx;height:{{totalHeight}}">
<movable-view direction="vertical" wx:for="{{payList}}" wx:key="index" class="item-movable-view" x="{{item.x}}" y="{{item.y}}" bind:change="movableChange" data-index="{{index}}">
<view class="label">{{item.label}}</view>
<view class="icon">
<t-icon name="list" size="40rpx" color="#5E5E5E"></t-icon>
</view>
</movable-view>
</movable-area>
<movable-area class = "movableArea" :style="{height:height + 'px'}">
<movable-view class="backHome" id="moveBtn" style="pointer-events: auto;" v-if = "drawStates" direction="all" out-of-bounds="false" :x="x" :y=y damping="18" @touchmove="moveStart" @touchend = "moveEnd" @click = "activityCenter"></movable-view>
<movable-view class="movableView" id="moveBtn" style="pointer-events: auto;" v-else direction="all" out-of-bounds="false" :x="x" :y=y damping="18" @touchmove="moveStart" @touchend = "moveEnd" @click = "drawlottery"></movable-view>
</movable-area>
moveEnd (e) {
let that = this;
const query = wx.createSelectorQuery();
query.select("#moveBtn").boundingClientRect();
query.exec(function(res) {
console.log(res[0].left,'位置')//获取元素距左侧距离
if ((res[0].left+23).toFixed()<= that.screenWidth/2) {
that.x = 0
console.log(that.x)
} else {
that.x = that.screenWidth
}
that.y = res[0].top.toFixed()
// setTimeout(() => {
// },200)
console.log(res[0].left,res[0].top,'顶部top值')
console.log(that.x,that.y,'位置')//获取元素距左侧距离
});
},
贴代码
<movable-view class="backHome" id="moveBtn" style="pointer-events: auto;" v-if = "drawStates" direction="all" out-of-bounds="false" :x="x" :y=y damping="18" @touchmove="moveStart" @touchend = "moveEnd" @click = "activityCenter"></movable-view>
<movable-view class="movableView" id="moveBtn" style="pointer-events: auto;" v-else direction="all" out-of-bounds="false" :x="x" :y=y damping="18" @touchmove="moveStart" @touchend = "moveEnd" @click = "drawlottery"></movable-view>
</movable-area>
moveEnd (e) {
let that = this;
const query = wx.createSelectorQuery();
query.select("#moveBtn").boundingClientRect();
query.exec(function(res) {
console.log(res[0].left,'位置')//获取元素距左侧距离
if ((res[0].left+23).toFixed()<= that.screenWidth/2) {
that.x = 0
console.log(that.x)
} else {
that.x = that.screenWidth
}
that.y = res[0].top.toFixed()
// setTimeout(() => {
// },200)
console.log(res[0].left,res[0].top,'顶部top值')
console.log(that.x,that.y,'位置')//获取元素距左侧距离
});
},