這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 介紹 今天介紹一個非常簡單的入門級小案例，就是地圖的捲簾效果實現，各大地圖引擎供應商都有相關示例，很奇怪高德居然沒有，我看了下文檔發現其實也是可以簡單實現的，演示代碼放到文末。本文用到了圖層掩模，即圖層遮罩，讓圖層只在指定範圍內顯示。 實 ...
隨著技術的發展，開發的複雜度也越來越高，傳統開發方式將一個系統做成了整塊應用，經常出現的情況就是一個小小的改動或者一個小功能的增加可能會引起整體邏輯的修改，造成牽一發而動全身。
通過組件化開發，可以有效實現單獨開發，單獨維護，而且他們之間可以隨意的進行組合。大大提升開發效率低，降低維護成本。 組件化對於任何一個業務場景複雜的前端應用以及經過多次迭代之後的產品來說都是必經之路。組件化要做的不僅僅是錶面上看到的模塊拆分解耦，其背後還有很多工作來支撐組件化的進行，例如結合業務特性的模塊拆分策略、模塊間的交互方式和構建系統等等
今天給大家介紹的一款組件是：仿京東淘寶我的優惠券列表組件 用於電商我的優惠券列表頁面，附帶完整代碼下載地址：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>
