위 챗 애플 릿 checkbox 구성 요소 사용 설명

본 고 는 위 챗 애플 릿 checkbox 구성 요소 의 사용 방법 을 공유 하 였 으 며,구체 적 인 내용 은 다음 과 같 습 니 다.
효과 도
checkbox组件效果图
WXML

<view class="tui-content">
 <checkbox-group bindchange="checkboxChange">
 <label class="checkbox" wx:for="{{items}}">
  <view class="tui-menu-list"><checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}</view>
 </label>
 </checkbox-group>
 <view class="tui-show-name">
 <text wx:for="{{checkArr}}"> {{item}} </text>
 </view>
</view>
JS

Page({
 data: {
 items: [
  { name: 'USA', value: '  ' },
  { name: 'CHN', value: '  ', checked: 'true' },
  { name: 'BRA', value: '  ' },
  { name: 'JPN', value: '  ' },
  { name: 'ENG', value: '  ' },
  { name: 'TUR', value: '  ' },
 ],
 checkArr: ['  ']
 },
 checkboxChange: function (e) {
 var arr = [];
 e.detail.value.forEach(current => {
  for (var value of this.data.items){
  if(current === value.name){
   arr.push(value.value);
   break;
  } 
  }
 });
 this.setData({checkArr: arr});
 }
})
총결산
  • e.detail.value 와 this.data.items 는 모두 배열 요소 로 속성 대비 검색 을 하기 때문에 이중 순환 을 사용 합 니 다
  • foreach 순환 은 순환 에서 뛰 어 나 올 수 없 기 때문에 this.data.items 를 순환 할 때 for...of..................................................
    DEMO 다운로드 하 다.
    이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
  • 좋은 웹페이지 즐겨찾기