前端Vue自定義頂部導航欄navBar 導航欄搜索框searchBar 導航欄右側選單按鈕button，下載完整代碼請訪問uni-app插件市場地址：https://ext.dcloud.net.cn/plugin?id=13342
效果圖如下:
cc-headerSearch
使用方法
<!-- icon: 右側選單圖示 @searchClick：搜索點擊 @rigIconClick：右側選單點擊 -->
<cc-headerSearch icon="../../static/scan.png" @searchClick="searchClick"
@rigIconClick="rigIconClick"></cc-headerSearch>
HTML代碼實作部分
<template>
<view >
<!-- icon: 右側選單圖示 @searchClick：搜索點擊 @rigIconClick：右側選單點擊 -->
<cc-headerSearch icon="../../static/scan.png" @searchClick="searchClick"
@rigIconClick="rigIconClick"></cc-headerSearch>
<!-- proList: 條目陣列資料 goProDetail:條目點擊事件跳轉（實作了點擊條目資料傳值）-->
<cc-waterListView :proList="projectList" @click="goProDetail"></cc-waterListView>
</view>
</template>
<script>
export default {
data() {
return {
// 串列陣列
projectList: []
}
},
onLoad() {
this.requestData();
},
methods: {
// 串列條目點擊事件
goProDetail(item) {
console.log("條目資料 = " + JSON.stringify(item));
uni.showModal({
title: '選擇條目',
content: '選擇條目資料 = ' + JSON.stringify(item)
})
},
requestData() {
// 模擬請求引數設定
let reqData = https://www.cnblogs.com/ccVue/archive/2023/07/06/{'area': '',
"pageSize": 10,
"pageNo": this.curPageNum
}
// 模擬請求介面
this.totalNum = 39;
this.projectList = [];
let imgArr = [
'https://images.pexels.com/photos/4967533/pexels-photo-4967533.jpeg?auto=compress&cs=tinysrgb&w=800',
'https://cdn.pixabay.com/photo/2014/07/08/14/14/resolution-387446_1280.jpg',
'https://images.pexels.com/photos/5202162/pexels-photo-5202162.jpeg?auto=compress&cs=tinysrgb&w=800',
'https://images.pexels.com/photos/4967533/pexels-photo-4967533.jpeg?auto=compress&cs=tinysrgb&w=800',
'https://images.pexels.com/photos/8679339/pexels-photo-8679339.jpeg?auto=compress&cs=tinysrgb&w=800',
'https://images.pexels.com/photos/209339/pexels-photo-209339.jpeg?auto=compress&cs=tinysrgb&w=800'
]
let nameArr = ['冰糖心蘋果 紅富士大果出售 應季水果 繁榮種植園', '農鮮洛川紅富士蘋果16枚，單果160g,新鮮飽滿水分充足', '甜醉了 煙臺蘋果棲霞紅富士新鮮水...',
'惠尋 山東煙臺紅富士蘋果12枚 果徑...'
]
for (let i = 0; i < 20; i++) {
this.projectList.push({
'proImg': imgArr[i % 6],
'proName': nameArr[i % 4],
'proDetail': '我是產品詳情' + i,
'proPrice': 60 + 6 * i + '元',
'status': (i % 3 == 0) ? '618' : '',
'id': i + ''
});
}
},
searchClick: function() {
console.log("點擊了搜索框");
uni.showModal({
title: '溫馨提示',
content: '點擊搜索輸入框'
})
},
rigIconClick() {
console.log("點擊了右側圖示");
uni.showModal({
title: '溫馨提示',
content: '點擊了右側掃一掃'
})
}
}
}
</script>
<style>
page {
background-color: #f2f2f2;
}
.content {
display: flex;
flex-direction: column;
}
</style>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/556680.html
標籤：其他
上一篇：1.1 熟悉x64dbg除錯器
下一篇：返回列表