Design and development practice of UniApp to implement search page and filter page

UniApp is a cross-platform development framework based on Vue.js. It can be used to easily develop applications that run on multiple platforms at the same time. In the actual development process, search functions and filtering functions are very common requirements. This article will introduce how to design and develop search pages and filter pages in UniApp, and attach code examples.

1. Design the search page
The search page usually consists of a search box and a search result list. The user enters keywords in the search box, and the program filters out relevant results from the data source based on the keywords and displays them in the search results list.

In UniApp, we can use components to implement the design of the search page. First, in the template part of the page, we need to declare the layout structure of the search box and search result list. The sample code is as follows:

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

In the above sample code, we use an input box (input) component to implement the search box, and use the v-model directive to bind the value of the input box to the keyword (keyword). When the user enters the keyword When the @input event is triggered, the search method is called to search. The search results use the v-if directive to control whether to display them. If the search results are not empty, the v-for directive is used to display each result in a view component.

Next, in the script part of the page, we need to define the keywords and search result data, and implement the search method for searching. The sample code is as follows:

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {

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

};
2cacc6d41bbb37262a98f745aa00fbf0

In the above sample code, We used the data attribute to define the data of keywords and search results. The initial values ​​are empty strings and empty arrays respectively. In the search method, we use the filter method to filter the data source and return the results containing keywords to searchResult.

2. Design the filtering page
The filtering page usually consists of a filtering condition and a list of filtering results. The user selects filtering conditions, and the program filters out qualified results from the data source based on the conditions and displays them in the filtering results list.

In UniApp, we can use components to implement the design of filter pages. First, in the template part of the page, we need to declare the filter conditions and the layout structure of the filter result list. The sample code is as follows:

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

In the above sample code, we use two view components to represent filter conditions and filter result list respectively. For the filter conditions, we use a loop instruction v-for to traverse the filters array, and use a nested loop instruction v-for to traverse the options of each filter condition. For filtering the result list, use the v-if directive to control whether to display it, and use the v-for directive to display each result in a view component.

Next step, in the script part of the page, we need to define filter conditions, filter results and filter methods. The sample code is as follows:

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {

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

In the above sample code, We use the data attribute to define filter conditions, filter results, and selected filter conditions. The initial values ​​are a set of filters filter conditions, an empty array selectedFilters and an empty array filterResult. In the selectFilterOption method, we implement the selection and deselection of filter conditions, and filter the data source according to the selected filter conditions.

3. Summary
This article introduces the method of designing and developing search pages and filter pages in UniApp, and attaches corresponding code examples. Through the use of components, we can easily implement search and filter functions, allowing users to quickly find what they need. I hope this article can be helpful to UniApp developers.

The above is the detailed content of Design and development practice of UniApp to implement search page and filter page. For more information, please follow other related articles on the PHP Chinese website!