검색페이지와 필터페이지 구현을 위한 UniApp의 설계 및 개발실습

UniApp은 Vue.js를 기반으로 하는 크로스 플랫폼 개발 프레임워크로, 여러 플랫폼에서 동시에 실행되는 애플리케이션을 쉽게 개발하는 데 사용할 수 있습니다. 실제 개발 과정에서 검색 기능과 필터링 기능은 매우 일반적인 요구 사항입니다. 이번 글에서는 UniApp에서 검색 페이지와 필터 페이지를 디자인하고 개발하는 방법을 소개하고 코드 예제를 첨부하겠습니다.

1. 검색 페이지 디자인
검색 페이지는 일반적으로 검색 상자와 검색 결과 목록으로 구성됩니다. 사용자가 검색창에 키워드를 입력하면, 프로그램은 키워드를 기반으로 데이터 소스에서 관련 결과를 필터링하여 검색 결과 목록에 표시합니다.

UniApp에서는 컴포넌트를 사용하여 검색 페이지 디자인을 구현할 수 있습니다. 먼저 페이지의 템플릿 부분에서 검색창과 검색결과 목록의 레이아웃 구조를 선언해야 합니다. 샘플 코드는 다음과 같습니다.

d477f9ce7bf77f53fbcf36bec1b69b7a
661f23f3f62b88de99ee859876b2524e

<input type="text" placeholder="请输入关键字" v-model="keyword" @input="search" />
<view class="result" v-if="searchResult.length">
  <view class="item" v-for="(item, index) in searchResult" :key="index">
    {{ item.title }}
  </view>
</view>

de5f4c1163741e920c998275338d29b2
21c97d3a051048b8e55e3c8f199a54b2

위 샘플 코드에서는 입력을 사용합니다. box(입력) 컴포넌트를 사용하여 검색 상자를 구현하고, v-model 지시어를 사용하여 입력 상자의 값을 키워드(키워드)에 바인딩하면 @input 이벤트가 트리거되어 호출됩니다. 검색할 검색 방법입니다. 검색 결과는 v-if 지시문을 사용하여 표시 여부를 제어합니다. 검색 결과가 비어 있지 않으면 v-for 지시문을 사용하여 보기 구성 요소에 각 결과를 표시합니다.

다음으로 페이지의 스크립트 부분에서는 키워드 및 검색 결과의 데이터를 정의하고 검색을 위한 검색 방법을 구현해야 합니다. 샘플 코드는 다음과 같습니다.

3f1c4e4b6b16bbbd69b2ee476dc4f83a
내보내기 기본값 {

data() {
  return {
    keyword: "",
    searchResult: []
  };
},
methods: {
  search() {
    // 根据关键字从数据源中筛选出相关的结果
    this.searchResult = this.dataSource.filter(item => {
      return item.title.includes(this.keyword);
    });
  }
}

};
2cacc6d41bbb37262a98f745aa00fbf0

위 샘플 코드에서는 data 속성을 사용하여 키워드 및 검색 결과의 데이터를 정의합니다. , 초기에는 값이 각각 빈 문자열과 빈 배열입니다. 검색 메소드에서는 필터 메소드를 사용하여 데이터 소스를 필터링하고 키워드가 포함된 결과를 searchResult에 반환합니다.

2. 필터 페이지 디자인
필터 페이지는 일반적으로 필터 조건과 필터 결과 목록으로 구성됩니다. 필터링 조건을 선택하면 프로그램은 조건에 따라 데이터 소스에서 검증된 결과를 필터링하고 필터링 결과 목록에 표시합니다.

UniApp에서는 구성 요소를 사용하여 필터 페이지를 디자인할 수 있습니다. 먼저 페이지의 템플릿 부분에서 필터 조건과 필터 결과 목록의 레이아웃 구조를 선언해야 합니다. 샘플 코드는 다음과 같습니다.

d477f9ce7bf77f53fbcf36bec1b69b7a
661f23f3f62b88de99ee859876b2524e

<view class="filters">
  <view class="filter" v-for="(filter, index) in filters" :key="index">
    <text>{{ filter.title }}</text>
    <view class="options">
      <view class="option" v-for="(option, optionIndex) in filter.options" :key="optionIndex" @tap="selectFilterOption(filter, option)">
        <text>{{ option }}</text>
      </view>
    </view>
  </view>
</view>
<view class="result" v-if="filterResult.length">
  <view class="item" v-for="(item, index) in filterResult" :key="index">
    {{ item.title }}
  </view>
</view>

de5f4c1163741e920c998275338d29b2
21c97d3a051048b8e55e3c8f199a54b2

위 샘플 코드에서는 두 가지 뷰를 사용했습니다. 구성 요소는 각각 필터 조건과 필터 결과 목록을 나타냅니다. 필터 조건의 경우 루프 명령 v-for를 사용하여 필터 배열을 순회하고 중첩 루프 명령 v-for를 사용하여 각 필터 조건의 옵션을 순회합니다. 결과 목록을 필터링하려면 v-if 지시어를 사용하여 표시 여부를 제어하고 v-for 지시어를 사용하여 각 결과를 뷰 구성 요소에 표시합니다.

다음 단계에서는 페이지의 스크립트 섹션에서 필터 조건, 필터 결과 및 필터 방법을 정의해야 합니다. 샘플 코드는 다음과 같습니다.

3f1c4e4b6b16bbbd69b2ee476dc4f83a
내보내기 기본값 {

data() {
  return {
    filters: [
      {
        title: "类型",
        options: ["选项1", "选项2", "选项3"]
      },
      {
        title: "价格",
        options: ["选项4", "选项5", "选项6"]
      }
    ],
    selectedFilters: [],
    filterResult: []
  };
},
methods: {
  selectFilterOption(filter, option) {
    if (this.selectedFilters.includes(option)) {
      this.selectedFilters.splice(this.selectedFilters.indexOf(option), 1);
    } else {
      this.selectedFilters.push(option);
    }

    this.filterResult = this.dataSource.filter(item => {
      return this.selectedFilters.every(filterOption => {
        return item.options.includes(filterOption);
      });
    });
  }
}

};
2cacc6d41bbb37262a98f745aa00fbf0

위 샘플 코드에서는 데이터 속성을 사용하여 필터 조건, 필터 결과 및 선택한 필터 조건. 초기 값은 필터 조건 집합, 빈 배열 selectedFilters 및 빈 배열 filterResult입니다. selectFilterOption 메소드에서는 필터 조건의 선택 및 선택 취소를 구현하고 선택한 필터 조건에 따라 데이터 소스를 필터링합니다.

3. 요약
본 글에서는 UniApp에서 검색 페이지와 필터 페이지를 디자인하고 개발하는 방법을 소개하고, 해당 코드 예제를 첨부합니다. 컴포넌트를 사용하여 검색 및 필터 기능을 쉽게 구현할 수 있어 사용자가 필요한 것을 빠르게 찾을 수 있습니다. 이 글이 UniApp 개발자들에게 도움이 되기를 바랍니다.

위 내용은 검색페이지와 필터페이지 구현을 위한 UniApp의 설계 및 개발실습의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!