隨著技術的發展，開發的復雜度也越來越高，傳統開發方式將一個系統做成了整塊應用，經常出現的情況就是一個小小的改動或者一個小功能的增加可能會引起整體邏輯的修改，造成牽一發而動全身，
通過組件化開發，可以有效實作單獨開發，單獨維護，而且他們之間可以隨意的進行組合，大大提升開發效率低，降低維護成本， 組件化對于任何一個業務場景復雜的前端應用以及經過多次迭代之后的產品來說都是必經之路，組件化要做的不僅僅是表面上看到的模塊拆分解耦，其背后還有很多作業來支撐組件化的進行，例如結合業務特性的模塊拆分策略、模塊間的互動方式和構建系統等等
今天給大家介紹的一款組件是：仿京東淘寶我的優惠券串列組件 用于電商我的優惠券串列頁面，附帶完整代碼下載地址：https://ext.dcloud.net.cn/plugin?id=13489
效果圖如下：
cc-couponList
使用方法
<!-- color：主題色 couponList：優惠券陣列 @itemClick：條目點擊-->
<cc-couponList :colors="colors" :couponList="couponList" @itemClick="jumpNext"></cc-couponList>
HTML代碼實作部分
<template>
<view>
<!-- color：主題色 couponList：優惠券陣列 @itemClick：條目點擊-->
<cc-couponList :colors="colors" :couponList="couponList" @itemClick="jumpNext"></cc-couponList>
</view>
</template>
<script>
export default {
data() {
return {
colors: '#e54d42',
couponList: [{
name: '滿105減5',
dates: '2023-07-09 2023-08-02',
status: 0,
money: 105,
sub: 5
},
{
name: '滿200減10',
dates: '2023-07-19 2023-08-22',
status: 0,
money: 200,
sub: 10
}, {
name: '滿100減10',
dates: '2023-05-09 2023-06-02',
status: 1,
money: 100,
sub: 10
},
{
name: '滿400減20',
dates: '2023-04-09 2023-05-08',
status: 1,
money: 400,
sub: 20
}
],
};
},
props: {},
/**
* 生命周期函式--監聽頁面加載
*/
onLoad: function(options) {
},
/**
* 生命周期函式--監聽頁面初次渲染完成
*/
onReady: function() {},
/**
* 生命周期函式--監聽頁面顯示
*/
onShow: function() {},
/**
* 生命周期函式--監聽頁面隱藏
*/
onHide: function() {},
/**
* 生命周期函式--監聽頁面卸載
*/
onUnload: function() {},
/**
* 頁面相關事件處理函式--監聽用戶下拉動作
*/
onPullDownRefresh: function() {},
/**
* 頁面上拉觸底事件的處理函式
*/
onReachBottom: function() {},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function() {},
methods: {
jumpNext(item) {
uni.showModal({
title: '點擊優惠券條目',
content: '點擊優惠券條目 = ' + JSON.stringify(item)
})
}
}
};
</script>
<style lang="scss" scoped>
</style>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/556884.html
標籤：其他
上一篇：前端Vue自定義商品評價頁面單選多選標簽tags組件單選多選按鈕選擇器picker組件
下一篇：返回列表