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

36
xhs-mini-demos/component-case/rich-text/rich-text.css Normal file
View File

@@ -0,0 +1,36 @@
.page-content {
width: auto;
margin: 15px 0;
padding: 0 25px;
}
.code-fragment {
height: 325px;
}
.code-textarea {
width: auto;
height: 325px;
border: 1px solid #1AAD19;
}
.p {
color: #1AAD19;
margin-top: 15px;
}
.space {
display: inline-block;
background: red;
width: 5px;
}
scroll-view {
height: 325px;
border: 1px solid red;
white-space: pre;
padding: 5px;
box-sizing: border-box;
border-radius: 8px;
color: #777777;
}

97
xhs-mini-demos/component-case/rich-text/rich-text.js Normal file
View File

@@ -0,0 +1,97 @@
const __templateJs = require("./templates.js");
const __mergePageOptions = require("../../util/mergePageOptions.js");
const htmlSnip = `<div class="div_class">
<h1>Title</h1>
<p class="p">
Life is&nbsp;<i>like</i>&nbsp;a box of
<b>&nbsp;chocolates</b>.
</p>
</div>
`;
const nodeSnip = `Page({
data: {
nodes: [{
name: 'div',
attrs: {
class: 'div_class',
style: 'line-height: 60rpx; color: #1AAD19;'
},
children: [{
type: 'text',
text: 'You never know what you're gonna get.'
}]
}]
}
})
`;
Page(__mergePageOptions({
onShareAppMessage() {
return {
title: 'rich-text',
path: 'page/component/pages/rich-text/rich-text'
};
},
onLoad() {
setTimeout(() => {
this.removeSkeleton?.();
}, 1000);
},
data: {
htmlSnip,
nodeSnip,
renderedByHtml: false,
renderedByNode: false,
nodes: [{
name: 'div',
attrs: {
class: 'div_class',
style: 'line-height: 60rpx; color: red;'
},
children: [{
type: 'text',
text: 'You never know what you\'re gonna get.'
}]
}],
rt1: `
<h1>h1标题</h1>
<h2>h2标题</h2>
<h3>h3标题</h3>
<h4>h4标题</h4>
<h5>h5标题</h5>
<h6>h6标题</h6>
<hr />
<i>斜体</i>
<br />
<img alt="alt" src="http://www.3xiayou.com/upload/upload/1528174589.jpg" width="100px" height="100px" />
<br />
<p>这是一个段落p标签</p>
<br />
<q>引号标签</q>
<br />
<span>span标签</span>
<br />
<strong>strong标签</strong>
<br />
<sub>sub标签</sub>
<br />
<sup>sup标签</sup>
<br />
`
},
renderHtml() {
this.setData({
renderedByHtml: true
});
},
renderNode() {
this.setData({
renderedByNode: true
});
},
enterCode(e) {
console.log(e.detail.value);
this.setData({
htmlSnip: e.detail.value
});
}
}, __templateJs));

1
xhs-mini-demos/component-case/rich-text/rich-text.json Normal file
View File

@@ -0,0 +1 @@
{"navigationBarTitleText":"富文本","usingComponents":{"showbox":"../../common/component/showbox/index","box":"../../common/component/container/index"}}

14
xhs-mini-demos/component-case/rich-text/rich-text.skeleton.css Normal file
View File

@@ -0,0 +1,14 @@
.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; }
::-webkit-scrollbar { width: 1px; }::-webkit-scrollbar-track { background: rgb(241, 241, 241); }::-webkit-scrollbar-thumb { background: rgb(136, 136, 136); }
:host { display: block; }img { display: inline-block; max-width: 100%; height: auto; }
:host { display: block; }img { display: inline-block; max-width: 100%; height: auto; }
:host { display: block; }img { display: inline-block; max-width: 100%; height: auto; }
.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_page-content { width: auto; margin: 15px 0px; padding: 0px 25px; }.xhs_0_code-fragment { height: 325px; }.xhs_0_code-textarea { width: auto; height: 325px; border: 1px solid rgb(26, 173, 25); }.xhs_0_p { color: rgb(26, 173, 25); margin-top: 15px; }.xhs_0_space { display: inline-block; background: red; width: 5px; }xhs-scroll-view { height: 325px; border: 1px solid red; white-space: pre; padding: 5px; box-sizing: border-box; border-radius: 8px; color: rgb(119, 119, 119); }
.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%; }

205
xhs-mini-demos/component-case/rich-text/rich-text.skeleton.xhsml Normal file
View File

File diff suppressed because one or more lines are too long

21
xhs-mini-demos/component-case/rich-text/rich-text.xhsml Normal file
View File

@@ -0,0 +1,21 @@
<view class="container">
<showbox title="通过HTML文本渲染">
<box pad="10px">
<rich-text nodes="{{rt1}}"></rich-text>
</box>
</showbox>
<showbox title="通过节点渲染">
<box pad="10px">
<scroll-view scroll-x style="width: auto;">
<view>
{{nodeSnip}}
</view>
</scroll-view>
<view>渲染效果：</view>
<rich-text nodes="{{nodes}}" style="overflow: hidden;"></rich-text>
</box>
</showbox>
</view>
<include src="templates.xhsml" />

19
xhs-mini-demos/component-case/rich-text/templates.js Normal file
View File

@@ -0,0 +1,19 @@
/** 以下内容为自动生成，请勿手动修改 */
module.exports = {
data: {
page_data_0: `
<div class="div_class">
<h1>Title</h1>
<p class="p">
Life is&nbsp;<i>like</i>&nbsp;a box of
<b>&nbsp;chocolates</b>.
</p>
</div>
`,
},
page_fun_0(e) {
this.setData("page_data_0", e.detail.value);
},
};

27
xhs-mini-demos/component-case/rich-text/templates.xhsml Normal file
View File

@@ -0,0 +1,27 @@
<!-- 以下内容为自动生成，请勿手动修改 -->
<view class="container">
<showbox title="rich-text演示">
<box>
<view class="_ui-space">
<view>
<rich-text nodes="{{page_data_0}}"> </rich-text>
</view>
<view class="_dflex">
<view style="flex: 4" class="_dflex _ai_center"
><text>nodes</text></view
>
<view style="flex: 6" class="_ui-input">
<input
value="{{page_data_0}}"
placeholder="nodes"
type="text"
bindinput="page_fun_0"
/>
</view>
</view>
</view>
</box>
</showbox>
</view>