애플 릿 원생 왼쪽 서랍 메뉴 구현

11663 단어 애플 릿왼쪽 미끄럼서랍.메뉴
이동 단 에 서 는 사 이 드 메뉴 가 자주 사용 되 는 구성 요소 입 니 다.(일반적으로 Drawer,서랍 이 라 고 합 니 다.)현재 휴대 전화 화면 이 너무 커서 구석 에 있 는 메뉴 버튼 을 누 르 는 것 이 화면 중간 에 미 끄 러 지 는 것 보다 훨씬 편리 하 다.
다른 플랫폼 에 비해 애플 릿 의 구성 요소 라 이브 러 리 지원 이 완선 되 지 않 고 각 프레임 워 크 도 성숙 하지 않 습 니 다.프레임 워 크 를 사용 하 는 과정 에서 각종 신비 한 bug 에 의 해 대머리 가 되 었 기 때문에 원생 환경 으로 되 돌아 갔다.
최근 네 이 티 브 프레임 에서 미끄럼 서랍 메뉴 효 과 를 어떻게 실현 하 는 지 연구 한 결과 귀 찮 을 줄 알 았 는데 몇 십 줄 의 코드 만 필요 하고 유연성 있 는 효 과 를 비교 할 수 있 는 것 으로 나 타 났 다.지금 인터넷 에 관련 자료 가 적은 것 같 아서 여기 서 공유 해 보 겠 습 니 다.글 에 붙 어 있 는 코드 블록 을 제외 하고 링크 를 클릭 하여 애플 릿 개발 도구 에서 효 과 를 미리 보고 코드 세 션 을 볼 수 있 습 니 다.여기 서 세 가지 흔 한 효 과 를 실 현 했 습 니 다.먼저 동 도 를 보고 코드 실현 에 대해 설명 하 겠 습 니 다.
A 메뉴 가 위 에 있어 요. 

A2 메뉴 는 상층,하층부 에 가 려 져 있 습 니 다. 

B 메뉴 는 아래쪽 에 있 습 니 다.

WXS 응답 이벤트
제스처 제어 메뉴 의 원 리 는 매우 간단 하 다.애플 릿 은 터치 시작,이동,끝touchstart, touchmove, touchend등 일련의 터치 제스처 가 촉발 하 는 사건 을 제공 했다.이 이벤트 에 사용자 정의 이벤트 응답 함 수 를 연결 하면 제스처 에 따라 메뉴 를 닫 는 동작 을 수행 할 수 있 습 니 다.
성능 을 고려 하여 이벤트 처리 함 수 는 JS 파일 이 아 닌 WXS 에 두 는 것 이 좋 습 니 다.구체 적 인 원 리 는 애플 릿 의 운영 환경 과 관련 이 있 으 며 관심 이 있 으 면 글 끝 에 가서 볼 수 있다.WXS 는 작은 프로그램의 전용 스 크 립 트 언어(WXS 와 JS 의 관 계 는 WXSS 와 CSS 의 관계 에 해당 함)로 문법 과 JS 가 유사 하고 일부 차이 가 있 습 니 다.예 를 들 어:
  • JS 와 격 리 되 어 있 으 며,다른 자 바스 크 립 트 파일 에서 정 의 된 함 수 를 호출 할 수도 없고,애플 릿 에서 제공 하 는 API
    • 를 호출 할 수도 없습니다.
  • 애플 릿 에 내 장 된 구성 요소 의 이벤트 에 만 응답 할 수 있 고 사용자 정의 구성 요소 의 이벤트 리 셋 은 지원 되 지 않 습 니 다
  • 변수 와 함 수 는 기본적으로 모듈 사유 이 고 module.exports 을 통 해 대외 노출
  • 라벨 을 사용 하여 WXML 에 사용(상대 경 로 를 사용 해 야 함)
    • wxs 파일 과 wxml 파일 의 기본 작성 방법 은 다음 과 같 습 니 다.
    
// index.wxs

function touchStart(e, ins) {}
function touchMove(e, ins) {}
function touchEnd(e, ins) {}

module.exports = {
  touchstart: touchStart,
  touchmove: touchMove,
  touchend: touchEnd
}
<wxs module="drawer" src="./index.wxs"></wxs>

<view bindtouchstart="{{drawer.touchstart}}"
      bindtouchmove="{{drawer.touchmove}}" 
      bindtouchend="{{drawer.touchend}}">
</view>
    프로젝트 A
    페이지 구조 와 스타일

    이것 은 가장 흔히 볼 수 있 는 서랍 메뉴 스타일 중 하나 로 미끄럼 주체 의 내용 이 움 직 이지 않 고 메뉴 가 위 에 표 시 됩 니 다.먼저 기본 적 인 HTML 구조 와 CSS 스타일 을 작성 합 니 다.
    
<wxs module="drawer" src="./index.wxs"></wxs>

<view>
  <view class="main" bindtouchstart="{{drawer.touchstart}}"
    bindtouchmove="{{drawer.touchmove}}" bindtouchend="{{drawer.touchend}}">
    <view>
                 A
    </view>
  </view>

  <view class="drawer" data-drawerwidth="150">
    <view class="drawer-item">drawerA</view>
    <view wx:for="{{[1, 2, 3]}}" class="drawer-item">
      <text>menu item {{item}}</text>
    </view>
  </view>
</view>
    WXML 의 몇 가지 중점:
  • wxs 모듈 을 정확하게 도입(상대 경로 로 해 야 함)
  • 미끄럼 제스처 를 할 때 메뉴 가 숨겨 져 있 기 때문에 실제 메 인 인터페이스 에서 미끄럼 을 하기 때문에 세 개의 미끄럼 이벤트 리 셋 은 주체 내용 의 view 에 연결 되 어야 합 니 다
  • 이동 하 는 것 은.drawer 요소 입 니 다.class 속성 을 설정 하여 쉽게 얻 을 수 있 습 니 다
  • 서랍 요소 의 data-drawerwidth 속성 은 dataset 를 통 해 wxs 스 크 립 트 에 값 을 전달 하고 메뉴 의 폭 을 규정 하 며 스타일 과 일치 해 야 합 니 다
    • WXSS 는 할 말 이 없습니다.주석 에 적 혀 있 습 니 다.
    
.main {
  height: 100vh;
  width: 100%;
  position: absolute;
}

.drawer {
  height: 100vh;
  width: 150px;
  position: absolute;
  transition: transform 0.4s ease; /*     transform  ，          */
  left: -150px;  /* width、   WXML        ，         */
}
    WXS 이벤트 리 셋 함수
    wxs 함 수 는 두 개의 입 참 이 있다.
  • event 는 애플 릿 이벤트 대상 이 고 이 를 바탕 으로 사건 을 촉발 하 는 구성 요소 의 인 스 턴 스event.instance
    • 가 많 습 니 다.
  • ownerInstance 이 벤트 를 촉발 하 는 구성 요소 의 부모 구성 요소(페이지)의 실례
    • wxs 에서 구성 요소 인 스 턴 스 는 봉 인 된ComponentDescriptor대상 으로 구성 요소 의 dataset,style,class 등 을 조작 할 수 있 으 며 인 터 랙 션 애니메이션 에 거의 사용 할 수 있 습 니 다.더 많은 용법 은 문 서 를 참고 할 수 있다.
    
var wxsFunction = function(event, ownerInstance) {
    var instance = ownerInstance.selectComponent('.classSelector') //        
    instance.setStyle({
        "font-size": "14px" //   rpx
    })
    instance.getDataset()
    instance.setClass(className)

    return false //      ，           stopPropagation preventDefault
}
    WXS 스 크 립 트
    조건 판단 을 위주 로 하고,논 리 는 별 다른 것 이 없 으 며,상황 과 결합 하여 이해 하기 어렵 지 않다.
  • let,const 성명 변 수 를 사용 하지 마 세 요.잘못 보고 할 수 있 습 니 다
  • transform 속성 X 의 위 치 를 설정 한 코드 를 간단하게 포장 하면 더욱 아름 다 워 보인다
  • judge point 는 흡착 효과 와 유사 합 니 다.바로 메뉴 가 특정한 위 치 를 초과 하면 자동 으로 나머지 부분 을 여 는 것 입 니 다
    • 
var startmark = 0;
var status = 0;  //       
var JUDGEPOINT = 0.7;

function touchStart(e, ins) {
  var pageX = (e.touches[0] || e.changedTouches[0]).pageX;
  startmark = pageX;
}

function touchMove(e, ins) {
  var pageX = (e.touches[0] || e.changedTouches[0]).pageX;
  var offset = pageX - startmark;
  var drawerComp = ins.selectComponent('.drawer');
  var drawerWidth = drawerComp.getDataset().drawerwidth;

  if (offset > 0 && status == 0) {
    setCompTransX(drawerComp, Math.min(drawerWidth, offset))
  } else if (offset < 0 && status == 1) {
    setCompTransX(drawerComp, Math.max(0, offset))
  }
}

function touchEnd(e, ins) {
  var pageX = (e.touches[0] || e.changedTouches[0]).pageX;
  var offset = pageX - startmark;
  var drawerComp = ins.selectComponent('.drawer');
  var drawerWidth = drawerComp.getDataset().drawerwidth;

  if (offset > 0 && status == 0) {
    if (offset < drawerWidth * JUDGEPOINT) {
      setCompTransX(drawerComp, 0);
    } else {
      setCompTransX(drawerComp, drawerWidth);
      status = 1;
    }
  } else if (offset < 0) {
    setCompTransX(drawerComp, 0);
    status = 0;
  }
}

function setCompTransX(comp, x) {
  comp.setStyle({
    transform: 'translateX(' + x + 'px)',
  })
}

module.exports = {
  touchstart: touchStart,
  touchmove: touchMove,
  touchend: touchEnd
}
    커버 층
    애플 릿 개발 도구 에서 전체 코드 를 보 려 면 첫 번 째 또는 마지막 링크 를 누 르 십시오.
    마스크 층 은 메뉴 와 메 인 용기 사이 에 view 를 추가 하면 됩 니 다.
    
<view class="main"></view>
<view class="mask" data-maxopacity="0.6"></view>
<view class="drawer" data-drawerwidth="150"></view>
    스타일 에서 중요 한 것 은 이 pointer-events 속성 입 니 다.none 으로 설정 한 후 동작 을 누 르 면 이 view 를 뚫 고 하층부 에 도달 합 니 다.커버 층 은 서랍 이 화면 밖 에 있 는 것 같 지 않 기 때문에 투명 도 는 0 이지 만 실제로는.main 위 에 덮 여 있 습 니 다.이 속성 을 추가 하지 않 으 면.main 에 대한 모든 클릭 동작 이.mask 위 에 눌 러 집 니 다.미끄럼 이 든 다른 버튼 이 든 무효 입 니 다.
    
.mask {
  height: 100vh;
  width: 100%;
  position: fixed;
  transition: opacity 0.4s ease;
  opacity: 0;
  pointer-events: none;
  background-color: #548CA8;
}
    wxs 스 크 립 트 도 기본적으로 일치 합 니 다.비슷 한 방법 으로.mask 의 인 스 턴 스 와 dataset 의 투명도 파 라 메 터 를 얻 고 변위 속성 을 설정 하 는 동시에 마스크 층 의 투명도 속성 을 설정 하면 됩 니 다.
    
function setDrawer(x) {
  setCompTransX(drawerComp, x);
  maskComp.setStyle({
    opacity: x / drawerWidth * maskOpacity,
  })
}
    프로젝트 B
    애플 릿 개발 도구 에서 전체 코드 를 보 려 면 첫 번 째 또는 마지막 링크 를 누 르 십시오.
    방안 B 와 방안 A 의 차 이 는 주로 미 끄 러 질 때 메 인 화면 이 오른쪽으로 이동 하여 하층 을 드 러 내 는 메뉴 이 고 나머지 각 부분 은 다 르 지 않다 는 것 이다.여기 에는 주요 차이 점 만 붙 여 져 있다.
    .main 요 소 를 이동 하기 때문에 너비 설정 데 이 터 를 이 요소 의 탭 에 넣 으 면 구성 요소 인 스 턴 스 를 덜 가 져 올 수 있 습 니 다.
    
<view class="drawer"></view>

<view class="main" 
      data-drawerwidth="150" 
      bindtouchstart="{{drawer.touchstart}}"
      bindtouchmove="{{drawer.touchmove}}" 
      bindtouchend="{{drawer.touchend}}">
</view>
    transition 애니메이션 속성 도.main 에 놓 여 있 습 니 다.drawer 의 오프셋 은 필요 없습니다.
    
.main {
  height: 100vh;
  width: 100%;
  position: absolute;
  transition: transform 0.4s ease;
}

.drawer {
  height: 100vh;
  width: 150px;
  position: absolute;
}
    wxs 스 크 립 트 에 서 는 가 져 온 구성 요 소 를 제외 하고 변위 설정 도 바 꿀 필요 가 없습니다.
    
function touchMove(e, ins) {
  var pageX = (e.touches[0] || e.changedTouches[0]).pageX;
  var offset = pageX - startmark;
  var mainComp = ins.selectComponent('.main');
  var drawerWidth = mainComp.getDataset().drawerwidth;

  if (offset > 0 && status == 0) {
    setCompTransX(mainComp, Math.min(drawerWidth, offset))
  } else if (offset < 0 && status == 1) {
    setCompTransX(mainComp, Math.max(0, offset))
  }
}
    WXS 를 왜 써 요?
    작은 프로그램 은 많은 곳 에서 웹 개발 과 비슷 하지만 밑바닥 에는 약간의 차이 가 있다.웹 페이지 에서 렌 더 링 과 스 크 립 트 가 같은 스 레 드 에서 실 행 됩 니 다(따라서 스 크 립 트 를 실행 하면 페이지 전체 가 카드 로 죽 을 수 있 습 니 다).애플 릿 은 서로 다른 스 레 드 에서 논리 층(JS 스 크 립 트)과 렌 더 링 층(WXML 과 WXSS)을 각각 실행 하고 스 레 드 간 에는 클 라 이언 트(Native)를 통 해 통신 합 니 다.

    따라서 JS 스 크 립 트 응답 이 벤트 를 사용 하면 터치 모 브 를 터치 할 때마다 두 번 의 프로 세 스 간 통신(아래 그림 왼쪽 참조)이 발생 하고 통신 비용 이 많이 든다.이 동시에"setData 렌 더 링 도 다른 스 크 립 트 의 실행 을 막 을 수 있 습 니 다."(문서 가 이렇게 말 했 습 니 다.저도 왜 그런 지 모 르 겠 습 니 다.)한 번 의 제스처 가 엄 청 난 touchmove 사건 을 일 으 키 기 때문에 상기 원인 은 애니메이션 의 중단 을 초래 할 수 있 습 니 다.
    한편,WXS 함 수 는 보기 층 에서 실행 되 며 상기 문제 가 존재 하지 않 습 니 다(아래 그림 오른쪽 참조).

    결어&참고 자료
    이상 은 네 이 티 브 애플 릿 의 몇 가지 서랍 메뉴 구현 방법 입 니 다.도움 이 되 기 를 바 랍 니 다.글 에 존재 하 는 누락 에 대해 토론 의 시정 을 환영 합 니 다.
    클릭링크을 누 르 면 애플 릿 개발 도구 에서 전체 코드 를 볼 수 있 습 니 다.이 공유 코드 세 션 은 약간 현학 적 이 며,직접 열기 에 실패 하면 로그 인 후'프로젝트-코드 세 션 가 져 오기'에 링크 나 마지막 ID 를 직접 입력 해 볼 수 있 습 니 다.
    참고 자료:
    애플 릿 프레임 워 크/보기 층/이벤트 시스템/WXS 응답 이벤트
    공식 데모
    애플 릿 숙주 환경
    여기 서 애플 릿 의 원생 이 왼쪽 서랍 메뉴 를 실현 하 는 것 에 관 한 글 은 여기까지 소개 되 었 습 니 다.더 많은 애플 릿 왼쪽 서랍 메뉴 내용 은 예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!
    Vue 구성 요소 가 그림 과 동 영상 을 업로드 하 는 예제 코드 를 패키지 합 니 다.
    react+ts 간단 한 jira 프로젝트 의 최 적 실천 기록 실현

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage