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

9
xhs-mini-demos/component-case/slider/slider.css Normal file
View File

@@ -0,0 +1,9 @@
slider {
margin: 0;
}
.slider-container > view {
margin: 20px 0;
}

114
xhs-mini-demos/component-case/slider/slider.js Normal file
View File

@@ -0,0 +1,114 @@
const __templateJs = require("./templates.js");
const __mergePageOptions = require("../../util/mergePageOptions.js");
const pageData = {
onShareAppMessage() {
return {
title: 'slider',
path: 'page/component/pages/slider/slider'
};
},
data: {
min: 0,
max: 100,
step: 1,
disabled: false,
value: 0,
color: '#e9e9e9',
selectedColor: '#1aad19',
activeColor: '#1aad19',
backgroundColor: 'transparent',
blockSize: 28,
blockColor: '#fff',
showValue: false,
onChangeValue: '',
onChangeingValue: ''
},
changeMin({
detail
}) {
this.setData({
min: detail.value
});
},
changeMax({
detail
}) {
this.setData({
max: detail.value
});
},
changeStep({
detail
}) {
this.setData({
step: detail.value
});
},
changeDisabled() {
this.setData({
disabled: !this.data.disabled
});
},
changeValue({
detail
}) {
this.setData({
value: detail.value
});
},
changeActiveColor({
detail
}) {
this.setData({
activeColor: detail.value
});
},
changeBackgroundColor({
detail
}) {
this.setData({
backgroundColor: detail.value
});
},
changeBlockSize({
detail
}) {
this.setData({
blockSize: detail.value
});
},
changeBlockColor({
detail
}) {
this.setData({
blockColor: detail.value
});
},
changeShowValue() {
this.setData({
showValue: !this.data.showValue
});
},
onChange({
detail
}) {
this.setData({
onChangeValue: detail.value
});
},
onChangeing({
detail
}) {
this.setData({
onChangeingValue: detail.value
});
}
};
for (let i = 1; i < 5; ++i) {
(function (index) {
pageData[`slider${index}change`] = function (e) {
console.log(`slider${index}发生change事件，携带值为`, e.detail.value);
};
})(i);
}
Page(__mergePageOptions(pageData, __templateJs));

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

@@ -0,0 +1,7 @@
{
"navigationBarTitleText": "滑动选择器",
"usingComponents": {
"showbox": "../../common/component/showbox/index",
"box": "../../common/component/container/index"
}
}

54
xhs-mini-demos/component-case/slider/slider.xhsml Normal file
View File

@@ -0,0 +1,54 @@
<view class="container">
<showbox>
<box>
<view class="_ui-space">
<view>
<text>基础样式</text>
<slider value="50" bindchange="slider3change" activeColor="#ff2442"/>
</view>
<view>
<text>带数据样式</text>
<slider value="50" bindchange="slider3change" show-value activeColor="#ff2442"/>
</view>
</view>
</box>
</showbox>
<showbox title="设置步长">
<box>
<view class="_ui-space">
<view>
<text>步长20</text>
<slider value="20" bindchange="slider2change" step="20" activeColor="#ff2442" show-value/>
</view>
<view>
<text>步长10</text>
<slider value="40" bindchange="slider2change" step="10" activeColor="#ff2442" show-value/>
</view>
<view>
<text>步长5</text>
<slider value="60" bindchange="slider2change" step="5" activeColor="#ff2442" show-value/>
</view>
</view>
</box>
</showbox>
<showbox title="设置最大/最小值">
<box>
<view class="_ui-space">
<view>
<text>最小值50</text>
<slider value="70" bindchange="slider4change" min="50" max="200" show-value activeColor="#ff2442"/>
</view>
<view>
<text>最大值200</text>
<slider value="200" bindchange="slider4change" min="50" max="200" show-value activeColor="#ff2442"/>
</view>
</view>
</box>
</showbox>
</view>
<include src="templates.xhsml" />

65
xhs-mini-demos/component-case/slider/templates.js Normal file
View File

@@ -0,0 +1,65 @@
/** 以下内容为自动生成，请勿手动修改 */
module.exports = {
data: {
page_data_0: 0,
page_data_1: 100,
page_data_2: 1,
page_data_3: false,
page_data_4: 0,
page_data_5: `#1aad19`,
page_data_6: `#e9e9e9`,
page_data_7: 28,
page_data_8: `#ffffff`,
page_data_9: false,
},
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);
},
};

159
xhs-mini-demos/component-case/slider/templates.xhsml Normal file
View File

@@ -0,0 +1,159 @@
<!-- 以下内容为自动生成，请勿手动修改 -->
<view class="container">
<showbox title="slider演示">
<box>
<view class="_ui-space">
<view>
<slider
min="{{page_data_0}}"
max="{{page_data_1}}"
step="{{page_data_2}}"
disabled="{{page_data_3}}"
value="{{page_data_4}}"
active-color="{{page_data_5}}"
background-color="{{page_data_6}}"
block-size="{{page_data_7}}"
block-color="{{page_data_8}}"
show-value="{{page_data_9}}"
>
</slider>
</view>
<view class="_dflex">
<view style="flex: 4" class="_dflex _ai_center"
><text>min</text></view
>
<view style="flex: 6" class="_ui-input">
<input
value="{{page_data_0}}"
placeholder="min"
type="text"
bindinput="page_fun_0"
/>
</view>
</view>
<view class="_dflex">
<view style="flex: 4" class="_dflex _ai_center"
><text>max</text></view
>
<view style="flex: 6" class="_ui-input">
<input
value="{{page_data_1}}"
placeholder="max"
type="text"
bindinput="page_fun_1"
/>
</view>
</view>
<view class="_dflex">
<view style="flex: 4" class="_dflex _ai_center"
><text>step</text></view
>
<view style="flex: 6" class="_ui-input">
<input
value="{{page_data_2}}"
placeholder="step"
type="text"
bindinput="page_fun_2"
/>
</view>
</view>
<view class="_dflex _jc_space-between">
<view class="_dflex _ai_center">
<text>是否开启disabled</text>
</view>
<switch
checked="{{page_data_3}}"
color="rgba(255, 36, 66, 1)"
bindchange="page_fun_3"
/>
</view>
<view class="_dflex">
<view style="flex: 4" class="_dflex _ai_center"
><text>value</text></view
>
<view style="flex: 6" class="_ui-input">
<input
value="{{page_data_4}}"
placeholder="value"
type="text"
bindinput="page_fun_4"
/>
</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_5}}"
placeholder="activeColor"
type="text"
bindinput="page_fun_5"
/>
</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_6}}"
placeholder="backgroundColor"
type="text"
bindinput="page_fun_6"
/>
</view>
</view>
<view class="_dflex">
<view style="flex: 4" class="_dflex _ai_center"
><text>blockSize</text></view
>
<view style="flex: 6" class="_ui-input">
<input
value="{{page_data_7}}"
placeholder="blockSize"
type="text"
bindinput="page_fun_7"
/>
</view>
</view>
<view class="_dflex">
<view style="flex: 4" class="_dflex _ai_center"
><text>blockColor</text></view
>
<view style="flex: 6" class="_ui-input">
<input
value="{{page_data_8}}"
placeholder="blockColor"
type="text"
bindinput="page_fun_8"
/>
</view>
</view>
<view class="_dflex _jc_space-between">
<view class="_dflex _ai_center">
<text>是否开启showValue</text>
</view>
<switch
checked="{{page_data_9}}"
color="rgba(255, 36, 66, 1)"
bindchange="page_fun_9"
/>
</view>
</view>
</box>
</showbox>
</view>