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/progress/progress.css Normal file
View File

@@ -0,0 +1,13 @@
.progress-box{
display: flex;
}
.progress-cancel{
margin-left: 20px;
}
.progress-container {
overflow: hidden;
}
.progress-container > view {
margin: 20px 0;
}

99
xhs-mini-demos/component-case/progress/progress.js Normal file
View File

@@ -0,0 +1,99 @@
const __templateJs = require("./templates.js");
const __mergePageOptions = require("../../util/mergePageOptions.js");
Page(__mergePageOptions({
onShareAppMessage() {
return {
title: 'progress',
path: 'page/component/pages/progress/progress'
};
},
data: {
percent: 20,
tmpPercent: 20,
showInfo: false,
borderRadius: 0,
fontSize: 16,
strokeWidth: 6,
activeColor: 'red',
backgroundColor: '#EBEBEB',
active: false,
activeMode: false,
// false:backwards true: forwards
duration: 30,
activeend: ''
},
changeTmpPercent({
detail
}) {
this.setData({
tmpPercent: detail.value
});
},
confirmChangePercent() {
this.setData({
percent: this.data.tmpPercent
});
},
changeShowInfo() {
this.setData({
showInfo: !this.data.showInfo
});
},
changeBorderRadius({
detail
}) {
this.setData({
borderRadius: parseInt(detail.value, 10)
});
},
changeFontSize({
detail
}) {
this.setData({
fontSize: parseInt(detail.value, 10)
});
},
changeStrokeWidth({
detail
}) {
this.setData({
strokeWidth: parseInt(detail.value, 10)
});
},
changeActiveColor({
detail
}) {
this.setData({
activeColor: detail.value
});
},
changeBackgroundColor({
detail
}) {
this.setData({
backgroundColor: detail.value
});
},
changeActive() {
this.setData({
active: !this.data.active
});
},
changeActiveMode() {
this.setData({
activeMode: !this.data.activeMode
});
},
changeDuration({
detail
}) {
this.setData({
duration: parseInt(detail.value, 10)
});
},
changeActiveend(e) {
this.setData({
activeend: JSON.stringify(e, null, 2)
});
}
}, __templateJs));

7
xhs-mini-demos/component-case/progress/progress.json Normal file
View File

@@ -0,0 +1,7 @@
{
"navigationBarTitleText": "进度条",
"usingComponents": {
"showbox": "../../common/component/showbox/index",
"box": "../../common/component/container/index"
}
}

40
xhs-mini-demos/component-case/progress/progress.xhsml Normal file
View File

@@ -0,0 +1,40 @@
<view class="container">
<showbox title="基础使用">
<box>
<view class="_ui-space">
<view>
<progress percent="20" active stroke-width="3" active-color="red"/>
</view>
<view>
<progress percent="40" active stroke-width="3" active-color="red"/>
</view>
<view>
<progress percent="60" active stroke-width="3" active-color="red"/>
</view>
<view>
<progress percent="80" active stroke-width="3" active-color="red"/>
</view>
</view>
</box>
</showbox>
<showbox title="显示进度">
<box>
<view style="height: 20px; overflow: hidden;display: flex;align-items: center;">
<progress percent="20" show-info stroke-width="3" active-color="red"/>
</view>
</box>
</showbox>
<showbox title="显示图标">
<box>
<view class="progress-box">
<progress percent="40" active stroke-width="3" active-color="red"/>
<icon class="progress-cancel" type="cancel"></icon>
</view>
</box>
</showbox>
</view>
<include src="templates.xhsml" />

71
xhs-mini-demos/component-case/progress/templates.js Normal file
View File

@@ -0,0 +1,71 @@
/** 以下内容为自动生成，请勿手动修改 */
module.exports = {
data: {
page_data_0: undefined,
page_data_1: false,
page_data_2: ``,
page_data_3: `16`,
page_data_4: `6`,
page_data_5: `#09BB07`,
page_data_6: `#09BB07`,
page_data_7: `#EBEBEB`,
page_data_8: false,
page_data_9: `backwards`,
page_data_10: 30,
},
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_2", e.detail.value);
},
page_fun_3(e) {
this.setData("page_data_3", e.detail.value);
},
page_fun_4(e) {
this.setData("page_data_4", e.detail.value);
},
page_fun_5(e) {
this.setData("page_data_5", e.detail.value);
},
page_fun_6(e) {
this.setData("page_data_6", e.detail.value);
},
page_fun_7(e) {
this.setData("page_data_7", e.detail.value);
},
page_fun_8(e) {
this.setData("page_data_8", e.detail.value);
},
page_fun_9(e) {
this.setData("page_data_9", e.detail.value);
},
page_fun_10(e) {
this.setData("page_data_10", e.detail.value);
},
};

173
xhs-mini-demos/component-case/progress/templates.xhsml Normal file
View File

@@ -0,0 +1,173 @@
<!-- 以下内容为自动生成，请勿手动修改 -->
<view class="container">
<showbox title="progress演示">
<box>
<view class="_ui-space">
<view>
<progress
percent="{{page_data_0}}"
show-info="{{page_data_1}}"
border-radius="{{page_data_2}}"
font-size="{{page_data_3}}"
stroke-width="{{page_data_4}}"
color="{{page_data_5}}"
active-color="{{page_data_6}}"
background-color="{{page_data_7}}"
active="{{page_data_8}}"
active-mode="{{page_data_9}}"
duration="{{page_data_10}}"
></progress>
</view>
<view class="_dflex">
<view style="flex: 4" class="_dflex _ai_center"
><text>percent</text></view
>
<view style="flex: 6" class="_ui-input">
<input
value="{{page_data_0}}"
placeholder="percent"
type="text"
bindinput="page_fun_0"
/>
</view>
</view>
<view class="_dflex _jc_space-between">
<view class="_dflex _ai_center">
<text>是否开启showInfo</text>
</view>
<switch
checked="{{page_data_1}}"
color="rgba(255, 36, 66, 1)"
bindchange="page_fun_1"
/>
</view>
<view class="_dflex">
<view style="flex: 4" class="_dflex _ai_center"
><text>borderRadius</text></view
>
<view style="flex: 6" class="_ui-input">
<input
value="{{page_data_2}}"
placeholder="borderRadius"
type="text"
bindinput="page_fun_2"
/>
</view>
</view>
<view class="_dflex">
<view style="flex: 4" class="_dflex _ai_center"
><text>fontSize</text></view
>
<view style="flex: 6" class="_ui-input">
<input
value="{{page_data_3}}"
placeholder="fontSize"
type="text"
bindinput="page_fun_3"
/>
</view>
</view>
<view class="_dflex">
<view style="flex: 4" class="_dflex _ai_center"
><text>strokeWidth</text></view
>
<view style="flex: 6" class="_ui-input">
<input
value="{{page_data_4}}"
placeholder="strokeWidth"
type="text"
bindinput="page_fun_4"
/>
</view>
</view>
<view class="_dflex">
<view style="flex: 4" class="_dflex _ai_center"
><text>color</text></view
>
<view style="flex: 6" class="_ui-input">
<input
value="{{page_data_5}}"
placeholder="color"
type="text"
bindinput="page_fun_5"
/>
</view>
</view>
<view class="_dflex">
<view style="flex: 4" class="_dflex _ai_center"
><text>activeColor</text></view
>
<view style="flex: 6" class="_ui-input">
<input
value="{{page_data_6}}"
placeholder="activeColor"
type="text"
bindinput="page_fun_6"
/>
</view>
</view>
<view class="_dflex">
<view style="flex: 4" class="_dflex _ai_center"
><text>backgroundColor</text></view
>
<view style="flex: 6" class="_ui-input">
<input
value="{{page_data_7}}"
placeholder="backgroundColor"
type="text"
bindinput="page_fun_7"
/>
</view>
</view>
<view class="_dflex _jc_space-between">
<view class="_dflex _ai_center">
<text>是否开启active</text>
</view>
<switch
checked="{{page_data_8}}"
color="rgba(255, 36, 66, 1)"
bindchange="page_fun_8"
/>
</view>
<view class="_dflex">
<view style="flex: 4" class="_dflex _ai_center"
><text>activeMode</text></view
>
<view style="flex: 6" class="_ui-input">
<input
value="{{page_data_9}}"
placeholder="activeMode"
type="text"
bindinput="page_fun_9"
/>
</view>
</view>
<view class="_dflex">
<view style="flex: 4" class="_dflex _ai_center"
><text>duration</text></view
>
<view style="flex: 6" class="_ui-input">
<input
value="{{page_data_10}}"
placeholder="duration"
type="text"
bindinput="page_fun_10"
/>
</view>
</view>
</view>
</box>
</showbox>
</view>