uni-app movable-view 编译成微信小程序时 x值更新组件不移动
uni-app movable-view 编译成微信小程序时 x值更新组件不移动
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Mac | 12.3 | HBuilderX |
产品分类：uniapp/小程序/微信
示例代码：
<movable-area>
<movable-view direction="horizontal" class="moveItem" :x="item.x" @touchstart="touchstart($event)"
@touchend="touchend($event, item, index)">
<view class="left">
<img :src="item.thumb" alt="" class="msgIcon" />
</view>
<view class="middle">
<view class="middleTop">
<view class="title">
{{ item.title }}
</view>
<view class="time">
{{ item.rightText }}
</view>
</view>
<view class="middleBottom">
{{ item.note }}
</view>
</view>
<view class="right">
<view class="toTop" @click.stop="goTop(item, index)">
<text class="text">置顶</text>
</view>
<view class="remove" @click.stop="goRemove(item.id, index)">
<text class="text">删除</text>
</view>
</view>
</movable-view>
</movable-area>
export default {
data() {
return {
animation: true,
startX: null,
startY: null,
keyword: "",
options: [{
text: "置顶",
style: {
backgroundColor: "#3c9cff",
},
},
{
text: "删除",
style: {
backgroundColor: "#f56c6c",
},
},
],
msgList: [{
id: 0,
title: "审批",
note: "待办任务提醒：您有一条来自财务会计部采购部李宁远的订单",
thumb: "/static/img/fang@2x.png",
rightText: "2022/3/1",
badgeText: "12",
x: 0,
old: {
x: 0.1,
},
},
{
id: 1,
title: "附件夹",
note: "待办任务提醒：您有一条来自财务会计部采购部李宁远的待审批订单",
thumb: "/static/img/xiang@2x.png",
rightText: "2022/3/2",
badgeText: "1",
x: 0,
old: {
x: 0.1,
},
},
{
id: 2,
title: "尽调",
note: "您的收到一条拍卖消息",
thumb: "/static/img/tong@2x.png",
rightText: "2022/3/3",
x: 0,
old: {
x: 0.1,
},
},
{
id: 3,
title: "审批证照章",
note: "您的收到一条私息",
thumb: "/static/img/baojia@2x.png",
rightText: "2022/3/4",
x: 0,
old: {
x: 0.1,
},
},
{
id: 4,
title: "资产公示",
note: "您的收到一条私息",
thumb: "/static/img/tui@2x.png",
rightText: "2022/3/5",
x: 0,
old: {
x: 0.1,
},
},
{
id: 5,
title: "转让通知",
note: "您的收到一条私息",
thumb: "/static/img/zichan@2x.png",
rightText: "2022/3/6",
x: 0,
old: {
x: 0.1,
},
},
{
id: 6,
title: "系统提醒",
note: "您的收到一条私息",
thumb: "/static/img/fang@2x.png",
rightText: "2022/3/7",
x: 0,
old: {
x: 0.1,
},
},
{
id: 7,
title: "系统提醒",
note: "您的收到一条私息",
thumb: "/static/img/fang@2x.png",
rightText: "2022/3/8",
x: 0,
old: {
x: 0.1,
},
}
],
};
},
methods: {
touchstart(e) {
// 保存按下的x距离
e.preventDefault();
this.startX = e.touches[0].pageX;
this.startY = e.touches[0].pageY;
},
touchend(e, item, index) {
let endX = e.changedTouches[0].pageX;
let endY = e.changedTouches[0].pageY;
let X = endX - this.startX;
let Y = endY - this.startY;
// console.log(X, Y);
// 左滑
if (Math.abs(X) > Math.abs(Y) && X < 0) {
if (endX - this.startX <= -84) {
this.$nextTick(() => {
item.x = -145;
// 关闭其他滑动
this.msgList.forEach((v, i) => (i != index ? (v.x = 0) : ""));
});
// 左滑未超过蓝色置顶按钮，隐藏两个按钮
} else {
this.$nextTick(() => (item.x = item.x == 0 ? 0.01 : 0));
}
} else if (Math.abs(X) > Math.abs(Y) && X > 0) //右滑
{
if (endX - this.startX >= 60) {
this.$nextTick(() => (item.x = item.x == 0 ? 0.01 : 0));
// 右滑未超过红色删除按钮，显示两个按钮
} else {
this.$nextTick(() => (item.x = item.x == -145 ? -145.01 : -145));
}
}else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
// console.log('上下');
} else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
// console.log('下上');
} else {
// console.log('点击');
}
},
//信息置顶方法
goTop(item, index) {
// 根据数组下标判断当前数据是否已置顶，如果是给出弹窗提示
if (index == 0) {
uni.showToast({
icon: "none", // success / none / loading 3个有效参数
title: "已经置顶啦~",
duration: 2000,
});
this.$nextTick(()=>{
console.log(item.x);
item.x = item.old.x
console.log(item.x);
item.x = 0
console.log(item.x);
// item.x = item.x == 0 ? 0.1 : 0;
})
return;
}
//被置顶的隐藏左滑
this.$nextTick(() => {
console.log(item.x);
item.x = item.old.x
console.log(item.x);
item.x = 0
console.log(item.x);
// item.x = item.x == 0 ? 0.1 : 0;
let newList = this.msgList;
//置顶后让页面滚动到最上边，api框架不支持
// setTimeout(() => {
// uni.pageScrollTo({scrollTop: 0});
// }, 10);
//置顶操作，将当前index的元素通过unshift()方法添加到数组最前面，添加之后长度+1，之后并删除原本index+1 元素
newList.unshift(newList[index]);
newList.splice(index + 1, 1);
this.msgList = newList;
// setTimeout(() => {
// //将原数组复制一份操作
// let newList = this.msgList;
// //置顶后让页面滚动到最上边，api框架不支持
// // setTimeout(() => {
// // uni.pageScrollTo({scrollTop: 0});
// // }, 10);
// //置顶操作，将当前index的元素通过unshift()方法添加到数组最前面，添加之后长度+1，之后并删除原本index+1 元素
// newList.unshift(newList[index]);
// newList.splice(index + 1, 1);
// this.msgList = newList;
// }, 200);
});
},
goRemove(id, index) {
console.log("点击了删除");
uni.showModal({
title: "温馨提示",
content: "确定要删除吗？",
success: (res) => {
if (res.confirm) {
//通过filter过滤出当前点击那一行数据并将数据重新赋值给原数组
this.msgList = this.msgList.filter((item) => {
return item.id !== id;
});
}
},
});
},
msgHandler(e, id, index) {
//判断点击的是置顶还是删除，目前条件是置顶
if (e.index === 0) {
// 根据数组下标判断当前数据是否已置顶，如果是给出弹窗提示
if (index == 0) {
uni.showToast({
icon: "none", // success / none / loading 3个有效参数
title: "已经置顶啦~",
duration: 2000,
});
return;
}
//将原数组复制一份操作
let newList = this.msgList;
//置顶操作，将当前index的元素通过unshift()方法添加到数组最前面，添加之后长度+1，之后并删除原本index+1 元素
newList.unshift(newList[index]);
newList.splice(index + 1, 1);
this.msgList = newList;
//目前条件是删除
} else {
uni.showModal({
title: "温馨提示",
content: "确定要删除吗？",
success: (res) => {
if (res.confirm) {
//通过filter过滤出当前点击那一行数据并将数据重新赋值给原数组
this.msgList = this.msgList.filter((item) => {
return item.id !== id;
});
}
},
});
}
},
},
}
.inforMain{
background:#FFFFFF;
.moveArea {
width: 100vw-30px;
height: 90px;
// margin-left: 16px;
.moveItem {
padding: 0 16px;
width: 100vw;
height: 90px;
display: flex;
align-items: center;
border-bottom: 1px solid #f5f5f5;
.left {
margin-right: 12px;
.msgIcon {
width: 52px;
height: 52px;
border-radius: 50%;
}
}
.middle {
width: 75%;
.middleTop {
display: flex;
justify-content: space-between;
margin-bottom: 6;
.title {
font-size: 16px;
color: #000000;
font-weight: 600;
}
.time {
font-size: 13px;
color: #999999;
font-weight: 400;
}
}
.middleBottom {
font-size: 13px;
font-weight: 400;
color: #333333;
}
}
.right {
position: fixed;
right: -112px;
width: 120px;
display: flex;
.toTop {
width: 60px;
height: 90px;
background-color: #006aff;
border: none;
display: flex;
align-items: center;
justify-content: center;
.text {
color: #ffffff;
font-size: 16px;
font-weight: 400;
}
}
.remove {
border: none;
width: 60px;
height: 90px;
background-color: #d9583c;
display: flex;
align-items: center;
justify-content: center;
.text {
color: #ffffff;
font-size: 16px;
font-weight: 400;
}
}
}
}
}
/deep/ .uni-badge--success {
background-color: red !important;
}
/deep/ .uni-badge--x {
position: absolute !important;
top: -50px !important;
right: 2px !important;
}
/deep/ .uni-list-item__extra {
position: absolute !important;
bottom: 4px !important;
right: 4px !important;
}
/deep/ .uni-list-item__container {
height: 80px !important;
width: 365px;
}
/deep/ .uni-swipe {
border-bottom: 1px solid #f7f7f7 !important;
}
.search {
background-color: #ffffff;
padding: 0 34rpx 10rpx 34rpx;
align-items: center;
display: flex;
// 加号图标
.add {
width: 60rpx;
height: 60rpx;
margin-left: 2px;
}
}
}
更多关于uni-app movable-view 编译成微信小程序时 x值更新组件不移动的实战教程也可以访问 https://www.itying.com/category-93-b0.html
1 回复
更多关于uni-app movable-view 编译成微信小程序时 x值更新组件不移动的实战教程也可以访问 https://www.itying.com/category-93-b0.html
在 uni-app 中使用 movable-view 组件时，如果编译成微信小程序后 x 值更新但组件不移动，可能是由于以下几个原因导致的：
1. movable-view 的 x 值未正确绑定
确保 movable-view 的 x 属性已经正确绑定到数据变量，并且数据变量在更新时能够触发视图的重新渲染。
<movable-view :x="xValue" direction="all">
<!-- 内容 -->
</movable-view>
export default {
data() {
return {
xValue: 0
};
},
methods: {
updateXValue(newX) {
this.xValue = newX;
}
}
};
2. movable-view 的 x 值未触发更新
在微信小程序中，movable-view 的 x 值更新可能不会自动触发视图的重新渲染。你可以尝试手动调用 this.$forceUpdate() 来强制更新视图。
updateXValue(newX) {
this.xValue = newX;
this.$forceUpdate(); // 强制更新视图
}
3. movable-view 的 x 值超出范围
确保 x 值在 movable-area 的范围内。如果 x 值超出了 movable-area 的范围，movable-view 可能不会移动。
<movable-area>
<movable-view :x="xValue" direction="all">
<!-- 内容 -->
</movable-view>
</movable-area>
4. movable-view 的 x 值未正确传递
确保 x 值在更新时正确传递给了 movable-view 组件。你可以通过 console.log 来检查 x 值是否在更新时正确传递。
updateXValue(newX) {
console.log('New X Value:', newX); // 检查 x 值是否正确
this.xValue = newX;
}
5. 微信小程序的 movable-view 限制
微信小程序的 movable-view 组件可能有一些限制或 bug，导致 x 值更新时组件不移动。你可以尝试使用微信小程序的 setData 方法来更新 x 值。
updateXValue(newX) {
this.setData({
xValue: newX
});
}
6. movable-view 的 x 值未正确计算
确保 x 值的计算逻辑正确，并且在更新时能够正确反映在 movable-view 的位置上。
updateXValue(newX) {
this.xValue = newX * 2; // 例如，x 值的计算逻辑
}
7. movable-view 的 x 值未正确同步
在 uni-app 中，movable-view 的 x 值可能需要通过 this.$nextTick 来确保在 DOM 更新后同步。
updateXValue(newX) {
this.xValue = newX;
this.$nextTick(() => {
// 确保 DOM 更新后同步
});
}
8. movable-view 的 x 值未正确触发动画
如果 movable-view 的 x 值更新时没有触发动画，你可以尝试手动触发动画。
updateXValue(newX) {
this.xValue = newX;
this.$refs.movableView.animate({ x: newX }, 500); // 手动触发动画
}