위 챗 애플 릿 사용자 정의 select 드 롭 다운 옵션 상자 구성 요소 의 구현 코드

지식 포인트:구성 요소,animation,현재 클릭 요소 의 색인 과 내용 가 져 오기
위 챗 애플 릿 에는 select 드 롭 다운 옵션 상자 가 없 기 때문에 사용자 정의 만 있 습 니 다.사용자 정의 라면 템 플 릿 방식 을 선택 할 수도 있 고 구성 요소 방식 을 선택 하여 만 들 수도 있 습 니 다.
이번에 나 는 구성 요 소 를 선택 했다.이렇게 하면 구성 요 소 를 도입 하고 데 이 터 를 추가 하기 만 하면 다른 것 은 상관 하지 않 아 도 여러 곳 에서 중복 사용 할 수 있다.
첫 번 째 단계:구성 요소 생 성에 필요 한 파일
나 는 공용 내용 을 모두 pages 파일 과 같은 등급 에 두 는 것 을 좋아 하기 때문에 아래 의 디 렉 터 리 구조 가 생 겼 다.

(1)내 위 에 있 는 Componet 과 같은 사용자 정의 이름 의 폴 더 를 만 듭 니 다.
(2)select 폴 더 를 만 든 다음:이 폴 더 를 오른쪽 클릭 하고 아래 의 이 Component 를 새로 만 듭 니 다.그리고 만들어 야 할 이름 을 입력 하 십시오.저 는 편 의 를 위해 select 의 이름 을 지 었 습 니 다.그리고 4 개의 파일,js,json,wxml,wxss 를 자동 으로 만 듭 니 다.

두 번 째 단계:구성 요소 설정 시작
메모:첫 번 째 단 계 를 통 해 만 들 었 다 면 두 번 째 단 계 를 건 너 뛸 수 있 습 니 다.
(1)첫 번 째 단 계 를 통 해 만 든 구성 요소 의 폴 더 에 자동 으로 설정 되 어 있 습 니 다.구성 요 소 를 도입 할 때 구성 요 소 를 도입 하 는 페이지 의 json 파일 에 구성 요소 의 이름과 구성 요소 의 위 치 를 설정 합 니 다.
(2)구성 요소 의 js,json,wxml,wxss 파일 을 수 동 으로 만 들 려 면 json 파일 에'component'를 입력 해 야 합 니 다.true 는 사용자 정의 구성 요소 설명 을 표시 합 니 다.js 파일 에 도 이러한 형식 으로 써 야 합 니 다.

Component({
 properties: {
  //      innerText  ，             
  innerText: {
   type: String,
   value: 'default value',
  }
 },
 data: {
  //            
  someData: {}
 },
 methods: {
  //           
  customMethod: function(){}
 }
})

세 번 째 단계:사용자 정의 구성 요소 스타일 및 js.
메모:app.json 의 pages 에서 구성 요소 가 있 는 페이지 를 첫 번 째 로 놓 을 수 있 습 니 다.그러면 구성 요소 의 페이지 에서 코드 를 작성 할 수 있 습 니 다.예 를 들 어 제 위의 디 렉 터 리 구조:"Componet/select/select"라 고 써 야 합 니 다.그 다음 에 다른 페이지 가 있어 야 합 니 다.이렇게 하면 훨씬 편리 하 다.
1.구성 요소 의 wxml

<view class='com-selectBox'>
  <view class='com-sContent' bindtap='selectToggle'>
    <view class='com-sTxt'>{{nowText}}</view>
    <image src='../../public/img/local/down.png' class='com-sImg' animation="{{animationData}}"></image>
  </view>
  <view class='com-sList' wx:if="{{selectShow}}">
    <view wx:for="{{propArray}}" data-index="{{index}}" wx:key='' class='com-sItem' bindtap='setText'>{{item.text}}</view>
  </view>
</view>

（1）  animation="{animation Data}"이것 은 아래 화살표 의 애니메이션 효과 입 니 다.
（2）  data-index="{index}}"이것 은 현재 요소 가 클릭 되 었 을 때의 색인 입 니 다.
(3)selectToggle 은 드 롭 다운 옵션 상자 의 숨 김 과 표 시 를 모방 한 이벤트 입 니 다.
(4)setText 는 드 롭 다운 옵션 상자 에서 하위 항목 을 선택 한 후 내용 을 설정 하 는 이벤트 입 니 다.
(5)selectShow 는 option 옵션 의 표시 여 부 를 표시 합 니 다.
2.구성 요소 의 wxss

.com-selectBox{
  width: 200px;
}
.com-sContent{
  border: 1px solid #e2e2e2;
  background: white;
  font-size: 16px;
  position: relative;
  height: 30px;
  line-height: 30px;
}
.com-sImg{
  position: absolute;
  right: 10px;
  top: 11px;
  width: 16px;
  height: 9px;
  transition: all .3s ease;
}
.com-sTxt{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding:0 20px 0 6px;
  font-size: 14px;
}
.com-sList{
  background: white;
  width: inherit;
  position: absolute;
  border: 1px solid #e2e2e2;
  border-top: none;
  box-sizing: border-box;
  z-index: 3;
  max-height: 120px;
  overflow: auto;
}
.com-sItem{
  height: 30px;
  line-height: 30px;
  border-top: 1px solid #e2e2e2;
  padding: 0 6px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.com-sItem:first-child{
  border-top: none;
}

 3.구성 요소 의 js

// Componet/Componet.js
Component({
 /**
  *        
  */
  properties: {
    propArray:{
      type:Array,
    }
  },
 /**
  *        
  */
  data: {
    selectShow:false,//  option   
    nowText:"   ",//    
    animationData:{}//       
  },
 /**
  *        
  */
  methods: {
　　　//option     
    selectToggle:function(){
      var nowShow=this.data.selectShow;//    option     
      //    
      var animation = wx.createAnimation({
        timingFunction:"ease"
      })
      this.animation=animation;
      if(nowShow){
        animation.rotate(0).step();
        this.setData({
          animationData: animation.export()
        })
      }else{
        animation.rotate(180).step();        
        this.setData({
          animationData: animation.export()
        })
      }
      this.setData({
        selectShow: !nowShow
      })
    },
    //    
    setText:function(e){
      var nowData = this.properties.propArray;//  option               ，            this.properties
      var nowIdx = e.target.dataset.index;//       
      var nowText = nowData[nowIdx].text;//       
      //      ，      ，  ，   this.animation     
      this.animation.rotate(0).step();
      this.setData({
        selectShow: false,
        nowText:nowText,
        animationData: this.animation.export()
      })
    }
  }
})

(1)구성 요소 의 properties 속성 은 대외 속성 입 니 다.제 가 이해 하 는 것 은 data 데이터 로 사용 할 수 있 습 니 다.이것 은 세 가지 속성 을 가 진 대상 입 니 다.각각 type 은 속성 유형 을 나타 내 고 value 는 속성 초기 값 을 나타 내 며 observer 는 속성 값 이 변경 되 었 을 때의 응답 함수 입 니 다.type 은 필수 이 고 다른 것 은 선택 할 수 있 습 니 다.type 만 있 으 면 속성 명:type 형식 으로 쓸 수 있 습 니 다.
(2)구성 요소 의 data 는 일반 페이지 의 data 와 마찬가지 로 구성 요소 의 내부 데이터 로 properties 와 함께 구성 요소 의 모드 렌 더 링 에 사 용 됩 니 다.
(3)구성 요소 의 method 는 이벤트 응답 함수 와 임의의 사용자 정의 방법 에 사 용 됩 니 다.이 안에서 데 이 터 를 얻 는 방법 은 두 가지 가 있 습 니 다.하 나 는 data 의 데 이 터 를 얻 는 것 입 니 다:this.data.속성 명;하 나 는 properties 의 속성 값 을 가 져 오 는 것 입 니 다:this.properties.속성 명
(4)animation 애니메이션 을 만 듭 니 다.true 와 false 를 통 해 상 태 를 표시 하 는 내용 에 과도 가 없고 과도 가 없 으 며 과도 가 없습니다.
네 번 째 단계:구성 요 소 를 도입 하여 구성 요소 에 필요 한 데 이 터 를 전송 합 니 다.
1.도입 하기 전에 구성 요 소 를 도입 하 는 페이지 의 json 파일 에 설정 해 야 합 니 다.예 를 들 어 index.wxml 에 도입 하려 면 index.json 에서 설정 해 야 합 니 다.

"usingComponents": {
  "Select": "/Componet/select/select"
}

(1)Select 는 당신 이 정의 한 구성 요소 의 이름 이 고,뒤쪽 은 구성 요소 가 있 는 위치 입 니 다./  단일 슬 래 쉬 는 루트 디 렉 터 리 를 표시 하 며 절대 경로 입 니 다.
(2)다음 과 같은 말 이 나 오 면 경 로 를 찾 지 못 한 것 은 반드시 자신 이 작성 한 경로 가 틀 렸 을 것 이 고 열심히 찾 아야 한다.

2.설정 이 완료 되면 구성 요 소 를 도입 할 수 있 습 니 다.

<Select prop-array='{{selectArray}}'></Select>

(1)prop-array 는 제 가 정의 한 속성 명 입 니 다.이것 은 구성 요소 가 있 는 js 의 properties 속성 과 대응 합 니 다.properties 가 정의 하 는 속성 에서 속성 명 은 낙타 봉 쓰기(예 를 들 어 proparay)를 사용 합 니 다.구성 요 소 를 도입 하 는 wxml 에서 속성 값 을 지정 할 때 하이픈 쓰기(예:prop-array="...")를 사용 해 야 합 니 다.
3.마지막 으로 데이터 가 들 어 옵 니 다.구성 요 소 를 도입 한 js 의 data 에 추가:

selectArray: [{
  "id": "10",
  "text": "   "
}, {
  "id": "21",
  "text": "   "
}]

 최종 결과:

 같은 구성 요 소 를 두 개 도입 하면 들 어 오 는 데이터 도 같 습 니 다.

<Select prop-array='{{selectArray}}'></Select>
<Select prop-array='{{selectArray}}'></Select>

총결산
위 에서 말 한 것 은 소 편 이 소개 한 위 챗 애플 릿 사용자 정의 select 드 롭 다운 옵션 상자 구성 요소 의 실현 코드 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!