Stencil 組件使用 `JSX` 渲染，這是一種流行的聲明式模板語法。每個組件都有一個渲染函數，它返回在運行時渲染到 DOM 的組件樹。 ## 基礎用法 `render` 函數用於輸出將繪製到屏幕上的組件樹。 ```ts class MyComponent { render() { return ...
前端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 class="content">
<!-- 自定義頂部搜索框 用於搜索跳轉 skipUrl:跳轉url為絕對路徑 /pages開頭 -->
<cc-headSearch skipUrl="/pages/index/search"></cc-headSearch>
<!-- 1.推薦流貸產品”“推薦固貸產品”“推薦供應鏈產品”“推薦綜合服務” -->
<div class="mui-content-padded">
<!-- 列表組件 -->
<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 = {
'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>
