작은 마이크로 채널 어셈블리 이동 뷰 프로그램 응용 프로그램 : 드래그 블록 홈 중단 _

 

 

1. 이동보기 조립 자세한 내용은 공식 웹 사이트를 참조 : 마이크로 채널 공식 문서를

2. 데모 참조 : https://github.com/ChinaFanny/YFWeappMovableView

 

 

영업 실적

 

 

핵심 코드

<! - 부품 / 이동 - 사용자 정의보기 / 이동-맞춤 view.wxml -> 
< 뷰 클래스 = "이동보기를" > 
  < 이동 지역 클래스 = "사용자 지정 수준" 스타일 = "포인터 이벤트 : 없음; 신장 moveViewHeight {{}}; 폭 : 100 %; 좌측 : 0 픽셀, 상단 : 0 픽셀; " > 
    < 가동보기 WX : 만약 = "{{보기}}" 방향 = '전체' X = "{{moveViewX}}" Y = "{{moveViewY}}" 애니메이션 = "{{FALSE}}" 스타일 = "포인터 이벤트 : 자동; 폭 : 40px; 높이 : 56px; Z- 인덱스 : 999;"
      클래스 = "IMG보기" > 
        < 이미지 SRC = '/ 이미지 / home.png' 클래스 = "홈 IMG" > </ 이미지 > 
        < 뷰 클래스 = "홈 TXT" >返回首页</ 뷰 > 
      </ 뷰 > 
    </ 가동보기 > 
    < 슬롯 > </ 슬롯 > 
  </ 가동 영역 > 
</ 뷰 >

 

// 부품 / - 맞춤 view.js 가동 / 사용자 정의 -보기 - 움직일 수있는 
구성 요소 ({
   / * * 
   * 구성 요소 속성 목록 
   * / 
  속성 : { 
    쇼 : { 
      유형 : 부울 
      값 : false로 
    }, 
    moveViewHeight : { 
      유형 : 문자열 
      값 : 0 
    } 
    moveViewX { 
      유형 : 숫자, 
      값 : 0 
    } 
    moveViewY { 
      유형 : 숫자, 
      값 : 0 
    } 
  } 

  externalClasses : '맞춤 클래스' ]
   / * * 
   * 초기 데이터 요소
   * / 
  데이터 { 

  } 

  / * * 
   *组件的方法列表
   * / 
  방법 { 
    onHome : 함수 () { 
      wx.reLaunch ({ 
        URL : '/ 페이지 / 색인 / 인덱스' , 
        성공 : 함수 (해상도) {} , 
        실패 : 함수 (고해상도)을 {} 
        완성 : 함수 (고해상도)을 {} 
      }) 
    } 
  } 
})

 

<! - 페이지 / 다음 / 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 크기 및 초 = 1,569,414,294,423 및 디 = 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