Skip to content

Commit 5336985

Browse files
WeilinerLWeilinerL
committed
feat: slider(docs)
1 parent 6dcc286 commit 5336985

File tree

14 files changed

+377
-8
lines changed

14 files changed

+377
-8
lines changed

‎example/app.mpx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,8 @@
5252
"./pages/loading/index",
5353
"./pages/input/index",
5454
"./pages/action-sheet/index",
55-
"./pages/tab-bar/index"
55+
"./pages/tab-bar/index",
56+
"./pages/slider/index"
5657
]
5758
if (__mpx_mode__ === 'ios' || __mpx_mode__ === 'android') {
5859
pages = [

‎example/pages/slider/README.md‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
## Cube-Slider
2+
3+
<card>
4+
5+
## 介绍 <span class="title-tag">已适配RN</span>
6+
7+
滑动选择器。（基于touch事件拖动滑块儿，请在移动端环境下体验）
8+
9+
</card>
10+
11+
### 示例
12+
13+
<card>
14+
15+
### 基本用法
16+
17+
<!-- @example: slider-default -->
18+
19+
</card>
20+
21+
<card>
22+
23+
### 设置step
24+
25+
<!-- @example: slider-step -> template -->
26+
27+
</card>
28+
29+
<card>
30+
31+
### 显示当前value
32+
33+
<!-- @example: slider-value -> template -->
34+
35+
</card>
36+
37+
<card>
38+
39+
### 设置最小值/最大值
40+
41+
<!-- @example: slider-min-max -> template -->
42+
43+
</card>
44+
45+
<card>
46+
47+
### 自定义滑块儿
48+
49+
<!-- @example: slider-slot show-style -->
50+
51+
</card>

‎example/pages/slider/index-ios.mpx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
2+
<template>
3+
<cube-slider
4+
value="{{ 30 }}"
5+
show-value="{{true}}"
6+
custom-content="{{false}}"
7+
bindchange="handleChange"
8+
bindchanging="handleChanging"
9+
>
10+
<view class="logo"></view>
11+
</cube-slider>
12+
</template>
13+
14+
<script>
15+
import { createPage } from '@mpxjs/core'
16+
17+
createPage({
18+
data: {
19+
currentValue: false
20+
},
21+
methods: {
22+
handleChange(e) {
23+
this.currentValue = e.detail.value
24+
console.log('change', this.currentValue)
25+
},
26+
handleChanging(e) {
27+
this.currentValue = e.detail.value
28+
console.log('changing', this.currentValue)
29+
}
30+
}
31+
})
32+
</script>
33+
34+
<style lang="stylus">
35+
.logo
36+
width 28px
37+
height 33px
38+
background-image url("data:image/png;base64,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")
39+
background-size 100%
40+
background-repeat no-repeat
41+
</style>
42+
43+
<script type="application/json">
44+
{
45+
"usingComponents": {
46+
"cube-slider": "@mpxjs/mpx-cube-ui/src/components/slider/index.mpx"
47+
}
48+
}
49+
</script>

‎example/pages/slider/index.mpx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<template>
2+
<base-container class="slider-view">
3+
<view class="content">
4+
<!-- default -->
5+
<view class="section">
6+
<view>基本用法</view>
7+
<slider-default></slider-default>
8+
</view>
9+
<!-- step -->
10+
<view class="section">
11+
<view>设置step</view>
12+
<slider-step></slider-step>
13+
</view>
14+
<!-- value -->
15+
<view class="section">
16+
<view>显示当前value</view>
17+
<slider-value></slider-value>
18+
</view>
19+
<!-- min max -->
20+
<view class="section">
21+
<view>设置最小值/最大值</view>
22+
<slider-min-max></slider-min-max>
23+
</view>
24+
<!-- slot -->
25+
<view class="section">
26+
<view>自定义滑块儿</view>
27+
<slider-slot></slider-slot>
28+
</view>
29+
</view>
30+
</base-container>
31+
</template>
32+
33+
<script>
34+
import { createPage } from '@mpxjs/core'
35+
36+
createPage({})
37+
</script>
38+
39+
<style lang="stylus">
40+
.slider-view
41+
height: 100vh
42+
.section
43+
margin: 0 -10px
44+
margin-bottom: 10px
45+
background-color: #f7f8fa
46+
</style>
47+
48+
<script type="application/json">
49+
{
50+
"usingComponents": {
51+
"base-container": "../../components/base-container/index.mpx",
52+
"slider-default": "./slider-default",
53+
"slider-slot": "./slider-slot",
54+
"slider-step": "./slider-step",
55+
"slider-value": "./slider-value",
56+
"slider-min-max": "./slider-min-max"
57+
}
58+
}
59+
</script>

‎example/pages/slider/slider-default.mpx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
2+
<template>
3+
<cube-slider
4+
bindchange="handleChange"
5+
bindchanging="handleChanging"
6+
>
7+
</cube-slider>
8+
</template>
9+
10+
<script>
11+
import { createComponent } from '@mpxjs/core'
12+
13+
createComponent({
14+
data: {
15+
currentValue: false
16+
},
17+
methods: {
18+
handleChange(e) {
19+
this.currentValue = e.detail.value
20+
console.log('change', this.currentValue)
21+
},
22+
handleChanging(e) {
23+
this.currentValue = e.detail.value
24+
console.log('changing', this.currentValue)
25+
}
26+
}
27+
})
28+
</script>
29+
30+
<script type="application/json">
31+
{
32+
"usingComponents": {
33+
"cube-slider": "@mpxjs/mpx-cube-ui/src/components/slider/index.mpx"
34+
}
35+
}
36+
</script>

‎example/pages/slider/slider-min-max.mpx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
2+
<template>
3+
<cube-slider
4+
min="{{ 50 }}"
5+
max="{{ 200 }}"
6+
show-value="{{true}}"
7+
bindchange="handleChange"
8+
bindchanging="handleChanging"
9+
>
10+
</cube-slider>
11+
</template>
12+
13+
<script>
14+
import { createComponent } from '@mpxjs/core'
15+
16+
createComponent({
17+
data: {
18+
currentValue: false
19+
},
20+
methods: {
21+
handleChange(e) {
22+
this.currentValue = e.detail.value
23+
console.log('change', this.currentValue)
24+
},
25+
handleChanging(e) {
26+
this.currentValue = e.detail.value
27+
console.log('changing', this.currentValue)
28+
}
29+
}
30+
})
31+
</script>
32+
33+
<style lang="stylus"></style>
34+
35+
<script type="application/json">
36+
{
37+
"usingComponents": {
38+
"cube-slider": "@mpxjs/mpx-cube-ui/src/components/slider/index.mpx"
39+
}
40+
}
41+
</script>

‎example/pages/slider/slider-slot.mpx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
2+
<template>
3+
<cube-slider
4+
value="{{ 30 }}"
5+
custom-content="{{true}}"
6+
bindchange="handleChange"
7+
bindchanging="handleChanging"
8+
>
9+
<view class="logo"></view>
10+
</cube-slider>
11+
</template>
12+
13+
<script>
14+
import { createComponent } from '@mpxjs/core'
15+
16+
createComponent({
17+
data: {
18+
currentValue: false
19+
},
20+
methods: {
21+
handleChange(e) {
22+
this.currentValue = e.detail.value
23+
console.log('change', this.currentValue)
24+
},
25+
handleChanging(e) {
26+
this.currentValue = e.detail.value
27+
console.log('changing', this.currentValue)
28+
}
29+
}
30+
})
31+
</script>
32+
33+
<style lang="stylus">
34+
.logo
35+
width 28px
36+
height 33px
37+
background-image url("https://gift-pypu-cdn.didistatic.com/static/driver_miniprogram/do1_E57CMf3cLCRJiq2VxPuT")
38+
background-size 100%
39+
background-repeat no-repeat
40+
background-position: 0 6px
41+
</style>
42+
43+
<script type="application/json">
44+
{
45+
"usingComponents": {
46+
"cube-slider": "@mpxjs/mpx-cube-ui/src/components/slider/index.mpx"
47+
}
48+
}
49+
</script>

‎example/pages/slider/slider-step.mpx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
2+
<template>
3+
<cube-slider
4+
step="{{ 5 }}"
5+
bindchange="handleChange"
6+
bindchanging="handleChanging"
7+
>
8+
</cube-slider>
9+
</template>
10+
11+
<script>
12+
import { createComponent } from '@mpxjs/core'
13+
14+
createComponent({
15+
data: {
16+
currentValue: false
17+
},
18+
methods: {
19+
handleChange(e) {
20+
this.currentValue = e.detail.value
21+
console.log('change', this.currentValue)
22+
},
23+
handleChanging(e) {
24+
this.currentValue = e.detail.value
25+
console.log('changing', this.currentValue)
26+
}
27+
}
28+
})
29+
</script>
30+
31+
<script type="application/json">
32+
{
33+
"usingComponents": {
34+
"cube-slider": "@mpxjs/mpx-cube-ui/src/components/slider/index.mpx"
35+
}
36+
}
37+
</script>

‎example/pages/slider/slider-value.mpx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
2+
<template>
3+
<cube-slider
4+
show-value="{{true}}"
5+
bindchange="handleChange"
6+
bindchanging="handleChanging"
7+
>
8+
</cube-slider>
9+
</template>
10+
11+
<script>
12+
import { createComponent } from '@mpxjs/core'
13+
14+
createComponent({
15+
data: {
16+
currentValue: false
17+
},
18+
methods: {
19+
handleChange(e) {
20+
this.currentValue = e.detail.value
21+
console.log('change', this.currentValue)
22+
},
23+
handleChanging(e) {
24+
this.currentValue = e.detail.value
25+
console.log('changing', this.currentValue)
26+
}
27+
}
28+
})
29+
</script>
30+
31+
<script type="application/json">
32+
{
33+
"usingComponents": {
34+
"cube-slider": "@mpxjs/mpx-cube-ui/src/components/slider/index.mpx"
35+
}
36+
}
37+
</script>

‎packages/mpx-cube-ui/src/common/stylus/theme/components/slider.styl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// @type slider
2-
$slider-active-color := #e8864c // 已选择的颜色
2+
$slider-active-color := $var(color-primary) // 已选择的颜色
33
$slider-background-color := #e9e9e9 // 背景条的颜色
44
$slider-block-color := #ffffff // 滑块的颜色
55
$slider-padding := 8px 0 // 轨道padding

0 commit comments

Comments
 (0)