隨著技術的發展，開發的復雜度也越來越高，傳統開發方式將一個系統做成了整塊應用，經常出現的情況就是一個小小的改動或者一個小功能的增加可能會引起整體邏輯的修改，造成牽一發而動全身，通過組件化開發，可以有效實作單獨開發，單獨維護，而且他們之間可以隨意的進行組合，大大提升開發效率低，降低維護成本， 組件化對于任何一個業務場景復雜的前端應用以及經過多次迭代之后的產品來說都是必經之路，組件化要做的不僅僅是表面上看到的模塊拆分解耦，其背后還有很多作業來支撐組件化的進行，例如結合業務特性的模塊拆分策略、模塊間的互動方式和構建系統等等 ， 前端的組件化，其實是對專案進行自上而下的拆分，把通用的、可復用的功能以黑盒的形式封裝到一個組間中，然后暴露一些開箱即用的函式和屬性配置供外部組件呼叫，實作與業務邏輯的解耦，來達到代碼間的高內聚、低耦合，實作功能模塊的可配置、可復用、可擴展，今天給大家介紹的一款組件是:
前端Vue自定義精美底部操作欄導航欄工具列 可用于電商購物車底部導航，下載完整代碼請訪問uni-app插件市場地址：https://ext.dcloud.net.cn/plugin?id=13381
效果圖如下:
cc-botOperation
使用方法
<!-- colors：按鈕主題顏色 @menuClick：選單按鈕點擊 -->
<cc-botOperation colors="#A160F0" @menuClick="menuClick"></cc-botOperation>
<!-- 按鈕點擊事件 回傳按鈕從左到右序列 0 1 2 3 -->
menuClick(tag) {
uni.showModal({
title: '點擊底部操作欄',
content: '點擊底部操作欄選單按鈕序列 = ' + tag
})
}
HTML代碼實作部分
<template>
<view >
<!-- icon: 右側選單圖示 @searchClick：搜索點擊 @rigIconClick：右側選單點擊 -->
<!-- <cc-headerSearch icon="../../static/scan_icon.png" @searchClick="searchClick"
@rigIconClick="rigIconClick"></cc-headerSearch> -->
<!-- proList: 條目陣列資料 goProDetail:條目點擊事件跳轉（實作了點擊條目資料傳值）-->
<cc-waterListView :proList="projectList" @click="goProDetail"></cc-waterListView>
<!-- colors：按鈕主題顏色 @menuClick：選單按鈕點擊 -->
<cc-botOperation colors="#A160F0" @menuClick="menuClick"></cc-botOperation>
</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/07/{'area': '',
"pageSize": 10,
"pageNo": this.curPageNum
}
// 模擬請求介面
this.totalNum = 39;
this.projectList = [];
let imgArr = [
'https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg',
'https://cdn.pixabay.com/photo/2014/08/05/10/30/iphone-410324_1280.jpg',
'https://cdn.pixabay.com/photo/2016/12/09/11/33/smartphone-1894723_1280.jpg',
'https://cdn.pixabay.com/photo/2017/07/15/19/42/train-track-2507499_1280.jpg',
'https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg',
'https://cdn.pixabay.com/photo/2015/02/02/15/28/bar-621033_1280.jpg'
]
let nameArr = ['蘋果iPhone 7手機 64GB', '蘋果iPhone 8手機，128GB', 'iphone 8 plus手機 256GB',
'高清拍照手機', "三星手機 128GB", "全新ipad 256GB"
]
for (let i = 0; i < 20; i++) {
this.projectList.push({
'proImg': imgArr[i % 6],
'proName': nameArr[i % 6],
'proDetail': '我是產品詳情' + i,
'proPrice': 60 + 6 * i + '元',
'status': (i % 3 == 0) ? '618' : '',
'id': i + ''
});
}
},
searchClick: function() {
console.log("點擊了搜索框");
uni.navigateTo({
url: './search'
})
},
rigIconClick() {
console.log("點擊了右側圖示");
uni.showModal({
title: '溫馨提示',
content: '點擊了右側掃一掃'
})
},
menuClick(tag) {
uni.showModal({
title: '點擊底部操作欄',
content: '點擊底部操作欄選單按鈕序列 = ' + tag
})
}
}
}
</script>
<style>
page {
background-color: #f2f2f2;
margin-bottom: 50px;
}
.content {
display: flex;
flex-direction: column;
}
</style>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/556767.html
標籤：其他
上一篇：前端Vue組件之仿京東拼多多領取優惠券彈出框popup 可用于電商商品詳情領券場景使用
下一篇：返回列表