微信小程序movable-view移動(dòng)圖片和雙指縮放

發(fā)布時(shí)間：2018-04-23 11:46 所屬欄目：小程序開(kāi)發(fā)教程

先從movable-view開(kāi)始說(shuō)起吧. movable-view是小程序自定義的組件.其描述為:”可移動(dòng)的視圖容器，在頁(yè)面中可以拖拽滑動(dòng)”. 官方文檔地址:https://mp.weixin.qq.com/debug/wxadoc/dev/component/movable-view.html.

值得注意的是文檔中有一段備注: “當(dāng)movable-view小于movable-area時(shí)，movable-view的移動(dòng)范圍是在movable-area內(nèi)；當(dāng)movable-view大于movable-area時(shí)，movable-view的移動(dòng)范圍必須包含movable-area（x軸方向和y軸方向分開(kāi)考慮）”. 也就是說(shuō)父容器movable-area是可以比子容器movable-view小的,但是子容器的移動(dòng)范圍必須包括父容器.

先看官方實(shí)例代碼:

 1 <view class="section">
 2   <view class="section__title">movable-view區(qū)域小于movable-areaview>
 3   <movable-area style="height: 200px;width: 200px;background: red;">
 4     <movable-view style="height: 50px; width: 50px; background: blue;" x="{{x}}" y="{{y}}" direction="all">
 5     movable-view>
 6   movable-area>
 7   <view class="btn-area">
 8     <button size="mini" bindtap="tap">click me to move to (30px, 30px)button>
 9   view>
10   <view class="section__title">movable-view區(qū)域大于movable-areaview>
11   <movable-area style="height: 100px;width: 100px;background: red;" direction="all">
12     <movable-view style="height: 200px; width: 200px; background: blue;">
13     movable-view>
14   movable-area>
15 view>

這里面有個(gè)錯(cuò)誤,應(yīng)該是編寫(xiě)人的一點(diǎn)小失誤吧. 第二個(gè)movable-area的屬性direction應(yīng)該寫(xiě)在movable-view上.

1  "height: 100px;width: 100px;background: red;" >
2     view style="height: 200px; width: 200px; background: blue;" direction="all">
3     view>
4

看下效果:

1) 當(dāng)movable-view區(qū)域小于movable-area時(shí),子容器movable-view只能在父容器內(nèi)移動(dòng). 下圖的效果是設(shè)置了屬性 out-of-bounds=”true”的效果. out-of-bounds可以染子容器到達(dá)父容器邊界時(shí)有個(gè)超出邊界然后回彈的動(dòng)畫(huà). 并不是真正能讓子容器移動(dòng)到父容器以外.

2) 當(dāng)movable-view區(qū)域大于movable-area時(shí),子容器移動(dòng)的范圍必須包括父容器.

第二種情況中,把父容器看做手機(jī)屏幕可視區(qū)域,子容器看做要查看的長(zhǎng)圖,大圖. 就可以實(shí)現(xiàn)拖動(dòng)查看圖片的效果. 如果圖片時(shí)動(dòng)態(tài)加載的,不是固定的圖片,就要兼容圖片寬高小于屏幕可視寬高和圖片寬高大于可視屏幕寬高的可能性,也就是要考慮到以上兩種情況.

我們要在movable組件加載的同時(shí)設(shè)置好movable-view的寬高,因?yàn)閙ovable組件加載成功后再去改變movable-view的大小,可移動(dòng)區(qū)域是不會(huì)變的. 我們可以通過(guò)頁(yè)面中要查看的圖片的onload事件中獲取圖片寬高(目前我只發(fā)現(xiàn)bindload事件能獲取到圖片寬高),然后存儲(chǔ)起來(lái)imgWidth和imgHeight. 當(dāng)用戶點(diǎn)擊圖片時(shí),在bindtap事件中設(shè)置好movable-view的寬高,同時(shí)將movable-area的彈窗wx;if設(shè)置為true.

1   
2           <view class="flex-wrap flex-pic">
3               <view class="picList">            
4

for="{{item.imglist}}" wx:for-item="itemImg" wx:key="*this" id="{{'rfnd_'+index}}" bindload="imageOnload" src="{{ itemImg}}" bindtap="showResizeModal" data-src="{{itemImg}}"> 5 view> 6 view>

因?yàn)橐榭吹氖且粋€(gè)圖片列表, 我用了一個(gè)數(shù)組去存儲(chǔ)每個(gè)圖片的寬高,然后通過(guò)圖片id來(lái)關(guān)聯(lián)

 1   /**
 2    * 加載圖片
 3    */
 4   imageOnload:function(e){
 5     var id = e.currentTarget.id
 6     this.data.imgIdList[id] = {
 7       width:e.detail.width,
 8       height:e.detail.height
 9     }
10     
11   },

模板頁(yè)面

 1 
 3 <template name="resizePic">
 4 
 5   <scroll-view class="backdrop"> 
 6     <view class="close-icon" bindtap="closeResizeModal"> 
 7       取消預(yù)覽
 8     view>
 9     <movable-area style="width:100%;height:100%;"  >
10         <movable-view direction="all" 
11         out-of-bounds="true"  x="{{img.x}}" y="{{img.y}}" >
12         <image  mode="widthFix" class="dtl-img" src="{{img.currentSrc}}">image>
13         movable-view>
14         
15     movable-area> 
16   scroll-view> 
17  template>

 1   /**
 2    * 打開(kāi)彈窗
 3    */
 4   showResizeModal: function (e) {
 5     var src = e.currentTarget.dataset.src;
 6     var x = 0
 7     var y =0
 8     try {
 9       var width = this.imgIdList[e.currentTarget.id].width; //圖片原寬
10       var height = this.imgIdList[e.currentTarget.id].height; //圖片原高
11      
12       //小程序默認(rèn)固定寬320px,獲取top和left值,使圖片居中顯示
13       height = height * (320 / width);
14       width = 320;
15 　　　　
16       x = (app.windowWidth - width) / 2 
17       y = (app.windowHeight - height) / 2
18 
19     } catch (e) { }
20     var img = {
21       x: x,
22       y: y,
26      currentSrc: src,
27     };
28     this.setData({ img: img, isCheckDtl: true });
29     
30   },

部分CSS代碼

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

以上基本上可以完成一個(gè)點(diǎn)擊查看圖片的需求.

然而如果再支持雙指縮放的話,movable-view實(shí)現(xiàn)不了.我暫沒(méi)想出來(lái)怎么實(shí)現(xiàn),如果有人知道,希望能夠指點(diǎn)迷津. 主要原因是因?yàn)檫€是我上文提到的那句話:”movable組件加載成功后再去改變movable-view的大小,可移動(dòng)區(qū)域是不會(huì)變的”.縮放后圖片大小肯定會(huì)改變的. 縮小還好,一旦放大,可移動(dòng)區(qū)域還是原來(lái)的不會(huì)改變.想象一下,如果一張寬度剛剛好時(shí)屏幕可視寬度的圖片,放大后,這張圖片就只能在屏幕可視寬度windowWidth的范圍中移動(dòng),看不到左也看不到右邊超出的部分.

所以如果既要可移動(dòng)圖片又要可縮放,就不能用movable-view組件了,自己寫(xiě)個(gè)吧. 原來(lái)bindtouchmove會(huì)觸發(fā)頁(yè)面的滾動(dòng)條,但是現(xiàn)在微信好像已經(jīng)修復(fù)了這個(gè)BUG,我今天在真機(jī)上測(cè)試沒(méi)有出現(xiàn)這個(gè)問(wèn)題.

自定義控件resizePicModal.wxml:

 1 
 2 <template name="resizePic">
 3   <scroll-view class="backdrop"  catchtouchmove="bindTouchMove" catchtouchend="bindTouchEnd" bindtouchstart="bindTouchStart" > 
 4     <view class="close-icon" bindtap="closeResizeModal"> 
 5       取消預(yù)覽
 6     view>
 7        <image catchtouchmove="bindTouchMove" bindtouchend="bindTouchEnd" bindtouchstart="bindTouchStart"  
 8       style=" transform: scale({{img.baseScale}}); position:absolute; top:{{img.top}}px; left:{{img.left}}px; "
 9       mode="widthFix" class=

易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開(kāi)源碼云倉(cāng)庫(kù):

本文地址：http://m.chqfk.com/wxmini/doc/course/23923.html 復(fù)制鏈接如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢：點(diǎn)擊咨詢

免責(zé)聲明：本站所有文章和圖片均來(lái)自用戶分享和網(wǎng)絡(luò)收集，文章和圖片版權(quán)歸原作者及原出處所有，僅供學(xué)習(xí)與參考，請(qǐng)勿用于商業(yè)用途，如果損害了您的權(quán)利，請(qǐng)聯(lián)系網(wǎng)站客服處理。

熱門問(wèn)題
最新問(wèn)題

小程序模板網(wǎng)

微信小程序movable-view移動(dòng)圖片和雙指縮放

模板頁(yè)面

部分CSS代碼

產(chǎn)品

服務(wù)

幫助

關(guān)于