可是子容器的运动范围必需归纳父容器.,可活动

三. 可运维的代码

  • wxml
<view class='container'> <view > movable-view区域小于movable-area </view> <movable-area scale-area> <movable-view direction="all" scale inertia out-of-bounds x="{{x}}" y="{{y}}" damping="1" friction="200" bindchange="change" bindscale="scale"></movable-view> </movable-area> <view > movable-view区域大于movable-area </view> <movable-area scale-area> <movable-view direction="all"> <text>可移动的view</text> </movable-view> </movable-area></view>
  • wxss
.container { display: flex; flex-direction: column; align-items: center;}.section_title_less { font-size: 28rpx;}.area_less { height: 200px; width: 200px; background-color: red;}.view_less { height: 50px; width: 50px; background-color: yellow;}.section_title_more { font-size: 28rpx; margin-top: 50px;}.area_more { height: 50px; width: 50px; background-color: red;}.view_more { height: 200px; width: 200px; border-color: green; border-width: 2px; border
  • js
Page({ /** * 页面的初始数据 */ data: { x: "100px", y: "10px" }, /** * 生命周期函数--监听页面加载 */ onLoad: function  { }, change: function  { // console.log; }, scale: function  { // console.log; }, vtouchmove: function  { console.log; }, htouchmove: function  { console.log; }})

微信小程序movable view移动图片和双指缩放实例代码,

movable-area是微信小程序的新组件,能够用来移动视图区域movable-view。移动方向可选择任何、垂直和平行。可活动区域里带有其余文件、图片、开关等零件。可活动区域可绑定touchend等事件。movable-view的参数可调动动画效果。

先从movable-view早先谈起吧. movable-view是小程序自定义的组件.其描述为:"可活动的视图容器,在页面中得以拖拽滑动". 官方文书档案地址:

.

值得注意的是文档中有一段备注: "当movable-view小于movable-area时,movable-view的移动范围是在movable-area内;当movable-view大于movable-area时,movable-view的运动范围必得含有movable-area(x轴方向和y轴方向分开思考)". 也正是说父容器movable-area是足以比子容器movable-view小的,然则子容器的位移范围必需回顾父容器.

先看官方实例代码:

<view class="section">
 <view class="section__title">movable-view区域小于movable-area</view>
 <movable-area style="height: 200px;width: 200px;background: red;">
 <movable-view style="height: 50px; width: 50px; background: blue;" x="{{x}}" y="{{y}}" direction="all">
 </movable-view>
 </movable-area>
 <view class="btn-area">
 <button size="mini" bindtap="tap">click me to move to (30px, 30px)</button>
 </view>
 <view class="section__title">movable-view区域大于movable-area</view>
 <movable-area style="height: 100px;width: 100px;background: red;" direction="all">
 <movable-view style="height: 200px; width: 200px; background: blue;">
 </movable-view>
 </movable-area>
</view>

那其间有个错误,应该是编写人的一点小失误吧. 第1个movable-area的本性direction应该写在movable-view上.

 <movable-area style="height: 100px;width: 100px;background: red;" >
  <movable-view style="height: 200px; width: 200px; background: blue;" direction="all">
  </movable-view>
 </movable-area>

看下效果:

1) 当movable-view区域小于movable-area时,子容器movable-view只好在父容器内移动.  下图的作用是设置了品质 out-of-bounds="true"的效果. out-of-bounds能够染子容器到达父容器边界时有个高于边界然后回弹的动画. 而不是确实能让子容器移动到父容器以外.

2) 当movable-view区域大于movable-area时,子容器移动的限量必须归纳父容器.                    

图片 1 图片 2                             

第三种情景中,把父容器看做手提式有线电话机显示屏可视区域,子容器看做要查看的长图,大图. 就能够完成拖动查看图片的成效. 若是图片时动态加载的,不是定位的图形,将要合营图片宽高级小学于显示器可视宽高和图纸宽高大于可视显示屏宽高的大概,也正是要思索到以上两种意况.

作者们要在movable组件加载的同期安装好movable-view的宽高,因为movable组件加载成功后再去退换movable-view的高低,可活动区域是不会变的. 大家得以经过页面中要查看的图样的onload事件中猎取图片宽高(最近本人只开采bindload事件能收获到图片宽高),然后存款和储蓄起来imgWidth和imgHeight. 当客商点击图片时,在bindtap事件中设置好movable-view的宽高,同时将movable-area的弹窗wx;if设置为true.

 <!-- 要查看的图片列表 -->
   <view class="flex-wrap flex-pic">
     <view class="picList">   
     <image wx:for="{{item.imglist}}" wx:for-item="itemImg" wx:key="*this" id="{{'rfnd_'+index}}" bindload="imageOnload" src="{{ itemImg}}" bindtap="showResizeModal" data-src="{{itemImg}}"></image>   
    </view>
   </view>

因为要翻看的是一个图纸列表, 作者用了叁个数组去存储每种图片的宽高,然后经过图片id来波及

/**
 * 加载图片
 */
 imageOnload:function(e){
 var id = e.currentTarget.id
 this.data.imgIdList[id] = {
  width:e.detail.width,
  height:e.detail.height
 }
 },
 模板页面
<!--components/resizePicModal/resizePicModal.wxml-->
<template name="resizePic">
 <scroll-view class="backdrop"> 
 <view class="close-icon" bindtap="closeResizeModal"> 
  取消预览
 </view>
 <movable-area style="width:100%;height:100%;" >
  <movable-view direction="all" 
  out-of-bounds="true" x="{{img.x}}" y="{{img.y}}" >
  <image mode="widthFix" class="dtl-img" src="{{img.currentSrc}}"></image>
  </movable-view>
 </movable-area> 
 </scroll-view> 
 </template>
 /**
 * 打开弹窗
 */
 showResizeModal: function (e) {
 var src = e.currentTarget.dataset.src;
 var x = 0
 var y =0
 try {
  var width = this.imgIdList[e.currentTarget.id].width; //图片原宽
  var height = this.imgIdList[e.currentTarget.id].height; //图片原高

  //小程序默认固定宽320px,获取top和left值,使图片居中显示
  height = height * (320 / width);
  width = 320;
    
  x = (app.windowWidth - width) / 2 
  y = (app.windowHeight - height) / 2

 } catch (e) { }
 var img = {
  x: x,
  y: y,26  currentSrc: src,
 };
 this.setData({ img: img, isCheckDtl: true });

 },

  部分CSS代码

.backdrop{
 background: rgba(0, 0, 0, 1);
 width:100%;
 height: 100%;
 position: fixed;
 top:0;
 left:0;
}

如上基本上可以实现一个点击查阅图片的需要.

可是固然再支撑双指缩放的话,movable-view实现持续.小编暂没想出来怎么落到实处,假设有人知晓,希望能够带领迷津. 主要原因是因为如故本人上文提到的那句话:"movable组件加载成功后再去改动movable-view的分寸,可活动区域是不会变的".缩放后图片大小确定会改换的. 收缩还好,一旦松手,可活动区域还是原先的不会改动.想象一下,假如一张宽度刚刚好时荧屏可视宽度的图形,放大后,那张图纸就只还好荧屏可视宽度windowWidth的界定中移动,看不到左也看不到侧面高出的部分.

于是一旦既要可活动图片又要可缩放,就无法用movable-view组件了,本人写个吧. 原本bindtouchmove会触发页面包车型大巴滚动条,不过未来微信好像已经修复了那么些BUG,小编明天在真机上测验未有现身那一个难点.

 自定义控件resizePicModal.wxml:

<!-- 缩放 -->
<template name="resizePic">
 <scroll-view class="backdrop" catchtouchmove="bindTouchMove" catchtouchend="bindTouchEnd" bindtouchstart="bindTouchStart" > 
 <view class="close-icon" bindtap="closeResizeModal"> 
  取消预览
 </view>
  <image catchtouchmove="bindTouchMove" bindtouchend="bindTouchEnd" bindtouchstart="bindTouchStart" 
  style=" transform: scale({{img.baseScale}}); position:absolute; top:{{img.top}}px; left:{{img.left}}px; "
  mode="widthFix" class="dtl-img" src="{{img.currentSrc}}"></image> 
 </scroll-view> 
 </template>

 JS: resizePicModal.js

 /**
 * 使用方法:
 * 1) WXHTML要缩放的图片 必须 传入 src 以及绑定 bindtap事件,
 * e.g:  
 * <image bindtap="toggleDtl" data-src="{{item}}" wx:for="{{productCard.arrImg}}" wx:key="*this" src="{{item}}" style="width:100%" mode="widthFix"></image>
 * 2) WXHTML 要引入Modal模板(isCheckDtl无需再定义):
 *  <view wx:if="{{isCheckDtl}}">
 *  <import src="/components/resizePicModal/resizePicModal.wxml"/>
 *  <template is="resizePic" data="{{img}}"></template>
 *  </view>
 * 3) JS页面要引入JS文件,覆盖当前页面的事件:
 * var resizePicModalService = require ('../../components/resizePicModal/resizePicModal.js')
 * var resizePicModal = {}
 * 4) 在onLoad事件中,实例化ResizePicModal
 *  resizePicModal = new resizePicModalService.ResizePicModal()
 */
var app = getApp()
let modalEvent = {
 distanceList: [0, 0],//存储缩放时,双指距离.只有两个数据.第一项为old distance.最后一项为new distance
 disPoint: { x: 0, y: 0 },//手指touch图片时,在图片上的位置
 imgIdList:{},
 /**
 * 打开弹窗
 */
 showResizeModal: function (e) {
 var src = e.currentTarget.dataset.src;
 var x = 0
 var y =0
 try {
  var width = this.imgIdList[e.currentTarget.id].width; //图片原宽
  var height = this.imgIdList[e.currentTarget.id].height; //图片原高
  //小程序固定宽320px
  height = height * (320 / width);
  width = 320;
  x = (app.windowWidth - width) / 2 //> 0 ? (app.windowWidth - width) / 2 : 0;
  y = (app.windowHeight - height) / 2// > 0 ? (app.windowHeight - height) / 2 : 0;
 } catch (e) { }
 var img = {
  top: y,
  left: x,
  x: x, y: y,
  width: '100%',
  baseScale: 1,
  currentSrc: src,
 };
 this.setData({ img: img, isCheckDtl: true });
 },
 /**
 * 关闭弹窗
 */
 closeResizeModal:function(){
 this.setData({ isCheckDtl: false })
 },
 /**
 * 加载图片
 */
 imageOnload:function(e){
 var id = e.currentTarget.id
 this.imgIdList[id] = {
  width:e.detail.width,
  height:e.detail.height
 }
 },
 /**
 * bindtouchmove
 */
 bindTouchMove: function (e) {
 if (e.touches.length == 1) {//一指移动当前图片
  this.data.img.left = e.touches[0].clientX - this.disPoint.x
  this.data.img.top = e.touches[0].clientY - this.disPoint.y
  this.setData({ img: this.data.img })
 }
 if (e.touches.length == 2) {//二指缩放
  var xMove = e.touches[1].clientX - e.touches[0].clientX
  var yMove = e.touches[1].clientY - e.touches[0].clientY
  var distance = Math.sqrt(xMove * xMove + yMove * yMove);//开根号
  this.distanceList.shift()
  this.distanceList.push(distance)
  if (this.distanceList[0] == 0) { return }
  var distanceDiff = this.distanceList[1] - this.distanceList[0]//两次touch之间, distance的变化. >0,放大图片.<0 缩小图片
  // 假设缩放scale基数为1: newScale = oldScale + 0.005 * distanceDiff
  var baseScale = this.data.img.baseScale + 0.005 * distanceDiff
  if(baseScale>0){
  this.data.img.baseScale = baseScale
  var imgWidth = baseScale * parseInt(this.data.img.imgWidth) 
  var imgHeight = baseScale * parseInt(this.data.img.imgHeight)
  this.setData({ img: this.data.img })
  }else{
  this.data.img.baseScale = 0
  this.setData({ img: this.data.img })
  }
 }
 },
 /**
 * bindtouchend
 */
 bindTouchEnd: function (e) {
 if (e.touches.length == 2) {//二指缩放
  this.setData({ isCheckDtl: true })
 }
 },
 /**
 * bindtouchstart
 */
 bindTouchStart: function (e) {
 this.distanceList = [0, 0]//回复初始值
 this.disPoint = { x: 0, y: 0 }
 if (e.touches.length == 1) {
  this.disPoint.x = e.touches[0].clientX - this.data.img.left
  this.disPoint.y = e.touches[0].clientY - this.data.img.top
 }
 }
}
function ResizePicModal(){
 let pages = getCurrentPages()
 let curPage = pages[pages.length - 1]
 Object.assign(curPage, modalEvent)//覆盖原生页面事件
 this.page = curPage
 curPage.resizePicModal = this
 return this
}
module.exports = {
 ResizePicModal
}

事务页面wxml:引进自定义控件模板

<view class="flex-wrap flex-pic">
    <view class="picList">   
     <image wx:for="{{item.imglist}}" wx:for-item="itemImg" wx:key="*this" id="{{'rfnd_'+index}}" bindload="imageOnload" src="{{ itemImg}}" bindtap="showResizeModal" data-src="{{itemImg}}"></image>   
    </view>
 </view>
<!-- 缩放 -->
 <view wx:if="{{isCheckDtl}}">
 <import src="/components/resizePicModal/resizePicModal.wxml"/>
 <template is="resizePic" data="{{img}}"></template>
 </view>

 业务页面js,引用js文件,实例化resizePicModal

var that
 var resizePicModal = {}
 var app = getApp()
 var resizePicModalService = require('../../components/resizePicModal/resizePicModal.js')
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  that = this 8  resizePicModal = new resizePicModalService.ResizePicModal()
 }

总结

如上所述是笔者给咱们介绍的微信小程序movable view移动图片和双指缩放实例代码,希望对大家具备利于,若是我们有其余疑问请给本身留言,我会及时回复我们的。在此也特别感激大家对帮客之家网址的支撑!

view移动图片和双指缩放实例代码, movable-area是微信小程序的新组件,能够用来运动视图区域movable-view。移动方向可挑选任...

二. movalbe-view

可活动的视图容器,在页面中得以拖拽滑动

属性 类型 默认值 说明
x Number / String 定义x轴方向的偏移,如果x的值不在可移动范围内,会自动移动到可移动范围;改变x的值会触发动画
y Number / String 定义y轴方向的偏移,如果y的值不在可移动范围内,会自动移动到可移动范围;改变y的值会触发动画
direction String none movable-view的移动方向,属性值有all、vertical、horizontal、none
inertia Boolean false movable-view是否带有惯性
out-of-bounds Boolean false 超过可移动区域后,movable-view是否还可以移动
damping Number 20 阻尼系数,用于控制x或y改变时的动画和过界回弹的动画,值越大移动越快
friction Number 2 摩擦系数,用于控制惯性滑动的动画,值越大摩擦力越大,滑动越快停止;必须大于0,否则会被设置成默认值
disabled Boolean false 是否禁用 (如果禁用,movable-view就不可移动了)
scale Boolean false 是否支持双指缩放,默认缩放手势生效区域是在movable-view内
scale-min Number 0.5 定义缩放倍数最小值
scale-max Number 10 定义缩放倍数最大值
scale-value Number 1 定义缩放倍数,取值范围为 0.5 - 10
bindchange EventHandle 拖动过程中触发的事件,event.detail
bindscale EventHandle 缩放过程中触发的事件,event.detail

代码Github地址

一. movable-area

movable-view的可活动区域。

2. 注意点
  • movable-view必得安装width和height。不然就能够默以为10px.
  • movable-view必需在<movable-area/>组件中,并且必需是直接子节点,不然不能够活动
  • movable-view 默以为相对定位,top和left属性为0px
  • 当movable-view小于movable-area时,movable-view的位移范围是在movable-area内;
  • 当movable-view大于movable-area时,movable-view的运动范围必得含有movable-area(x轴方向和y轴方向分开思虑)
1. 质量表达
属性 类型 默认值 说明
scale-area Boolean false 当里面的movable-view设置为支持双指缩放时,设置此值可将缩放手势生效区域修改为整个movable-area

本文由2138acom太阳集团app发布于关于计算机,转载请注明出处:可是子容器的运动范围必需归纳父容器.,可活动

相关阅读