search
HomeWeb Front-enduni-appDesign and development practice of UniApp to implement search page and filter page
Design and development practice of UniApp to implement search page and filter pageJul 06, 2023 pm 06:17 PM
uniapp (characters)Search page (characters)Filter page (characters)

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:

<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>


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:

<script><br> export default {</script>

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

};

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:

<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>


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:

<script><br> export default {</script>

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);
      });
    });
  }
}

};

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!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
How do I handle local storage in uni-app?How do I handle local storage in uni-app?Mar 11, 2025 pm 07:12 PM

This article details uni-app's local storage APIs (uni.setStorageSync(), uni.getStorageSync(), and their async counterparts), emphasizing best practices like using descriptive keys, limiting data size, and handling JSON parsing. It stresses that lo

How do I manage state in uni-app using Vuex or Pinia?How do I manage state in uni-app using Vuex or Pinia?Mar 11, 2025 pm 07:08 PM

This article compares Vuex and Pinia for state management in uni-app. It details their features, implementation, and best practices, highlighting Pinia's simplicity versus Vuex's structure. The choice depends on project complexity, with Pinia suita

How do I make API requests and handle data in uni-app?How do I make API requests and handle data in uni-app?Mar 11, 2025 pm 07:09 PM

This article details making and securing API requests within uni-app using uni.request or Axios. It covers handling JSON responses, best security practices (HTTPS, authentication, input validation), troubleshooting failures (network issues, CORS, s

How do I use uni-app's geolocation APIs?How do I use uni-app's geolocation APIs?Mar 11, 2025 pm 07:14 PM

This article details uni-app's geolocation APIs, focusing on uni.getLocation(). It addresses common pitfalls like incorrect coordinate systems (gcj02 vs. wgs84) and permission issues. Improving location accuracy via averaging readings and handling

How do I use uni-app's social sharing APIs?How do I use uni-app's social sharing APIs?Mar 13, 2025 pm 06:30 PM

The article details how to integrate social sharing into uni-app projects using uni.share API, covering setup, configuration, and testing across platforms like WeChat and Weibo.

How do I use uni-app's easycom feature for automatic component registration?How do I use uni-app's easycom feature for automatic component registration?Mar 11, 2025 pm 07:11 PM

This article explains uni-app's easycom feature, automating component registration. It details configuration, including autoscan and custom component mapping, highlighting benefits like reduced boilerplate, improved speed, and enhanced readability.

How do I use preprocessors (Sass, Less) with uni-app?How do I use preprocessors (Sass, Less) with uni-app?Mar 18, 2025 pm 12:20 PM

Article discusses using Sass and Less preprocessors in uni-app, detailing setup, benefits, and dual usage. Main focus is on configuration and advantages.[159 characters]

How do I use uni-app's uni.request API for making HTTP requests?How do I use uni-app's uni.request API for making HTTP requests?Mar 11, 2025 pm 07:13 PM

This article details uni.request API in uni-app for making HTTP requests. It covers basic usage, advanced options (methods, headers, data types), robust error handling techniques (fail callbacks, status code checks), and integration with authenticat

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.