good/xhs-examples
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
熊潇
2025-09-14 00:21:54 +08:00
commit d40b3bbd62
766 changed files with 36275 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
xhs-mini-demos/component-case/post-note-button/post-note-button.css Normal file
View File

@@ -0,0 +1,39 @@
.flex {
display: flex;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.mr-20 {
margin-right: 20px;
}
.mb-8 {
margin-bottom: 8px;
}
.mb-20 {
margin-bottom: 20px;
}
.safe-area {
padding-bottom: 150px;
}
.w-full {
width: 100%;
}
.word-break {
word-break: keep-all;
}

120
xhs-mini-demos/component-case/post-note-button/post-note-button.js Normal file
View File

@@ -0,0 +1,120 @@
const tooLongImage = [
{ url: 'https://picasso-static.xiaohongshu.com/fe-platform/5e92fb1a30559c583a93bf1558d7d91d50eff18d.png' },
{ url: 'https://picasso-static.xiaohongshu.com/fe-platform/86f50d192e6821b2695268bae172ca1366646e12.png' },
{ url: 'https://picasso-static.xiaohongshu.com/fe-platform/f292915797d7e64daef628e12ecd3c6fd98aef11.png' },
{ url: 'https://picasso-static.xiaohongshu.com/fe-platform/56728cb9c2277b7059c28dda225aae8e5b816bf2.png' },
{ url: 'https://picasso-static.xiaohongshu.com/fe-platform/dae561c266536462ebd22bef76ad20fb0055cadc.png' },
{ url: 'https://picasso-static.xiaohongshu.com/fe-platform/2e9c9e9979512030c1979376b5795a3299dbb6d4.png' },
{ url: 'https://picasso-static.xiaohongshu.com/fe-platform/188808b7204daa338cdf83766f2e2e62fc53f3af.png' },
{ url: 'https://picasso-static.xiaohongshu.com/fe-platform/254b58b8bec12b2cee3ba7db1a82a46b09e660df.png' },
{ url: 'https://picasso-static.xiaohongshu.com/fe-platform/5c0350f8e988c73db984cffbf8edbb176f3f0b7f.png' },
{ url: 'https://picasso-static.xiaohongshu.com/fe-platform/4d1d0d0290896ef42bd5a146430139b4dcad623f.png' },
{ url: 'https://picasso-static.xiaohongshu.com/fe-platform/fed3bd2db6461d81439d790cd4e5aae67bd3e9ce.png' },
{ url: 'https://picasso-static.xiaohongshu.com/fe-platform/16a745a03e2016c624e49a92fad477ac8f73d0ed.png' },
{ url: 'https://picasso-static.xiaohongshu.com/fe-platform/932588729251f9250c0a4837d9a5d1616e81608a.png' },
{ url: 'https://picasso-static.xiaohongshu.com/fe-platform/5d13c12e63299966296084e4473076202be7b90d.png' },
{ url: 'https://picasso-static.xiaohongshu.com/fe-platform/38048acf3efe1687b91d3115be7ca018f60268a5.png' },
{ url: 'https://picasso-static.xiaohongshu.com/fe-platform/5e1716df0cb98170c57c6e44bcebff7ef6c8afe2.png' },
{ url: 'https://picasso-static.xiaohongshu.com/fe-platform/9c1a1e4c23da7ef5d8a7142b363015ef86517ded.png' },
{ url: 'https://picasso-static.xiaohongshu.com/fe-platform/3d03a8dd1b328a2aa8f5be868704a44f9b868b93.png' },
{ url: 'https://picasso-static.xiaohongshu.com/fe-platform/82c3a1d86168e664ec29143502d4367e144ee192.png' },
{ url: 'https://picasso-static.xiaohongshu.com/fe-platform/d56c5611536791c9fae8d00f77a13598da91d120.png' },
];
const video_resources = {
video_url: 'https://fe-video-qc.xhscdn.com/fe-platform/4b30caabcac0ad43c1db48415a355343156d8eeb.mp4',
cover_url: 'https://picasso-static.xiaohongshu.com/fe-platform/5e92fb1a30559c583a93bf1558d7d91d50eff18d.png',
}
Page({
data: {
noteTitle: '🌳探秘神秘古老森林，聆听自然私语！',
noteContent: '踏入这片古老森林，仿佛穿越到了远古时代。粗壮的树木遮天蔽日，阳光透过树叶的缝隙洒下，形成一道道金色的光柱。地上铺满了厚厚的落叶，踩上去发出清脆的声响。森林中弥漫着清新的松香气息，偶尔还能听到鸟儿的啼鸣声，充满了神秘与宁静。',
mediaInfo: JSON.stringify({
image_resources: tooLongImage.slice(0, 18),
}),
tags: "古老森林,森林探秘,自然宁静,神秘之境",
showFloatingButton: true,
},
onLoad() {
setTimeout(() => { this.removeSkeleton?.(); }, 1000);
},
bindFocus(e) {
this.setData({
showFloatingButton: false,
});
},
bindBlur(e) {
this.setData({
showFloatingButton: true,
});
},
bindError(e) {
xhs.showModal({
title: '发生错误',
content: e.detail.errMsg,
});
},
bindInputNoteTitle(e) {
this.setData({
noteTitle: e.detail.value,
});
},
bindInputNoteContent(e) {
this.setData({
noteContent: e.detail.value,
});
},
bindInputTags(e) {
this.setData({
tags: e.detail.value,
});
},
bindInputMediaInfo(e) {
this.setData({
mediaInfo: e.detail.value,
});
},
// 改成 1 张图片
changeMediaInfoToImageResource() {
this.setData({
mediaInfo: JSON.stringify({
image_resources: tooLongImage.slice(0, 1),
}),
});
},
// 改成 18 张相同的图片
changeMediaInfoToSameImageResource() {
const image = tooLongImage[0];
this.setData({
mediaInfo: JSON.stringify({
// 重复 18 次
image_resources: Array.from({ length: 18 }, () => image),
})
});
},
// 改成 18 张不同的图片
changeMediaInfoToDifferentImageResource() {
this.setData({
mediaInfo: JSON.stringify({
image_resources: tooLongImage.slice(0, 18),
}),
});
},
// 改成视频
changeMediaInfoToVideoResource() {
this.setData({
mediaInfo: JSON.stringify({
video_resources: video_resources,
}),
});
},
// 改成 19 张图片
changeMediaInfoTooLong() {
this.setData({
mediaInfo: JSON.stringify({
image_resources: tooLongImage.slice(0),
}),
});
},
});

17
xhs-mini-demos/component-case/post-note-button/post-note-button.json Normal file
View File

@@ -0,0 +1,17 @@
{
"navigationBarTitleText": "发小红书按钮",
"usingComponents": {
"showbox": "../../common/component/showbox/index",
"box": "../../common/component/container/index"
},
"skeleton1": {
"path": "./post-note-button.skeleton.xhsml",
"options": {
"background": "#eee",
"animation": "shine"
}
},
"skeleton": {
"path": "post-note-button.skeleton.xhsml"
}
}

11
xhs-mini-demos/component-case/post-note-button/post-note-button.skeleton.css Normal file
View File

@@ -0,0 +1,11 @@
.skeleton-text-block-mark, .skeleton-text-block-mark * { background-origin: content-box; background-clip: content-box; background-repeat: repeat-y; background-color: transparent !important; color: transparent !important; }.sk-pseudo::before, .sk-pseudo::after { background: none rgb(238, 238, 238) !important; color: transparent !important; border-color: transparent !important; border-radius: 0px !important; }.sk-button { box-shadow: none !important; }.sk-transparent::before, .sk-transparent::after { opacity: 0 !important; }.sk-animation-shine-2 { background: linear-gradient(90deg, rgba(0, 0, 0, 0.06) 20%, rgba(0, 0, 0, 0.15) 37%, rgba(0, 0, 0, 0.06) 63%) 0% 0% / 400% 100%; animation-name: sk-shine-2; animation-duration: 1.4s; animation-timing-function: ease; animation-iteration-count: infinite; }@keyframes sk-shine-2 {
0% { background-position: 100% 50%; }
100% { background-position: 0px 50%; }
}
html { width: 100%; height: 100%; }body { margin: 0px; width: 100%; height: 100%; scroll-behavior: smooth; overflow-x: hidden; }* { text-size-adjust: none; }.xhs_inner-loading { height: 60px; margin-top: -60px; text-align: center; transition: height 0.25s ease 0s, border-bottom-width 0.25s ease 0s; background-color: rgb(238, 238, 238); font-size: 14px; overflow: hidden; line-height: 60px !important; }xhs-page { min-width: 100vw; min-height: 100vh; display: block; }#xhs_inner_app { height: 100%; }
xhs-template { display: none; width: 0px; height: 0px; }
xhs-view { display: block; }xhs-video { display: inline-block; width: 100%; height: 100%; }.xgplayer div.gradient { background-image: none; }.xgplayer-mobile xg-controls.xgplayer-controls { background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.75)); }.xgplayer .flex-controls xg-inner-controls.xg-inner-controls { bottom: 4px; }.xhs-ios-native-input { overflow: scroll; position: absolute; inset: 0px; }xhs-input { position: relative; cursor: auto; display: block; height: 22px; text-overflow: clip; overflow: hidden; white-space: nowrap; margin: 0px; }xhs-input .web-input { position: relative; min-height: 22px; text-overflow: inherit; border: none; font-size: inherit; font-weight: inherit; color: inherit; padding: 0px; margin: 0px; outline: none; text-align: inherit; -webkit-tap-highlight-color: transparent; }xhs-input .web-input div { position: absolute; inset: 0px; margin: auto; min-height: 22px; white-space: pre; text-align: inherit; overflow: hidden; vertical-align: middle; }xhs-input input { position: relative; border: none; height: inherit; width: 100%; font-size: inherit; font-weight: inherit; color: inherit; background: transparent; display: inherit; padding: 0px; margin: 0px; outline: none; vertical-align: middle; text-align: inherit; overflow: inherit; white-space: inherit; text-overflow: inherit; -webkit-tap-highlight-color: transparent; z-index: 1; }.xhs-inner-input-placeholder { color: rgb(153, 153, 153); }xhs-map { display: block; position: relative; }xhs-map .tmap-scale-text { display: var(--map-showScale, block); }xhs-map .tmap-scale-line { display: var(--map-showScale, block); }xhs-map .rotate-circle { display: var(--map-showCompass, block); }xhs-map img { display: inline; }xhs-map .logo-text { display: none; }xhs-map a[target="_blank"] { display: none; }xhs-map .tmap-zoom-control { display: none; }xhs-map > * { z-index: 1099; position: absolute !important; }xhs-camera { display: block; position: relative; }.xhs-i-n-c { overflow: scroll; position: absolute; inset: 0px; }
.xhs_0__ma2 { margin: 4px; }.xhs_0__mx2 { margin: 0px 4px; }.xhs_0__my2 { margin: 4px 0px; }.xhs_0__mt2 { margin-top: 4px; }.xhs_0__mb2 { margin-bottom: 4px; }.xhs_0__ml2 { margin-left: 4px; }.xhs_0__mr2 { margin-right: 4px; }.xhs_0__pa2 { padding: 4px; }.xhs_0__px2 { padding: 0px 4px; }.xhs_0__py2 { padding: 4px 0px; }.xhs_0__pt2 { padding-top: 4px; }.xhs_0__pb2 { padding-bottom: 4px; }.xhs_0__pl2 { padding-left: 4px; }.xhs_0__pr2 { padding-right: 4px; }.xhs_0__ma4 { margin: 8px; }.xhs_0__mx4 { margin: 0px 8px; }.xhs_0__my4 { margin: 8px 0px; }.xhs_0__mt4 { margin-top: 8px; }.xhs_0__mb4 { margin-bottom: 8px; }.xhs_0__ml4 { margin-left: 8px; }.xhs_0__mr4 { margin-right: 8px; }.xhs_0__pa4 { padding: 8px; }.xhs_0__px4 { padding: 0px 8px; }.xhs_0__py4 { padding: 8px 0px; }.xhs_0__pt4 { padding-top: 8px; }.xhs_0__pb4 { padding-bottom: 8px; }.xhs_0__pl4 { padding-left: 8px; }.xhs_0__pr4 { padding-right: 8px; }.xhs_0__ma6 { margin: 12px; }.xhs_0__mx6 { margin: 0px 12px; }.xhs_0__my6 { margin: 12px 0px; }.xhs_0__mt6 { margin-top: 12px; }.xhs_0__mb6 { margin-bottom: 12px; }.xhs_0__ml6 { margin-left: 12px; }.xhs_0__mr6 { margin-right: 12px; }.xhs_0__pa6 { padding: 12px; }.xhs_0__px6 { padding: 0px 12px; }.xhs_0__py6 { padding: 12px 0px; }.xhs_0__pt6 { padding-top: 12px; }.xhs_0__pb6 { padding-bottom: 12px; }.xhs_0__pl6 { padding-left: 12px; }.xhs_0__pr6 { padding-right: 12px; }.xhs_0__ma8 { margin: 16px; }.xhs_0__mx8 { margin: 0px 16px; }.xhs_0__my8 { margin: 16px 0px; }.xhs_0__mt8 { margin-top: 16px; }.xhs_0__mb8 { margin-bottom: 16px; }.xhs_0__ml8 { margin-left: 16px; }.xhs_0__mr8 { margin-right: 16px; }.xhs_0__pa8 { padding: 16px; }.xhs_0__px8 { padding: 0px 16px; }.xhs_0__py8 { padding: 16px 0px; }.xhs_0__pt8 { padding-top: 16px; }.xhs_0__pb8 { padding-bottom: 16px; }.xhs_0__pl8 { padding-left: 16px; }.xhs_0__pr8 { padding-right: 16px; }.xhs_0__ma10 { margin: 20px; }.xhs_0__mx10 { margin: 0px 20px; }.xhs_0__my10 { margin: 20px 0px; }.xhs_0__mt10 { margin-top: 20px; }.xhs_0__mb10 { margin-bottom: 20px; }.xhs_0__ml10 { margin-left: 20px; }.xhs_0__mr10 { margin-right: 20px; }.xhs_0__pa10 { padding: 20px; }.xhs_0__px10 { padding: 0px 20px; }.xhs_0__py10 { padding: 20px 0px; }.xhs_0__pt10 { padding-top: 20px; }.xhs_0__pb10 { padding-bottom: 20px; }.xhs_0__pl10 { padding-left: 20px; }.xhs_0__pr10 { padding-right: 20px; }.xhs_0__ui-input { background-color: rgba(51, 51, 51, 0.024); border-radius: 18px; padding: 9px 16px; }.xhs_0__ui-textarea { background-color: rgba(0, 0, 0, 0.04); border-radius: 8px; padding: 14px 12px; }.xhs_0__ui-button { background-color: rgb(255, 36, 66); color: white; }.xhs_0__ui-button-hover { background-color: rgba(255, 36, 66, 0.7); color: white; }.xhs_0__ui-button-hover::after { border: none; }xhs-picker { border: 1px solid rgb(238, 238, 238); border-radius: 5px; }xhs-button { height: 40px; border-radius: 1000px; font-size: 16px; font-weight: 500; line-height: 40px; }xhs-button::after { border: none; }.xhs_0_button-hover::after { border: none; }xhs-textarea { padding: 0px; }.xhs_0_xhs-inner-switch-control-switch::after { background-color: aqua; }xhs-picker { border: none; }xhs-radio * { display: flex; }xhs-checkbox * { display: flex; }xhs-slider > div > div > div > div:nth-child(2) { width: 16px !important; height: 16px !important; margin-top: -8px !important; margin-left: -8px !important; }:root { --xhs-theme-color: red; }.xhs_0__cred { color: var(--xhs-theme-color); }.xhs_0__bcred { background-color: var(--xhs-theme-color); color: white; }.xhs_0__dflex { display: flex; }.xhs_0__fd_column { flex-direction: column; }.xhs_0__jc_space-around { justify-content: space-around; }.xhs_0__jc_center { justify-content: center; }.xhs_0__jc_space-between { justify-content: space-between; }.xhs_0__ai_center { align-items: center; }.xhs_0__flex_1 { flex: 1 1 0%; }.xhs_0__text_wrap { word-break: break-all; }.xhs_0__end_split { position: relative; border: 0px; }.xhs_0__end_split::after { content: ""; position: absolute; bottom: 0px; height: 1px; background: rgb(235, 235, 235); left: 0px; right: 0px; }.xhs_0__ui-space > * { margin-bottom: 20px; }.xhs_0__ui-space > :last-child { margin-bottom: 0px; }* { box-sizing: border-box; margin: 0px; padding: 0px; }html, body { height: 100%; font-family: -apple-system-font, "Helvetica Neue", Helvetica, sans-serif; font-size: 100px; color: rgb(51, 51, 51); }.xhs_0_container { font-size: 0.14rem; overflow: hidden; }
.xhs_0_flex { display: flex; }.xhs_0_items-center { align-items: center; }.xhs_0_justify-center { justify-content: center; }.xhs_0_justify-between { justify-content: space-between; }.xhs_0_mr-20 { margin-right: 20px; }.xhs_0_mb-8 { margin-bottom: 8px; }.xhs_0_mb-20 { margin-bottom: 20px; }.xhs_0_safe-area { padding-bottom: 150px; }.xhs_0_w-full { width: 100%; }.xhs_0_word-break { word-break: keep-all; }
.xhs_1_xhs-demo-card { margin: 10px; background-color: white; border-radius: 12px; overflow: hidden; }.xhs_1_xhs-demo-card-title { margin: 0px 16px; padding: 15px 0px; font-size: 14px; font-weight: 500; line-height: 18px; }.xhs_1_xhs-demo-card-content { background-color: rgb(255, 255, 255); }.xhs_1_xhs-demo-card-spiver { position: relative; border: 0px; }.xhs_1_xhs-demo-card-spiver::after { content: ""; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 1px; background: rgb(239, 239, 239); transform-origin: 0px 100%; }
::-webkit-scrollbar { width: 1px; }::-webkit-scrollbar-track { background: rgb(241, 241, 241); }::-webkit-scrollbar-thumb { background: rgb(136, 136, 136); }

187
xhs-mini-demos/component-case/post-note-button/post-note-button.skeleton.xhsml Normal file
View File

@@ -0,0 +1,187 @@
<view class="container xhs_0_container" style="border-color: rgb(238, 238, 238);">
<showbox style="border-color: rgb(238, 238, 238);">
<view class="xhs-demo-card xhs_1_xhs-demo-card" style="border-color: rgb(238, 238, 238);">
<view class="xhs-demo-card-title xhs_1_xhs-demo-card-title xhs-demo-card-spiver xhs_1_xhs-demo-card-spiver sk-pseudo" style="border-color: rgb(238, 238, 238);">
<view class="skeleton-text-block-mark" style="display: inline-block; background-image: linear-gradient(transparent 20%, rgb(238, 238, 238) 0%, rgb(238, 238, 238) 80%, transparent 0%); background-size: 98.6758% 100%; position: relative; background-position-x: 0%;">
type = floating 悬浮按钮，见屏幕下方
</view>
</view>
<view class="xhs-demo-card-content xhs_1_xhs-demo-card-content" style="border-color: rgb(238, 238, 238);">
<view class="sk-button" style="width: 0px; height: 0px; background-color: rgb(238, 238, 238); color: transparent; border-color: transparent;" />
</view>
</view>
</showbox>
<showbox style="border-color: rgb(238, 238, 238);">
<view class="xhs-demo-card xhs_1_xhs-demo-card" style="border-color: rgb(238, 238, 238);">
<view class="xhs-demo-card-title xhs_1_xhs-demo-card-title xhs-demo-card-spiver xhs_1_xhs-demo-card-spiver sk-pseudo" style="border-color: rgb(238, 238, 238);">
<view class="skeleton-text-block-mark" style="display: inline-block; background-image: linear-gradient(transparent 20%, rgb(238, 238, 238) 0%, rgb(238, 238, 238) 80%, transparent 0%); background-size: 98.0804% 100%; position: relative; background-position-x: 0%;">
type = default 面性按钮
</view>
</view>
<view class="xhs-demo-card-content xhs_1_xhs-demo-card-content" style="border-color: rgb(238, 238, 238);">
<box class="box xhs_0_box" style="border-color: rgb(238, 238, 238);">
<view style="padding: 16px; border-color: rgb(238, 238, 238);">
<view class="flex xhs_0_flex items-center xhs_0_items-center mb-20 xhs_0_mb-20" style="border-color: rgb(238, 238, 238);">
<text class="mr-20 xhs_0_mr-20 skeleton-text-block-mark" style="--text-display: inline; --text-selectable: none; border-color: rgb(238, 238, 238); background-image: linear-gradient(transparent 20%, rgb(238, 238, 238) 0%, rgb(238, 238, 238) 80%, transparent 0%); background-size: 100% 100%; position: relative; background-position-x: 0%;">
size = medium
</text>
<view class="sk-button" style="width: 122px; height: 36px; background-color: rgb(238, 238, 238); color: transparent; border-color: transparent;" />
</view>
<view class="flex xhs_0_flex items-center xhs_0_items-center" style="border-color: rgb(238, 238, 238);">
<text class="mr-20 xhs_0_mr-20 skeleton-text-block-mark" style="--text-display: inline; --text-selectable: none; border-color: rgb(238, 238, 238); background-image: linear-gradient(transparent 20%, rgb(238, 238, 238) 0%, rgb(238, 238, 238) 80%, transparent 0%); background-size: 100% 100%; position: relative; background-position-x: 0%;">
可自定义宽度
</text>
<view class="sk-button" style="width: 250px; height: 36px; background-color: rgb(238, 238, 238); color: transparent; border-color: transparent;" />
</view>
</view>
</box>
<box class="box xhs_0_box" style="border-color: rgb(238, 238, 238);">
<view style="padding: 16px; border-color: rgb(238, 238, 238);">
<view class="flex xhs_0_flex items-center xhs_0_items-center mb-20 xhs_0_mb-20 w-full xhs_0_w-full" style="border-color: rgb(238, 238, 238);">
<text class="mr-20 xhs_0_mr-20 skeleton-text-block-mark" style="--text-display: inline; --text-selectable: none; border-color: rgb(238, 238, 238); background-image: linear-gradient(transparent 20%, rgb(238, 238, 238) 0%, rgb(238, 238, 238) 80%, transparent 0%); background-size: 100% 100%; position: relative; background-position-x: 0%;">
size = large
</text>
<view class="flex xhs_0_flex justify-center xhs_0_justify-center" style="border-color: rgb(238, 238, 238);">
<view class="sk-button" style="width: 140px; height: 40px; background-color: rgb(238, 238, 238); color: transparent; border-color: transparent;" />
</view>
</view>
<view class="flex xhs_0_flex items-center xhs_0_items-center" style="border-color: rgb(238, 238, 238);">
<text class="mr-20 xhs_0_mr-20 skeleton-text-block-mark" style="--text-display: inline; --text-selectable: none; border-color: rgb(238, 238, 238); background-image: linear-gradient(transparent 20%, rgb(238, 238, 238) 0%, rgb(238, 238, 238) 80%, transparent 0%); background-size: 100% 100%; position: relative; background-position-x: 0%;">
可自定义宽度
</text>
<view class="sk-button" style="width: 250px; height: 40px; background-color: rgb(238, 238, 238); color: transparent; border-color: transparent;" />
</view>
</view>
</box>
</view>
</view>
</showbox>
<showbox style="border-color: rgb(238, 238, 238);">
<view class="xhs-demo-card xhs_1_xhs-demo-card" style="border-color: rgb(238, 238, 238);">
<view class="xhs-demo-card-title xhs_1_xhs-demo-card-title xhs-demo-card-spiver xhs_1_xhs-demo-card-spiver sk-pseudo" style="border-color: rgb(238, 238, 238);">
<view class="skeleton-text-block-mark" style="display: inline-block; background-image: linear-gradient(transparent 20%, rgb(238, 238, 238) 0%, rgb(238, 238, 238) 80%, transparent 0%); background-size: 98.2757% 100%; position: relative; background-position-x: 0%;">
type = plain 线性按钮
</view>
</view>
<view class="xhs-demo-card-content xhs_1_xhs-demo-card-content" style="border-color: rgb(238, 238, 238);">
<box class="box xhs_0_box flex xhs_0_flex items-center xhs_0_items-center" style="border-color: rgb(238, 238, 238);">
<view style="padding: 16px; border-color: rgb(238, 238, 238);">
<view class="flex xhs_0_flex items-center xhs_0_items-center" style="border-color: rgb(238, 238, 238);">
<text class="mr-20 xhs_0_mr-20 skeleton-text-block-mark" style="--text-display: inline; --text-selectable: none; border-color: rgb(238, 238, 238); background-image: linear-gradient(transparent 20%, rgb(238, 238, 238) 0%, rgb(238, 238, 238) 80%, transparent 0%); background-size: 100% 100%; position: relative; background-position-x: 0%;">
size = medium
</text>
<view class="sk-button" style="width: 122px; height: 36px; background-color: rgb(238, 238, 238); color: transparent; border-color: transparent;" />
</view>
</view>
</box>
<box class="box xhs_0_box" style="border-color: rgb(238, 238, 238);">
<view style="padding: 16px; border-color: rgb(238, 238, 238);">
<view class="flex xhs_0_flex items-center xhs_0_items-center" style="border-color: rgb(238, 238, 238);">
<text class="mr-20 xhs_0_mr-20 skeleton-text-block-mark" style="--text-display: inline; --text-selectable: none; border-color: rgb(238, 238, 238); background-image: linear-gradient(transparent 20%, rgb(238, 238, 238) 0%, rgb(238, 238, 238) 80%, transparent 0%); background-size: 100% 100%; position: relative; background-position-x: 0%;">
size = large
</text>
<view class="sk-button" style="width: 140px; height: 40px; background-color: rgb(238, 238, 238); color: transparent; border-color: transparent;" />
</view>
</view>
</box>
</view>
</view>
</showbox>
<showbox style="border-color: rgb(238, 238, 238);">
<view class="xhs-demo-card xhs_1_xhs-demo-card" style="border-color: rgb(238, 238, 238);">
<view class="xhs-demo-card-title xhs_1_xhs-demo-card-title xhs-demo-card-spiver xhs_1_xhs-demo-card-spiver sk-pseudo" style="border-color: rgb(238, 238, 238);">
<view class="skeleton-text-block-mark" style="display: inline-block; background-image: linear-gradient(transparent 20%, rgb(238, 238, 238) 0%, rgb(238, 238, 238) 80%, transparent 0%); background-size: 100% 100%; position: relative; background-position-x: 0%;">
参数设置区域，设置发小红书配置按钮参数
</view>
</view>
<view class="xhs-demo-card-content xhs_1_xhs-demo-card-content" style="border-color: rgb(238, 238, 238);">
<box class="box xhs_0_box" style="border-color: rgb(238, 238, 238);">
<view style="padding: 16px; border-color: rgb(238, 238, 238);">
<view class="mb-8 xhs_0_mb-8" style="border-color: rgb(238, 238, 238);">
<view class="skeleton-text-block-mark" style="display: inline-block; background-image: linear-gradient(transparent 20%, rgb(238, 238, 238) 0%, rgb(238, 238, 238) 80%, transparent 0%); background-size: 100% 100%; position: relative; background-position-x: 0%;">
笔记标题 title，最大长度 20
</view>
</view>
<view class="_ui-input xhs_0__ui-input" style="border-color: rgb(238, 238, 238);">
<view style="width: 346px; height: 22px; background-color: rgb(238, 238, 238);" />
</view>
</view>
</box>
<box class="box xhs_0_box" style="border-color: rgb(238, 238, 238);">
<view style="padding: 16px; border-color: rgb(238, 238, 238);">
<view class="mb-8 xhs_0_mb-8" style="border-color: rgb(238, 238, 238);">
<view class="skeleton-text-block-mark" style="display: inline-block; background-image: linear-gradient(transparent 20%, rgb(238, 238, 238) 0%, rgb(238, 238, 238) 80%, transparent 0%); background-size: 100% 100%; position: relative; background-position-x: 0%;">
笔记内容 content，最大长度 1000
</view>
</view>
<view class="_ui-input xhs_0__ui-input" style="border-color: rgb(238, 238, 238);">
<view style="width: 346px; height: 22px; background-color: rgb(238, 238, 238);" />
</view>
</view>
</box>
<box class="box xhs_0_box" style="border-color: rgb(238, 238, 238);">
<view style="padding: 16px; border-color: rgb(238, 238, 238);">
<view class="mb-8 xhs_0_mb-8" style="border-color: rgb(238, 238, 238);">
<view class="skeleton-text-block-mark" style="display: inline-block; background-image: linear-gradient(transparent 20%, rgb(238, 238, 238) 0%, rgb(238, 238, 238) 80%, transparent 0%); background-size: 100% 100%; position: relative; background-position-x: 0%;">
话题 tags，使用英文逗号分割
</view>
</view>
<view class="_ui-input xhs_0__ui-input" style="border-color: rgb(238, 238, 238);">
<view style="width: 346px; height: 22px; background-color: rgb(238, 238, 238);" />
</view>
</view>
</box>
<box class="box xhs_0_box" style="border-color: rgb(238, 238, 238);">
<view style="padding: 16px; border-color: rgb(238, 238, 238);">
<view class="mb-8 xhs_0_mb-8" style="border-color: rgb(238, 238, 238);">
<view class="skeleton-text-block-mark" style="display: inline-block; background-image: linear-gradient(transparent 20%, rgb(238, 238, 238) 0%, rgb(238, 238, 238) 80%, transparent 0%); background-size: 100% 100%; position: relative; background-position-x: 0%;">
媒体信息，media-info（图片 1-18 张 / 视频 1 个）
</view>
</view>
<view class="_ui-input xhs_0__ui-input" style="border-color: rgb(238, 238, 238);">
<view style="width: 300px; height: 739.062px; background-color: rgb(238, 238, 238);" />
</view>
</view>
</box>
<box class="box xhs_0_box" style="border-color: rgb(238, 238, 238);">
<view style="padding: 16px; border-color: rgb(238, 238, 238);">
<view class="mb-8 xhs_0_mb-8" style="border-color: rgb(238, 238, 238);">
<view class="skeleton-text-block-mark" style="display: inline-block; background-image: linear-gradient(transparent 20%, rgb(238, 238, 238) 0%, rgb(238, 238, 238) 80%, transparent 0%); background-size: 100% 100%; position: relative; background-position-x: 0%;">
快速调整 media-info
</view>
</view>
<view style="border-color: rgb(238, 238, 238);">
<button class="mb-8 xhs_0_mb-8 sk-pseudo sk-button" style="--button-bg-color: #F8F8F8; --button-color: #000000; --button-font-size: 18px; --button-display: block; --button-line-height: 2.55555556; --button-active-bg-color: #dedede; --button-active-color: rgba(0, 0, 0, 0.6); --button-border: 1px solid rgba(0, 0, 0, 0.2); --button-active-border-color: 1px solid rgba(0, 0, 0, 0.2); border-color: transparent; background-color: rgb(238, 238, 238); color: transparent; width: 378px; height: 40px;" />
<button class="mb-8 xhs_0_mb-8 sk-pseudo sk-button" style="--button-bg-color: #F8F8F8; --button-color: #000000; --button-font-size: 18px; --button-display: block; --button-line-height: 2.55555556; --button-active-bg-color: #dedede; --button-active-color: rgba(0, 0, 0, 0.6); --button-border: 1px solid rgba(0, 0, 0, 0.2); --button-active-border-color: 1px solid rgba(0, 0, 0, 0.2); border-color: transparent; background-color: rgb(238, 238, 238); color: transparent; width: 378px; height: 40px;" />
<button class="mb-8 xhs_0_mb-8 sk-pseudo sk-button" style="--button-bg-color: #F8F8F8; --button-color: #000000; --button-font-size: 18px; --button-display: block; --button-line-height: 2.55555556; --button-active-bg-color: #dedede; --button-active-color: rgba(0, 0, 0, 0.6); --button-border: 1px solid rgba(0, 0, 0, 0.2); --button-active-border-color: 1px solid rgba(0, 0, 0, 0.2); border-color: transparent; background-color: rgb(238, 238, 238); color: transparent; width: 378px; height: 40px;" />
<button class="mb-8 xhs_0_mb-8 sk-pseudo sk-button" style="--button-bg-color: #F8F8F8; --button-color: #000000; --button-font-size: 18px; --button-display: block; --button-line-height: 2.55555556; --button-active-bg-color: #dedede; --button-active-color: rgba(0, 0, 0, 0.6); --button-border: 1px solid rgba(0, 0, 0, 0.2); --button-active-border-color: 1px solid rgba(0, 0, 0, 0.2); border-color: transparent; background-color: rgb(238, 238, 238); color: transparent; width: 378px; height: 40px;" />
<button class="mb-8 xhs_0_mb-8 sk-pseudo sk-button" style="--button-bg-color: #F8F8F8; --button-color: #000000; --button-font-size: 18px; --button-display: block; --button-line-height: 2.55555556; --button-active-bg-color: #dedede; --button-active-color: rgba(0, 0, 0, 0.6); --button-border: 1px solid rgba(0, 0, 0, 0.2); --button-active-border-color: 1px solid rgba(0, 0, 0, 0.2); border-color: transparent; background-color: rgb(238, 238, 238); color: transparent; width: 378px; height: 40px;" />
</view>
</view>
</box>
</view>
</view>
</showbox>
<showbox style="border-color: rgb(238, 238, 238);">
<view class="xhs-demo-card xhs_1_xhs-demo-card" style="border-color: rgb(238, 238, 238);">
<view class="xhs-demo-card-title xhs_1_xhs-demo-card-title xhs-demo-card-spiver xhs_1_xhs-demo-card-spiver sk-pseudo" style="border-color: rgb(238, 238, 238);">
<view class="skeleton-text-block-mark" style="display: inline-block; background-image: linear-gradient(transparent 20%, rgb(238, 238, 238) 0%, rgb(238, 238, 238) 80%, transparent 0%); background-size: 100% 100%; position: relative; background-position-x: 0%;">
曝光埋点测试用，下滑直到按钮可见
</view>
</view>
<view class="xhs-demo-card-content xhs_1_xhs-demo-card-content" style="border-color: rgb(238, 238, 238);">
<box class="box xhs_0_box" style="border-color: rgb(238, 238, 238);">
<view style="padding: 16px; border-color: rgb(238, 238, 238);">
<scroll-view style="height: 300px; --scroll-view-scrollbar-width: 1px; --show-scroll-bar: block; border-color: rgb(238, 238, 238);" scroll-y="true" show-scrollbar="true" class="xhs-scroll-view-scroll-bar">
<view style="height: 500px; background-color: antiquewhite; border-color: rgb(238, 238, 238);" />
<view style="margin-top: 20px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; border-color: rgb(238, 238, 238);">
<view class="sk-button" style="width: 122px; height: 36px; background-color: rgb(238, 238, 238); color: transparent; border-color: transparent;" />
</view>
</scroll-view>
</view>
</box>
</view>
</view>
</showbox>
<view class="safe-area xhs_0_safe-area" style="border-color: rgb(238, 238, 238);" />
</view>

222
xhs-mini-demos/component-case/post-note-button/post-note-button.xhsml Normal file
View File

@@ -0,0 +1,222 @@
<view class="container">
<showbox title="type = floating 悬浮按钮，见屏幕下方">
<post-note-button
hidden="{{!showFloatingButton}}"
title="{{noteTitle}}"
content="{{noteContent}}"
type="floating"
binderror="bindError"
media-info="{{mediaInfo}}"
tags="{{tags}}"
></post-note-button>
</showbox>
<showbox title="type = default 面性按钮">
<box class="box">
<view class="flex items-center mb-20">
<text class="mr-20">size = medium</text>
<post-note-button
class="mr-20"
title="{{noteTitle}}"
content="{{noteContent}}"
binderror="bindError"
type="default"
media-info="{{mediaInfo}}"
tags="{{tags}}"
></post-note-button>
</view>
<view class="flex items-center">
<text class="mr-20">可自定义宽度</text>
<post-note-button
style="width: 250px;"
title="{{noteTitle}}"
content="{{noteContent}}"
binderror="bindError"
type="default"
media-info="{{mediaInfo}}"
tags="{{tags}}"
></post-note-button>
</view>
</box>
<box class="box">
<view class="flex items-center mb-20 w-full">
<text class="mr-20">size = large</text>
<view class="flex justify-center">
<post-note-button
class="mr-20"
title="{{noteTitle}}"
content="{{noteContent}}"
type="default"
size="large"
binderror="bindError"
media-info="{{mediaInfo}}"
tags="{{tags}}"
></post-note-button>
</view>
</view>
<view class="flex items-center">
<text class="mr-20">可自定义宽度</text>
<post-note-button
style="width: 250px;"
title="{{noteTitle}}"
content="{{noteContent}}"
type="default"
size="large"
binderror="bindError"
media-info="{{mediaInfo}}"
tags="{{tags}}"
></post-note-button>
</view>
</box>
</showbox>
<showbox title="type = plain 线性按钮">
<box class="box flex items-center">
<view class="flex items-center">
<text class="mr-20">size = medium</text>
<post-note-button
title="{{noteTitle}}"
content="{{noteContent}}"
type="plain"
binderror="bindError"
media-info="{{mediaInfo}}"
tags="{{tags}}"
></post-note-button>
</view>
</box>
<box class="box">
<view class="flex items-center">
<text class="mr-20">size = large</text>
<post-note-button
title="{{noteTitle}}"
content="{{noteContent}}"
type="plain"
size="large"
binderror="bindError"
media-info="{{mediaInfo}}"
tags="{{tags}}"
></post-note-button>
</view>
</box>
</showbox>
<showbox title="参数设置区域，设置发小红书配置按钮参数">
<box class="box">
<view class="mb-8">
笔记标题 title，最大长度 20
</view>
<view class="_ui-input">
<input
value="{{ noteTitle }}"
placeholder="输入笔记标题"
placeholder-style="color: #3333334D;"
bindinput="bindInputNoteTitle"
maxlength="-1"
bindfocus="bindFocus"
bindblur="bindBlur"
/>
</view>
</box>
<box class="box">
<view class="mb-8">
笔记内容 content，最大长度 1000
</view>
<view class="_ui-input">
<textarea
auto-height
value="{{ noteContent }}"
placeholder="输入笔记内容"
placeholder-style="color: #3333334D;"
bindinput="bindInputNoteContent"
maxlength="-1"
bindfocus="bindFocus"
bindblur="bindBlur"
/>
</view>
</box>
<box class="box">
<view class="mb-8">
话题 tags，使用英文逗号分割
</view>
<view class="_ui-input">
<input
value="{{ tags }}"
placeholder="话题，使用英文逗号分割"
placeholder-style="color: #3333334D;"
bindinput="bindInputTags"
maxlength="-1"
bindfocus="bindFocus"
bindblur="bindBlur"
/>
</view>
</box>
<box class="box">
<view class="mb-8">
快速调整 media-info
</view>
<view>
<button
class="mb-8"
bindtap="changeMediaInfoToImageResource"
>
调整到发布 1 张图片
</button>
<button
class="mb-8"
bindtap="changeMediaInfoToVideoResource"
>
调整到发布视频资源
</button>
<button
class="mb-8"
bindtap="changeMediaInfoToDifferentImageResource"
>
调整到图片为 18 张不同的
</button>
<button
class="mb-8"
bindtap="changeMediaInfoToSameImageResource"
>
调整到图片为 18 张一样的
</button>
<button
class="mb-8"
bindtap="changeMediaInfoTooLong"
>
调整到图片资源个数不符合要求（19）
</button>
</view>
</box>
<box class="box">
<view class="mb-8">
媒体信息，media-info（图片 1-18 张 / 视频 1 个）
</view>
<view class="_ui-input">
<textarea
value="{{ mediaInfo }}"
auto-height
placeholder="话题，使用英文逗号分割"
placeholder-style="color: #3333334D;"
bindinput="bindInputMediaInfo"
maxlength="-1"
bindfocus="bindFocus"
bindblur="bindBlur"
/>
</view>
</box>
</showbox>
<showbox title="曝光埋点测试用，下滑直到按钮可见">
<box class="box">
<scroll-view
style="height: 300px;"
scroll-y
show-scrollbar
>
<view style="height: 500px; background-color: antiquewhite;"></view>
<view
style="margin-top: 20px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center;"
>
<post-note-button></post-note-button>
</view>
</scroll-view>
</box>
</showbox>
<view class="safe-area"></view>
</view>