小さなマイクロチャネルアセンブリ可動ビュープログラムアプリケーション：ドラッグブロックホーム懸濁_

 

 

1.可動ビューアセンブリの詳細は、公式サイトを参照してください：マイクロチャンネル公式文書を

2.デモリファレンス：https://github.com/ChinaFanny/YFWeappMovableView

 

 

業績

 

 

コアコード

<！ - コンポーネント/可動カスタムビュー/可動カスタムview.wxml - > 
< ビュークラス=「移動ビュー」> 
  < 可動域クラス=「カスタムクラス」スタイル= "ポインタのイベント：なし;高さ：{{moveViewHeight}};幅：100％;左：0PX;上部：0PX;」> 
    < 可動ビューWX：もし= "{{ショー}}" 方向= "すべて" X = "{{moveViewX}}" 、Y = "{{moveViewY}}" アニメーション= "{{偽}}" スタイル= "ポインタイベント：自動;幅：40ピクセル、高さ：56px; Zインデックス：999;"
      クラス= "IMG-ビュー" > 
        < 画像SRC = '/画像/ home.png' クラス= "家庭-IMG" > </ イメージ> 
        < ビュークラス= "ホームTXT" >返回首页</ ビュー> 
      </ ビュー> 
    </ 可動図> 
    < スロット> </ スロット> 
  </ 可動エリア> 
</ ビュー>

 

// コンポーネント/ -カスタムview.js可動/カスタムビュー可動
コンポーネント（{
   / * * 
   *コンポーネントの属性リスト
   * / 
  プロパティ：{ 
    表示：{ 
      タイプ：ブール、
      値：falseに
    }、
    moveViewHeight：{ 
      タイプ：文字列
      値： 0 
    }、
    moveViewX：{ 
      タイプ：Number、
      値： 0 
    }、
    moveViewY：{ 
      タイプ：Number、
      値： 0 
    } 
  }、

  externalClasses：[ 'カスタムクラス' ]、
   / * * 
   *初期データ成分
   * / 
  データ：{ 

  } 

  / * * 
   *组件的方法列表
   * / 
  方法：{ 
    onHome：関数（）{ 
      wx.reLaunch（{ 
        URL： '/ページ/インデックス/インデックス' 、
        成功：関数（RES）{} 、
        失敗：機能（RES）{}、
        完全：機能（RES）{} 
      }）
    } 
  } 
}）

 

<！ - ページ/次/ next.wxml - > 
< ビュークラス= "コンテナ" > 
  < ビュークラス= "可動ビュー" > 
    < 可動カスタムビューショー= "{{TRUE}}" moveViewHeight =」 100％」moveViewX = "{{moveViewLeft}}" moveViewY = "{{moveViewTop}}" > 
      < 画像SRC = "{{IMGSRC}}" モード= "widthFix" > </ 画像> 
    </ 可動カスタムビュー> 
  </ ビュー>
</ ビュー>

// ページ/次/ next.js 
ページ（{ 

  / * * 
   最初のページデータ* 
   * / 
  データ：{ 
    sysWidth：wx.getSystemInfoSync（）windowWidth ,. // 画面幅 
    sysHeight：wx.getSystemInfoSync（）windowHeight ,. / / 画面高さ 
    IMGSRC：「HTTPS：//timgsa.baidu.com/timg画像＆品質= 80＆サイズ= b9999_10000＆秒= 1569414294423＆ディ= 1ccf0e0e83d9ecf16453de12b36503da＆imgtype = 0＆SRC =のhttp％3A％2F％2Fb-ssl.duitang.com％2Fuploads％2Fitem％2F201801％？ 2F20180126224524_xrrdq.thumb.700_0.jpg％以下の2F26 ' 
  } 

  / * * 
   *ライフサイクル機能-モニターページのロード
   * / 
  のonLoad：機能（オプション）{
     VARの sysWidth = この.data.sysWidth
     VAR sysHeight = この.data.sysHeight
     この.setData（{
       // 获取屏幕宽度 
      moveViewLeft：sysWidth - 50 、
      moveViewTop：sysHeight - 100 、
    }）。
  } 
}）

 

デモ参考：https://github.com/ChinaFanny/YFWeappMovableView