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

13
xhs-mini-demos/component-case/image/image.css Normal file
View File

@@ -0,0 +1,13 @@
.page-section-ctn {
text-align: center;
}
.image {
margin-top: 15px;
width: 345px;
height: 225px;
}
.test {
border-radius: 10px;
}

95
xhs-mini-demos/component-case/image/image.js Normal file
View File

@@ -0,0 +1,95 @@
const __templateJs = require("./templates.js");
const __mergePageOptions = require("../../util/mergePageOptions.js");
Page(__mergePageOptions({
onShareAppMessage() {
return {
title: 'image',
path: 'page/component/pages/image/image'
};
},
data: {
apiData: {
content: '',
success: false,
fail: false,
complete: false
},
imageUrl: 'https://ci.xiaohongshu.com/83074709-0d05-4d1c-9d38-24a8e910d914',
webpImageURL: 'https://picasso-static.xiaohongshu.com/fe-platform/a30616b87ce2fcb1d9fd76a9e1b1e18d3b64aa53.webp',
array: [{
mode: 'scaleToFill',
text: 'scaleToFill：不保持纵横比缩放图片，使图片完全适应'
}, {
mode: 'aspectFit',
text: 'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来'
}, {
mode: 'aspectFill',
text: 'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来'
}, {
mode: 'top',
text: 'top：不缩放图片，只显示图片的顶部区域'
}, {
mode: 'bottom',
text: 'bottom：不缩放图片，只显示图片的底部区域'
}, {
mode: 'center',
text: 'center：不缩放图片，只显示图片的中间区域'
}, {
mode: 'left',
text: 'left：不缩放图片，只显示图片的左边区域'
}, {
mode: 'right',
text: 'right：不缩放图片，只显示图片的右边边区域'
}, {
mode: 'top left',
text: 'top left：不缩放图片，只显示图片的左上边区域'
}, {
mode: 'top right',
text: 'top right：不缩放图片，只显示图片的右上边区域'
}, {
mode: 'bottom left',
text: 'bottom left：不缩放图片，只显示图片的左下边区域'
}, {
mode: 'bottom right',
text: 'bottom right：不缩放图片，只显示图片的右下边区域'
}],
src: 'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg'
},
resetApiData() {
this.setData({
apiData: {
success: false,
fail: false,
complete: false,
content: ''
}
});
},
updateApiData(content) {
const apiData = {
...this.data.apiData
};
apiData.success = true;
apiData.content = `${content}`;
this.setData({
apiData
});
},
onError(e) {
this.resetApiData();
this.updateApiData(JSON.stringify({
e,
msg: '图片加载失败'
}));
},
onLoad(e) {
this.resetApiData();
this.updateApiData(JSON.stringify({
e,
msg: '图片onLoad'
}));
setTimeout(() => {
this.removeSkeleton?.();
}, 1000);
}
}, __templateJs));

8
xhs-mini-demos/component-case/image/image.json Normal file
View File

@@ -0,0 +1,8 @@
{
"navigationBarTitleText": "图片",
"usingComponents": {
"showbox": "../../common/component/showbox/index",
"box": "../../common/component/container/index"
},
"skeleton": { "path": "./image.skeleton.xhsml" }
}

11
xhs-mini-demos/component-case/image/image.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; }
::-webkit-scrollbar { width: 1px; }::-webkit-scrollbar-track { background: rgb(241, 241, 241); }::-webkit-scrollbar-thumb { background: rgb(136, 136, 136); }
.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-section-ctn { text-align: center; }.xhs_0_image { margin-top: 15px; width: 345px; height: 225px; }.xhs_0_test { border-radius: 10px; }
.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%; }

266
xhs-mini-demos/component-case/image/image.skeleton.xhsml Normal file
View File

@@ -0,0 +1,266 @@
<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" 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: 99.1238% 100%; position: relative; background-position-x: 0%;">
scaleToFill：不保持纵横比缩放图片，使图片完全适应
</view>
</view>
<view class="xhs-demo-card-content xhs_1_xhs-demo-card-content" style="border-color: rgb(238, 238, 238);">
<box style="border-color: rgb(238, 238, 238);">
<view style="padding: 16px; border-color: rgb(238, 238, 238);">
<image mode="scaleToFill" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="width: 200px; height: 200px; background-color: rgb(238, 238, 238); border-color: rgb(238, 238, 238);" class="" width="200" height="200" />
</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" 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% 0.198rem; position: relative;">
aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来
<span style="display: inline-block; width: 50%; height: 18px; background: rgb(255, 255, 255); position: absolute; bottom: 0px; right: 0px;" />
</view>
</view>
<view class="xhs-demo-card-content xhs_1_xhs-demo-card-content" style="border-color: rgb(238, 238, 238);">
<box style="border-color: rgb(238, 238, 238);">
<view style="padding: 16px; border-color: rgb(238, 238, 238);">
<image mode="aspectFit" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="width: 200px; height: 200px; background-color: rgb(238, 238, 238); border-color: rgb(238, 238, 238);" class="" width="200" height="200" />
</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" 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% 0.198rem; position: relative;">
aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来
<span style="display: inline-block; width: 50%; height: 18px; background: rgb(255, 255, 255); position: absolute; bottom: 0px; right: 0px;" />
</view>
</view>
<view class="xhs-demo-card-content xhs_1_xhs-demo-card-content" style="border-color: rgb(238, 238, 238);">
<box style="border-color: rgb(238, 238, 238);">
<view style="padding: 16px; border-color: rgb(238, 238, 238);">
<image mode="aspectFill" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="width: 200px; height: 200px; background-color: rgb(238, 238, 238); border-color: rgb(238, 238, 238);" class="" width="200" height="200" />
</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" 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: 99.702% 100%; position: relative; background-position-x: 0%;">
top：不缩放图片，只显示图片的顶部区域
</view>
</view>
<view class="xhs-demo-card-content xhs_1_xhs-demo-card-content" style="border-color: rgb(238, 238, 238);">
<box style="border-color: rgb(238, 238, 238);">
<view style="padding: 16px; border-color: rgb(238, 238, 238);">
<image mode="top" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" observe-id="3" style="width: 200px; height: 200px; background-color: rgb(238, 238, 238); border-color: rgb(238, 238, 238);" width="200" height="200" />
</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" 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: 99.4648% 100%; position: relative; background-position-x: 0%;">
bottom：不缩放图片，只显示图片的底部区域
</view>
</view>
<view class="xhs-demo-card-content xhs_1_xhs-demo-card-content" style="border-color: rgb(238, 238, 238);">
<box style="border-color: rgb(238, 238, 238);">
<view style="padding: 16px; border-color: rgb(238, 238, 238);">
<image mode="bottom" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" observe-id="4" style="width: 200px; height: 200px; background-color: rgb(238, 238, 238); border-color: rgb(238, 238, 238);" width="200" height="200" />
</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" 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: 99.4371% 100%; position: relative; background-position-x: 0%;">
center：不缩放图片，只显示图片的中间区域
</view>
</view>
<view class="xhs-demo-card-content xhs_1_xhs-demo-card-content" style="border-color: rgb(238, 238, 238);">
<box style="border-color: rgb(238, 238, 238);">
<view style="padding: 16px; border-color: rgb(238, 238, 238);">
<image mode="center" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" observe-id="5" style="width: 200px; height: 200px; background-color: rgb(238, 238, 238); border-color: rgb(238, 238, 238);" width="200" height="200" />
</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" 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: 99.5946% 100%; position: relative; background-position-x: 0%;">
left：不缩放图片，只显示图片的左边区域
</view>
</view>
<view class="xhs-demo-card-content xhs_1_xhs-demo-card-content" style="border-color: rgb(238, 238, 238);">
<box style="border-color: rgb(238, 238, 238);">
<view style="padding: 16px; border-color: rgb(238, 238, 238);">
<image mode="left" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" observe-id="6" style="width: 200px; height: 200px; background-color: rgb(238, 238, 238); border-color: rgb(238, 238, 238);" width="200" height="200" />
</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" 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: 99.5362% 100%; position: relative; background-position-x: 0%;">
right：不缩放图片，只显示图片的右边边区域
</view>
</view>
<view class="xhs-demo-card-content xhs_1_xhs-demo-card-content" style="border-color: rgb(238, 238, 238);">
<box style="border-color: rgb(238, 238, 238);">
<view style="padding: 16px; border-color: rgb(238, 238, 238);">
<image mode="right" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" observe-id="7" style="width: 200px; height: 200px; background-color: rgb(238, 238, 238); border-color: rgb(238, 238, 238);" width="200" height="200" />
</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" 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: 99.3884% 100%; position: relative; background-position-x: 0%;">
top left：不缩放图片，只显示图片的左上边区域
</view>
</view>
<view class="xhs-demo-card-content xhs_1_xhs-demo-card-content" style="border-color: rgb(238, 238, 238);">
<box style="border-color: rgb(238, 238, 238);">
<view style="padding: 16px; border-color: rgb(238, 238, 238);">
<image mode="top left" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" observe-id="8" style="width: 200px; height: 200px; background-color: rgb(238, 238, 238); border-color: rgb(238, 238, 238);" width="200" height="200" />
</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" 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: 99.3225% 100%; position: relative; background-position-x: 0%;">
top right：不缩放图片，只显示图片的右上边区域
</view>
</view>
<view class="xhs-demo-card-content xhs_1_xhs-demo-card-content" style="border-color: rgb(238, 238, 238);">
<box style="border-color: rgb(238, 238, 238);">
<view style="padding: 16px; border-color: rgb(238, 238, 238);">
<image mode="top right" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" observe-id="9" style="width: 200px; height: 200px; background-color: rgb(238, 238, 238); border-color: rgb(238, 238, 238);" width="200" height="200" />
</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" 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: 99.2013% 100%; position: relative; background-position-x: 0%;">
bottom left：不缩放图片，只显示图片的左下边区域
</view>
</view>
<view class="xhs-demo-card-content xhs_1_xhs-demo-card-content" style="border-color: rgb(238, 238, 238);">
<box style="border-color: rgb(238, 238, 238);">
<view style="padding: 16px; border-color: rgb(238, 238, 238);">
<image mode="bottom left" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" observe-id="10" style="width: 200px; height: 200px; background-color: rgb(238, 238, 238); border-color: rgb(238, 238, 238);" width="200" height="200" />
</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" 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: 99.1478% 100%; position: relative; background-position-x: 0%;">
bottom right：不缩放图片，只显示图片的右下边区域
</view>
</view>
<view class="xhs-demo-card-content xhs_1_xhs-demo-card-content" style="border-color: rgb(238, 238, 238);">
<box style="border-color: rgb(238, 238, 238);">
<view style="padding: 16px; border-color: rgb(238, 238, 238);">
<image mode="bottom right" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" observe-id="11" style="width: 200px; height: 200px; background-color: rgb(238, 238, 238); border-color: rgb(238, 238, 238);" width="200" height="200" />
</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" 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 style="border-color: rgb(238, 238, 238);">
<view style="padding: 16px; border-color: rgb(238, 238, 238);">
<view class="section__ctn xhs_0_section__ctn" style="border-color: rgb(238, 238, 238);">
<image src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" observe-id="12" style="width: 200px; height: 200px; background-color: rgb(238, 238, 238); border-color: rgb(238, 238, 238);" width="200" height="200" />
</view>
</view>
</box>
</view>
</view>
</showbox>
</view>
<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" 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.0651% 100%; position: relative; background-position-x: 0%;">
image演示
</view>
</view>
<view class="xhs-demo-card-content xhs_1_xhs-demo-card-content" style="border-color: rgb(238, 238, 238);">
<box style="border-color: rgb(238, 238, 238);">
<view style="padding: 16px; border-color: rgb(238, 238, 238);">
<view class="_ui-space xhs_0__ui-space" style="border-color: rgb(238, 238, 238);">
<view style="border-color: rgb(238, 238, 238);">
<image src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" mode="scaleToFill" lazy-load="" observe-id="13" width="320" height="225" style="border-color: rgb(238, 238, 238); background-color: rgb(238, 238, 238);" />
</view>
<view class="_dflex xhs_0__dflex" style="border-color: rgb(238, 238, 238);">
<view class="_dflex xhs_0__dflex _ai_center xhs_0__ai_center" style="flex: 4 1 0%; border-color: rgb(238, 238, 238);">
<text style="--text-display: inline; --text-selectable: none; opacity: 0;">
src
</text>
</view>
<view class="_ui-input xhs_0__ui-input" style="flex: 6 1 0%; border-color: rgb(238, 238, 238);">
<view style="width: 207.602px; height: 22px; background-color: rgb(238, 238, 238);" />
</view>
</view>
<view class="_dflex xhs_0__dflex" style="border-color: rgb(238, 238, 238);">
<view class="_dflex xhs_0__dflex _ai_center xhs_0__ai_center" style="flex: 4 1 0%; border-color: rgb(238, 238, 238);">
<text 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%;" class="skeleton-text-block-mark">
mode
</text>
</view>
<view class="_ui-input xhs_0__ui-input" style="flex: 6 1 0%; border-color: rgb(238, 238, 238);">
<picker range="scaleToFill,aspectFit,aspectFill,widthFix,heightFix,top,bottom,center,left,right,top left,top right,bottom left,bottom right" value="0" class="skeleton-text-block-mark" style="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: 31.0917% 100%; position: relative; background-position-x: 0%;">
scaleToFill
</picker>
</view>
</view>
<view class="_dflex xhs_0__dflex _jc_space-between xhs_0__jc_space-between" style="border-color: rgb(238, 238, 238);">
<view class="_dflex xhs_0__dflex _ai_center xhs_0__ai_center" style="border-color: rgb(238, 238, 238);">
<text 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%;" class="skeleton-text-block-mark">
是否开启lazyLoad
</text>
</view>
<view style="width: 57px; height: 32px; background-color: rgb(238, 238, 238); display: block;" />
</view>
</view>
</view>
</box>
</view>
</view>
</showbox>
</view>

17
xhs-mini-demos/component-case/image/image.xhsml Normal file
View File

@@ -0,0 +1,17 @@
<view class="container">
<showbox title="{{item.text}}" xhs:for="{{array}}" xhs:for-item="item">
<box>
{{isLazyLoad}}
<image bindtap="onClick" lazyLoad="{{isLazyLoad}}" style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{src}}" animation="{{animation}}"></image>
</box>
</showbox>
<showbox title="图片加载失败">
<box>
<view class="section__ctn">
<image style="width: 200px; height: 200px; background-color: #eeeeee;" src="http://404.com" binderror="onError"></image>
</view>
</box>
</showbox>
</view>
<include src="templates.xhsml" />

9
xhs-mini-demos/component-case/image/image2/index.css Normal file
View File

@@ -0,0 +1,9 @@
.page-section-ctn {
text-align: center;
}
.image {
margin-top: 15px;
width: 345px;
height: 225px;
}

13
xhs-mini-demos/component-case/image/image2/index.js Normal file
View File

@@ -0,0 +1,13 @@
Page({
onShareAppMessage() {
return {
title: 'image',
path: 'page/component/pages/image/image',
};
},
data: {
imageUrl: 'https://ci.xiaohongshu.com/83074709-0d05-4d1c-9d38-24a8e910d914',
webpImageURL:
'https://picasso-static.xiaohongshu.com/fe-platform/a30616b87ce2fcb1d9fd76a9e1b1e18d3b64aa53.webp',
},
});

3
xhs-mini-demos/component-case/image/image2/index.json Normal file
View File

@@ -0,0 +1,3 @@
{
"navigationBarTitleText": "image-index"
}

32
xhs-mini-demos/component-case/image/image2/index.xhsml Normal file
View File

@@ -0,0 +1,32 @@
<view class="container">
<view class="page-head">
<view class="page-head-title">image</view>
<view class="page-head-line"></view>
<view xhs:if="{{desc}}" class="page-head-desc">{{desc}}</view>
</view>
<view class="page-body">
<view class="page-section page-section-gap">
<view class="page-section-title">Local Image</view>
<view class="page-section-ctn">
<image class="image" src="../../resources/pic/1.jpg"/>
</view>
</view>
<view class="page-section page-section-gap">
<view class="page-section-title">Internet Image</view>
<view class="page-section-ctn">
<image class="image" src="{{imageUrl}}"/>
</view>
</view>
<view class="page-section page-section-gap">
<view class="page-section-title">Webp Image</view>
<view class="page-section-ctn">
<image class="image" webp src="{{webpImageURL}}" mode="aspectFit"/>
</view>
</view>
</view>
<navigator class="page-foot" openType="switchTab" url="/page/component/index" hover-class="none">
<image class="icon-foot" src="../../../../image/icon_foot.png"></image>
</navigator>
</view>

40
xhs-mini-demos/component-case/image/templates.js Normal file
View File

@@ -0,0 +1,40 @@
/** 以下内容为自动生成，请勿手动修改 */
module.exports = {
data: {
page_data_0: `https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg`,
page_data_1: 0,
page_data_2: [
"scaleToFill",
"aspectFit",
"aspectFill",
"widthFix",
"heightFix",
"top",
"bottom",
"center",
"left",
"right",
"top left",
"top right",
"bottom left",
"bottom right",
],
page_data_3: true,
},
page_fun_0(e) {
this.setData("page_data_0", e.detail.value);
},
page_fun_1(e) {
this.setData("page_data_1", e.detail.value);
},
page_fun_2(e) {
this.setData("page_data_3", e.detail.value);
},
};

58
xhs-mini-demos/component-case/image/templates.xhsml Normal file
View File

@@ -0,0 +1,58 @@
<!-- 以下内容为自动生成，请勿手动修改 -->
<view class="container">
<showbox title="image演示">
<box>
<view class="_ui-space">
<view>
<image
src="{{page_data_0}}"
mode="{{page_data_2[page_data_1]}}"
lazy-load="{{page_data_3}}"
>
</image>
</view>
<view class="_dflex">
<view style="flex: 4" class="_dflex _ai_center"
><text>src</text></view
>
<view style="flex: 6" class="_ui-input">
<input
value="{{page_data_0}}"
placeholder="src"
type="text"
bindinput="page_fun_0"
/>
</view>
</view>
<view class="_dflex">
<view style="flex: 4" class="_dflex _ai_center"
><text>mode</text></view
>
<view style="flex: 6" class="_ui-input">
<picker
value="{{page_data_1}}"
range="{{page_data_2}}"
bindchange="page_fun_1"
>
{{page_data_2[page_data_1] ?? '请选择'}}
</picker>
</view>
</view>
<view class="_dflex _jc_space-between">
<view class="_dflex _ai_center">
<text>是否开启lazyLoad</text>
</view>
<switch
checked="{{page_data_3}}"
color="rgba(255, 36, 66, 1)"
bindchange="page_fun_2"
/>
</view>
</view>
</box>
</showbox>
</view>