前端Vue自定義頂部搜索框 熱門搜索 歷史搜索 用于搜索跳轉使用， 下載完整代碼請訪問uni-app插件市場地址：https://ext.dcloud.net.cn/plugin?id=13128
效果圖如下：
自定義頂部搜索框 用于搜索跳轉使用方法
<!-- 自定義頂部搜索框 用于搜索跳轉 skipUrl:跳轉url為絕對路徑 /pages開頭 -->
<cc-headSearch skipUrl="/pages/index/search"></cc-headSearch>
HTML代碼實作部分
<template>
<view >
<!-- 自定義頂部搜索框 用于搜索跳轉 skipUrl:跳轉url為絕對路徑 /pages開頭 -->
<cc-headSearch skipUrl="/pages/index/search"></cc-headSearch>
<!-- 1.推薦流貸產品”“推薦固貸產品”“推薦供應鏈產品”“推薦綜合服務” -->
<div >
<!-- 串列組件 -->
<CCBProjectList :productList="projectList" @click="goProDetail"></CCBProjectList>
</div>
</view>
</template>
<script>
import CCBProjectList from '../../components/CCProjectList.vue';
export default {
components: {
CCBProjectList
},
data() {
return {
skipUrl: '',
// 串列陣列
projectList: []
}
},
mounted() {
this.requestData();
},
methods: {
requestData() {
// 模擬請求引數設定
let reqData = https://www.cnblogs.com/ccVue/archive/2023/06/21/{'area': '',
"pageSize": 10,
"pageNo": this.curPageNum
}
// 模擬請求介面
this.totalNum = 39;
this.projectList = [];
for (let i = 0; i < 10; i++) {
this.projectList.push({
'proName': '商品名稱' + i,
'proUnit': '商品詳情' + i,
'area': '商品介紹',
'proType': '優質',
'stage': '七天無理由退貨',
'id': i + ''
});
}
}
}
}
</script>
<style>
page {
background-color: #f7f7f7;
}
.content {
display: flex;
flex-direction: column;
}
.mui-content-padded {
margin: 0px 14px;
/* background-color: #ffffff; */
}
</style>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/555787.html
標籤：其他
下一篇：返回列表