diff --git a/miniprogram/pages/components/card-plugin/card-plugin.json b/miniprogram/pages/components/card-plugin/card-plugin.json new file mode 100644 index 0000000..6fdb810 --- /dev/null +++ b/miniprogram/pages/components/card-plugin/card-plugin.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": { "t-icon": "tdesign-miniprogram/icon/icon" } +} diff --git a/miniprogram/pages/components/card-plugin/card-plugin.ts b/miniprogram/pages/components/card-plugin/card-plugin.ts new file mode 100644 index 0000000..5382dfc --- /dev/null +++ b/miniprogram/pages/components/card-plugin/card-plugin.ts @@ -0,0 +1,64 @@ +// pages/components/card_plugin/card_plugin.js +Component({ + /** + * 组件的属性列表 + */ + options: { + multipleSlots: true, + addGlobalClass: true, + }, + properties: { + customStyle: null, + className: null, + headerStyle: null, + contentStyle: null, + footerStyle: null, + }, + lifetimes: { + attached() { + setTimeout(() => { + this.getSlotHeight(); + }, 100); + }, + }, + + /** + * 组件的初始数据 + */ + data: { + showMore: false, + }, + /** + * 组件的方法列表 + */ + methods: { + getSlotHeight() { + // 1. 创建组件内的节点查询器(必须加.in(this)) + const query = wx.createSelectorQuery().in(this); + // 2. 查询插槽容器节点 + query + .select("#contentSlot") + .boundingClientRect((rect) => { + if (rect) { + const height = rect.height; // 获取节点高度(单位px) + const fontSizeSetting = wx.getAppBaseInfo().fontSizeSetting; + this.setData({ showMoreBar: height >= fontSizeSetting * 3 * 1.57 }); + + // 可将高度通过自定义事件传递给父页面 + // this.triggerEvent("slotHeightChange", { height }); + } else { + // console.warn("未查询到插槽容器节点"); + } + }) + .exec(); // 执行查询 + }, + click(e: any) { + this.triggerEvent("tap", e); + }, + showMoreTap() { + this.setData({ + showMore: !this.data.showMore, + }); + }, + }, +}); diff --git a/miniprogram/pages/components/card-plugin/card-plugin.wxml b/miniprogram/pages/components/card-plugin/card-plugin.wxml new file mode 100644 index 0000000..93907b2 --- /dev/null +++ b/miniprogram/pages/components/card-plugin/card-plugin.wxml @@ -0,0 +1,18 @@ + + + + + + + + + + {{showMore ? '收起' : '显示更多' }} + + + + + + + + diff --git a/miniprogram/pages/components/card-plugin/card-plugin.wxss b/miniprogram/pages/components/card-plugin/card-plugin.wxss new file mode 100644 index 0000000..02f0046 --- /dev/null +++ b/miniprogram/pages/components/card-plugin/card-plugin.wxss @@ -0,0 +1,34 @@ +/* pages/components/card_plugin/card_plugin.wxss */ +.header, +.footer { + display: flex; +} + +.header:empty, +.content:empty { + display: none; +} + +.footer > view { + border-top: 1rpx solid #ddd; + padding: 8px 0 0 12px; + display: flex; + width: 100%; +} + +.footer > view:empty { + display: none; +} + +.show-more { + color: #999; + display: flex; + align-items: center; + justify-content: center; + font-size: 14px; + height: 26px; +} + +.show-more:active { + background-color: #f5f5f5; +} diff --git a/miniprogram/pages/components/popup-plugin/popup-plugin.wxml b/miniprogram/pages/components/popup-plugin/popup-plugin.wxml index d0246b7..faa566e 100644 --- a/miniprogram/pages/components/popup-plugin/popup-plugin.wxml +++ b/miniprogram/pages/components/popup-plugin/popup-plugin.wxml @@ -1,14 +1,14 @@ - - {{title}} - - - - + + {{title}} + + + + diff --git a/miniprogram/pages/processEntry/processEntry.wxss b/miniprogram/pages/processEntry/processEntry.wxss index bbe6fe5..3982cdc 100644 --- a/miniprogram/pages/processEntry/processEntry.wxss +++ b/miniprogram/pages/processEntry/processEntry.wxss @@ -28,7 +28,7 @@ .container { display: flex; flex-direction: column; - height: calc(100vh - 50px); + height: 100vh; /* height: calc(100vh - 50px - env(safe-area-inset-bottom)); */ }