设为首页收藏本站
开启辅助访问

uniapp使用 movable

 您所在的位置：网站首页 › 地图缩放如何实现标记功能 › uniapp使用 movable

uniapp使用 movable

2024-04-07 07:25| 来源: 网络整理| 查看: 265

效果

在这里插入图片描述

movable-area 与 movable-view

movable-view movable-area movable-view 主要是可以实现缩放及拖拽功能，不过只能限制在movable-area 范围内的拖拽超出范围会回弹。 为了增大一点它的回弹范围 可以设置 movable-view的宽高为0； 然后子元素决定定位居中。

单击缩小 双击放大

微信小程序没有双击事件 通过setTimeout 拦截并判断是单击还是双击。

区分pc端还是手机端 isPc() { const getSystemInfoSync = uni.getSystemInfoSync(); if ( ['windows', 'macos', 'linux'].includes(getSystemInfoSync.oeName) || !['ios', 'android'].includes(uni.getSystemInfoSync().platform) ) { return true; } else { return false; } }, 实现代码（部分无用组件自行删除）

hpopup 为uni-popup 我对其进行了二次封装 用于解决页面滚动穿透问题。 如果需要使用到拖拽动态改变弹窗大小 请替换一下 hpopup 为uni-popup getDomInfo

export function getDomInfo(className, _this) { const el = className; const query = uni.createSelectorQuery().in(_this); return new Promise((resolve, reject) => { query.select(el).boundingClientRect(); query.selectViewport().scrollOffset(); query.exec(function (res) { let data = res[0]; // #the-id节点的上边界坐标 resolve(data); }); }); }

partDetail.js

// partDetail 部件详情 数据 export const data = { code: 1, msg: '处理成功', time: 89148965.92326912, data: { img: {}, mid: '18_1221', part_detail: [ [ { remark: '', sa_code: '', pnum: '01', pid: '18328587749', itid: '01', label: '保修 柴油微粒过滤器', psort: 2, iscomt: '', has_article: '', isreplace: '', model: 'EU6', quantity: '1', condition: '', spid: '18328587749' }, { remark: '+S167A', sa_code: 'S167A', pnum: '01', pid: '18328596435', itid: '01', label: '保修 柴油微粒过滤器', psort: 16, iscomt: '', has_article: '', isreplace: '', model: 'EU5', quantity: '1', condition: '', spid: '18328596435' }, { remark: '-20190700+S167A', sa_code: 'S167A', pnum: '01', pid: '18328596435', itid: '01', label: '保修 柴油微粒过滤器', psort: 18, iscomt: '', has_article: '', isreplace: '', model: 'EU5', quantity: '1', condition: '', spid: '18328596435' }, { remark: '-20190700-S167A', sa_code: 'S167A', pnum: '01', pid: '18328587749', itid: '01', label: '保修 柴油微粒过滤器', psort: 20, iscomt: '', has_article: '', isreplace: '', model: 'EU6', quantity: '1', condition: '', spid: '18328587749' } ], [ { remark: '', sa_code: '', pnum: '02', pid: '18308512137', itid: '02', label: 'V 型带箍', psort: 42, iscomt: '', has_article: '', isreplace: '', model: '', quantity: '1', condition: '', spid: '18308512137' } ], [ { remark: '', sa_code: '', pnum: '03', pid: '18308513651', itid: '03', label: '密封件', psort: 43, iscomt: '', has_article: '', isreplace: '', model: '', quantity: '1', condition: '', spid: '18308513651' } ], [ { remark: '', sa_code: '', pnum: '04', pid: '18208579603', itid: '04', label: '发动机附近的废气触媒转换器支架', psort: 44, iscomt: '', has_article: '', isreplace: '', model: '', quantity: '1', condition: '', spid: '18208579603' } ], [ { remark: '', sa_code: '', pnum: '05', pid: '18208470030', itid: '05', label: '发动机附近的废气触媒转换器支架', psort: 46, iscomt: '', has_article: '', isreplace: '', model: '', quantity: '1', condition: '', spid: '18208470030' } ], [ { remark: '', sa_code: '', pnum: '06', pid: '07129904559', itid: '06', label: '螺栓', psort: 47, iscomt: '', has_article: '', isreplace: '', model: 'M8X20-U1-8.8', quantity: '2', condition: '', spid: '07129904559' } ], [ { remark: '', sa_code: '', pnum: '07', pid: '07119904024', itid: '07', label: '六角螺母', psort: 48, iscomt: '', has_article: '', isreplace: '', model: 'M8-ZNS3', quantity: '2', condition: '', spid: '07119904024' } ], [ { remark: '', sa_code: '', pnum: '08', pid: '07119907332', itid: '08', label: '六角螺栓', psort: 52, iscomt: '', has_article: '', isreplace: '', model: 'M8X16-8.8-ZNS3', quantity: '2', condition: '', spid: '07119907332' }, { remark: '', sa_code: '', pnum: '08', pid: '07119904124', itid: '08', label: '六角螺栓', psort: 53, iscomt: '', has_article: '', isreplace: '', model: 'M8X16-8.8-ZNS3', quantity: '1', condition: '', spid: '07119904124' } ], [ { remark: '', sa_code: '', pnum: '09', pid: '18328587758', itid: '09', label: '退耦元件', psort: 54, iscomt: '', has_article: '', isreplace: '', model: '', quantity: '1', condition: '', spid: '18328587758' } ], [ { remark: '-20190100', sa_code: '', pnum: '10', pid: '18308473749', itid: '10', label: '张紧夹箍', psort: 56, iscomt: '', has_article: '', isreplace: '', model: '', quantity: '1', condition: '', spid: '18308473749' }, { remark: '', sa_code: '', pnum: '10', pid: '18308478401', itid: '10', label: '张紧夹箍', psort: 57, iscomt: '', has_article: '', isreplace: '', model: '', quantity: '1', condition: '', spid: '18308478401' } ] ], mcid: 'A1obERxaQlhaTkhKQUhaBQ%3D%3D', num: '18', maingroup: '18', brandCode: 'bmw', subgroup: '18_1221', imageHeight: '', imageWidth: '' }, length: 1, img: { imagePath: 'https://structimgs.007vin.com/struct/1000003/55936320a0f1c1851515a6e725f7f851.png', imgPoints: { hotspots: [ { hsX: '296', hsY: '389', maxY: '419', maxX: '314', hsKey: '01' }, { hsX: '168', hsY: '434', maxY: '464', maxX: '188', hsKey: '02' }, { hsX: '231', hsY: '388', maxY: '418', maxX: '251', hsKey: '03' }, { hsX: '644', hsY: '441', maxY: '471', maxX: '664', hsKey: '04' }, { hsX: '587', hsY: '135', maxY: '165', maxX: '607', hsKey: '05' }, { hsX: '586', hsY: '66', maxY: '91', maxX: '612', hsKey: '06' }, { hsX: '725', hsY: '439', maxY: '469', maxX: '745', hsKey: '06' }, { hsX: '499', hsY: '526', maxY: '552', maxX: '526', hsKey: '07' }, { hsX: '725', hsY: '391', maxY: '421', maxX: '745', hsKey: '07' }, { hsX: '640', hsY: '393', maxY: '419', maxX: '666', hsKey: '08' }, { hsX: '725', hsY: '343', maxY: '373', maxX: '745', hsKey: '08' }, { hsX: '166', hsY: '35', maxY: '64', maxX: '186', hsKey: '09' }, { hsX: '684', hsY: '136', maxY: '165', maxX: '714', hsKey: '10' } ], maxScaleFactor: 1, imageFormat: 'image/png' }, name: '保修 柴油微粒过滤器' }, args: { mcid: 'A1obERxaQlhaTkhKQUhaBQ%3D%3D', num: '18', mid: '18_1221', subgroup: '18_1221', brandCode: 'bmw', noCacheTime: '1672043382', users: '17700783774', client_ip: '125.94.200.9', source: 'web', yc_id: '40cfef25b53f395958adcb9323dda090' }, query_time: 0.028442570939660072 }; export const priceOptions = { 18328587749: { inventory: 0, has_article: 0, iscomt: 0, isreplace: 0, sale_price: '¥21899.99' }, 18328596435: { inventory: 0, has_article: 0, iscomt: 0, isreplace: 0, sale_price: '¥21899.99' }, 18308512137: { inventory: 0, has_article: 0, iscomt: 0, isreplace: 0, sale_price: '¥320.99' }, 18308513651: { inventory: 0, has_article: 1, iscomt: 0, isreplace: 0, sale_price: '¥62.0' }, 18208579603: { inventory: 0, has_article: 0, iscomt: 0, isreplace: 0, sale_price: '¥377.0' }, 18208470030: { inventory: 0, has_article: 0, iscomt: 0, isreplace: 0, sale_price: '¥282.99' }, '07129904559': { inventory: 0, has_article: 0, iscomt: 0, isreplace: 1, sale_price: '¥12.99' }, '07119904024': { inventory: 0, has_article: 0, iscomt: 0, isreplace: 1, sale_price: '¥8.0' }, '07119907332': { inventory: 0, has_article: 0, iscomt: 0, isreplace: 0, sale_price: '¥8.0' }, '07119904124': { inventory: 0, has_article: 0, iscomt: 0, isreplace: 0, sale_price: '¥8.99' }, 18328587758: { inventory: 0, has_article: 0, iscomt: 0, isreplace: 0, sale_price: '¥1870.0' }, 18308473749: { inventory: 0, has_article: 0, iscomt: 0, isreplace: 1, sale_price: '¥343.0' }, 18308478401: { inventory: 0, has_article: 0, iscomt: 0, isreplace: 0, sale_price: '¥308.99' } };

组件代码

配件位置：21 配件位置：21 配件位置：21 import listItemType1 from '@/pages/components/indexComponents/listItemType1.vue'; import hPopup from '@/components/baseComponent/h-popup.vue'; import safeFooter from '@/components/baseComponent/safe-footer.vue'; import { getDomInfo } from '@/utils/request/common.js'; import { data } from '@/pages/static/js/partDetail.js'; export default { components: { listItemType1, hPopup, safeFooter }, props: { //是否可以拖拽横横线改变上下高度 isDragLine: { type: Boolean, default: true }, //是否有多个主图数据 isMultiple: { type: Boolean, default: true }, vinItemData: { type: Object, default: () => { return {}; } } }, data: () => ({ partsListPopupShow: false, //是否 显示 配件信息弹窗 isTagMove: false, tagOffsetTop: 0, tagTop: 0, tagPageY: 0, maxRatio: 0.95, minRatio: 0.35, movableAreaHeight: null, imgInfo: {}, showMovableView: false, imageBox: { width: 0, height: 0 }, previewBox: { width: 0, height: 0 }, // outOfProportion: 1, // 超出边界范围比例 //初始化拖拽数据 initDrag: { x: 0, //x轴偏移量 单位px y: 0, //y轴偏移量 单位px scaleMin: 0.5, scaleMax: 5 }, currentScale: 1, //当前缩放值 scaleValue: 1, lastTapTime: 0, //记录上一次点击时间 clickTimer: null, clickDelay: 300 }), computed: { vinImageData() { if (!this.isMultiple) { return this.vinItemData; } return {}; }, windowHeight() { const getSystemInfoSync = uni.getSystemInfoSync(); return getSystemInfoSync.windowHeight; }, imageCenterStyle() { let w = 0; let h = 0; if (this.showMovableView) { return `width:${w}px;height:${h}px;`; } return ''; }, imageBoxStyle() { let w = this.imageBox.width; let h = this.imageBox.height; if (this.showMovableView) { return `width:${w}px;height:${h}px;`; } return ''; }, isPc() { const getSystemInfoSync = uni.getSystemInfoSync(); if ( ['windows', 'macos', 'linux'].includes(getSystemInfoSync.oeName) || !['ios', 'android'].includes(uni.getSystemInfoSync().platform) ) { return true; } else { return false; } }, moveLineStyle() { let top = this.tagTop; return `top:${top}px;`; }, popupHeightStyle() { let h = this.movableAreaHeight; if (h) { return `height:calc(100vh - ${h}px);`; } else { return 'height: 35vh;'; } }, movableAreaHeightStyle() { let h = this.movableAreaHeight; if (h && !this.isDragLine) { return `height:${h}px;`; } else if (this.isDragLine) { return `height:100vh;`; } else { return 'height: 65vh;'; } } }, methods: { partsListPopupClose() { this.partsListPopupShow = false; }, partsListPopupOpen() { this.partsListPopupShow = true; }, // 震动反馈 feedbackGenerator(instance) { //触感反馈 //wxs 不支持条件编译，所以用此方法判断 var isiOSAPP = typeof plus != 'undefined' && plus.os.name == 'iOS'; var UISelectionFeedbackGenerator; var UIImpactFeedbackGenerator; var impact; if (isiOSAPP) { UISelectionFeedbackGenerator = plus.ios.importClass( 'UISelectionFeedbackGenerator' ); impact = new UISelectionFeedbackGenerator(); impact.init(); // impact.prepare(); // impact.init(1); // impact.impactOccurred(); impact.selectionChanged(); } else { if (typeof plus != 'undefined') { plus.device.vibrate(300); } else { // instance.callMethod('vibrate'); uni.vibrateShort(); } } }, tagStart(e, instance) { const clientY = e.touches[0].clientY; const pageY = e.touches[0].pageY; const offsetTop = e.target.offsetTop; this.tagTop = clientY; this.tagOffsetTop = offsetTop; this.feedbackGenerator(); }, tagMove(e) { this.isTagMove = true; const clientY = e.touches[0].clientY; const pageY = e.touches[0].pageY; const offsetTop = e.target.offsetTop; let tagTop = clientY; let minTop = this.windowHeight * this.minRatio; let maxTop = this.windowHeight * this.maxRatio; // console.log( // 'clientY pageY offsetTop', // clientY, // pageY, // offsetTop, // minTop, // maxTop // ); if (tagTop tagTop = maxTop; } if (pageY = minTop) { this.tagTop = tagTop; this.tagPageY = pageY; } }, tagEnd(e) { this.isTagMove = false; this.movableAreaHeight = this.tagPageY; }, getImgInfo() { this.imgInfo = data.img; this.imgInfo.imgPoints.hotspots = this.imgInfo.imgPoints.hotspots.map( item => { item.getPointStyle = this.getPointStyle(item); return item; } ); }, // 设置图片标记点 激活 setpointData(hsKey) { this.imgInfo.imgPoints.hotspots = this.imgInfo.imgPoints.hotspots.map( item => { item.active = false; if (item.hsKey == hsKey) { item.active = true; } return item; } ); }, // 点击指示点处理 pointHandle(hsKey) { if (this.isDragLine) { this.partsListPopupOpen(); } this.setpointData(hsKey); }, // 获取图片指示点位置样式 getPointStyle(pointItem) { const { hsX, hsY, maxY, maxX, hsKey } = pointItem; let style = ''; let w = maxX - hsX; let h = maxY - hsY; let left = hsX; let top = hsY; let beishuWH = 650; let beishuL = 800; let beishuT = 560; w = `${(w / beishuWH) * 100}%`; h = `${(h / beishuWH) * 100}%`; left = `${(Number(left) / beishuL) * 100}%`; top = `${(Number(top) / beishuT) * 100}%`; style = `width:${w};height:${h};left:${left};top:${top};`; return style; }, async previewImageLoad(e) { await this.getDomInfo(); this.setInDragcenterXY(); this.showMovableView = true; }, // 获取初始拖拽位置 async getDomInfo() { // 盒子高度 let imageBox = await getDomInfo('.movable-view_image_box', this); let previewBox = await getDomInfo('.preview_box', this); console.log('imageBox', imageBox); console.log('previewBox', previewBox); imageBox = { height: imageBox.height || 0, width: imageBox.width || 0 }; previewBox = { height: previewBox.height || 0, width: previewBox.width || 0 }; this.imageBox = imageBox; this.previewBox = previewBox; }, // 设置初始化位置居中 async setInDragcenterXY() { // 盒子高度 let imageBox = { height: 0, width: 0 }; let previewBox = this.previewBox; let x = 0; let y = 0; x = previewBox.width / 2 - imageBox.width / 2; y = previewBox.height / 2 - imageBox.height / 2; this.initDrag.x = x; this.initDrag.y = y; }, // 缩放过程改变 scaleChange(event) { const { scale } = event.detail; this.currentScale = scale; }, movableClick(e) { // 判断双击事件 let curTime = e.timeStamp; if (this.lastTapTime > 0) { if (curTime - this.lastTapTime // 单击 // 电脑端才需要 单击和双击事件触发缩放 if (!this.isPc) return; this.movableOnClick(e); }, this.clickDelay); }, // 图片单击事件 movableOnClick(e) { this.currentScale = this.currentScale - 0.5; if (this.currentScale this.currentScale = this.initDrag.scaleMax; } this.scaleValue = this.currentScale; }, // 图片双击事件 movableDbClick(e) { this.currentScale = this.currentScale + 0.5; if (this.currentScale this.currentScale = this.initDrag.scaleMax; } this.scaleValue = this.currentScale; } }, watch: {}, // 组件加载完成 async onLoad(options) {}, // 组件显示 onShow() {}, created() { this.getImgInfo(); }, // 组件周期函数--监听组件挂载完毕 mounted() {}, // 组件周期函数--监听组件数据更新之前 beforeUpdate() {}, // 组件周期函数--监听组件数据更新之后 updated() {}, // 组件周期函数--监听组件激活(显示) activated() {}, // 组件周期函数--监听组件停用(隐藏) deactivated() {}, // 组件周期函数--监听组件销毁之前 beforeDestroy() {} }; .container { width: 100%; } .preview_box { width: 100%; background-color: red; position: relative; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; .preview_image { width: 80%; height: min-content; max-height: 100%; .image_center_box { width: 100%; height: 100%; position: relative; } .image_box { width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); image { object-fit: contain; width: 100%; } .point { position: absolute; display: inline-block; /* border: dashed 1px; */ border: solid 1px; cursor: pointer; border-radius: 9999rpx; } .border-c_blue-1 { border-color: rgba(24, 144, 255, 1); } .border-c_gray-1 { background-color: rgba(232, 232, 232, 0.5); border-color: rgba(51, 51, 51, 1); } } } .preview_image_outer { width: 80%; max-height: 100%; object-fit: contain; } .image_list_box { position: absolute; right: 27rpx; top: 12vh; width: 82rpx; background: #ffffff; box-shadow: 0px 0px 14rpx 0px #dde6f6; border-radius: 18rpx; display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box; padding: 11rpx 0; .mini_image_active { border: 2rpx solid #d70937; } .mini_image_item { width: 63rpx; height: 63rpx; background: #ffffff; border-radius: 9rpx; margin-bottom: 11rpx; &:last-child { margin-bottom: 0; } image { width: 100%; height: 100%; } } } } .moveLine { width: 100%; background: rgb(242, 245, 253); opacity: 0.5; position: fixed; display: flex; align-items: center; justify-content: space-between; z-index: 999; } .tag_info_box, .moveLine { .drag_line_tip { position: absolute; top: 5rpx; left: 50%; transform: translateX(-50%); width: 72rpx; height: 11rpx; background: linear-gradient(90deg, #c7cee0 0%, #b9c2d7 100%); border-radius: 5999rpx; } .info_label { margin-top: 27rpx; margin-bottom: 16rpx; padding: 7rpx 25rpx 7rpx 16rpx; box-sizing: border-box; height: 45rpx; background: linear-gradient(90deg, #4448f6 0%, #d46dff 100%); border-radius: 0px 999rpx 999rpx 0px; font-size: 24rpx; font-weight: 400; color: #ffffff; display: flex; align-items: center; width: max-content; } .view_tip { font-size: 22rpx; color: #2a56e4; margin-right: 22rpx; } .close { margin-right: 16rpx; width: 30rpx; height: 30rpx; display: flex; align-items: center; justify-content: center; // overflow: hidden; .close_center { width: 100%; position: relative; } .r { position: absolute; width: 100%; height: 4rpx; border-radius: 999rpx; transform: rotate(45deg); background: #000000; } .c { position: absolute; width: 100%; height: 4rpx; border-radius: 999rpx; transform: rotate(-45deg); background: #000000; } } } .parts_popup_content { display: flex; flex-direction: column; .list { height: 0; flex-grow: 1; overflow-y: auto; } } .list_content { width: 100%; background: #f2f5fd; .tag_info_box { display: flex; align-items: center; justify-content: space-between; position: relative; } .list { width: 100%; padding: 0 11rpx; box-sizing: border-box; .list_item { display: block; box-sizing: border-box; margin-bottom: 27rpx; &:last-child { margin-bottom: 0; } } } }


【本文地址】


今日新闻

推荐新闻

CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3