Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
uni-app
提交
e8acbe4d
U
uni-app
项目概览
DCloud
/
uni-app
2 个月 前同步成功
通知
715
Star
38705
Fork
3642
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
7
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
7
Issue
7
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
e8acbe4d
编写于
8月 08, 2019
作者:
W
wangjiang-ide
提交者:
GitHub
8月 08, 2019
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Create slider.js
上级
1b3fb12a
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
332 addition
and
0 deletion
+332
-0
src/platforms/app-plus-nvue/runtime/components/slider.js
src/platforms/app-plus-nvue/runtime/components/slider.js
+332
-0
未找到文件。
src/platforms/app-plus-nvue/runtime/components/slider.js
0 → 100644
浏览文件 @
e8acbe4d
import
{
emitter
,
listeners
}
from
'
../mixins
'
function
getSlider
(
weex
)
{
return
{
name
:
'
U-Slider
'
,
mixins
:
[
emitter
,
listeners
],
props
:
{
name
:
{
type
:
String
,
default
:
''
},
min
:
{
type
:
[
Number
,
String
],
default
:
0
},
max
:
{
type
:
[
Number
,
String
],
default
:
100
},
value
:
{
type
:
[
Number
,
String
],
default
:
0
},
step
:
{
type
:
[
Number
,
String
],
default
:
1
},
disabled
:
{
type
:
[
Boolean
,
String
],
default
:
false
},
color
:
{
type
:
String
,
default
:
'
#e9e9e9
'
},
backgroundColor
:
{
type
:
String
,
default
:
'
#e9e9e9
'
},
activeColor
:
{
type
:
String
,
default
:
'
#007aff
'
},
selectedColor
:
{
type
:
String
,
default
:
'
#007aff
'
},
blockColor
:
{
type
:
String
,
default
:
'
#ffffff
'
},
blockSize
:
{
type
:
[
Number
,
String
],
default
:
28
},
showValue
:
{
type
:
[
Boolean
,
String
],
default
:
false
}
},
data
()
{
return
{
left
:
0
,
width
:
0
,
sliderValue
:
Number
(
this
.
value
),
sliderThumbValue
:
0
}
},
computed
:
{
trackStyle
()
{
return
{
backgroundColor
:
this
.
_getBgColor
()
}
},
trackActiveStyle
()
{
return
{
backgroundColor
:
this
.
_getActiveColor
(),
width
:
this
.
thumbValue
+
'
px
'
}
},
thumbStyle
()
{
return
{
width
:
this
.
blockSize
+
'
px
'
,
height
:
this
.
blockSize
+
'
px
'
,
marginTop
:
-
this
.
blockSize
/
2
+
'
px
'
,
left
:
this
.
thumbValue
+
'
px
'
,
backgroundColor
:
this
.
blockColor
}
},
thumbValue
()
{
return
(
this
.
sliderValue
-
Number
(
this
.
min
))
/
(
Number
(
this
.
max
)
-
Number
(
this
.
min
))
*
this
.
width
}
},
watch
:
{
value
(
val
)
{
this
.
sliderValue
=
Number
(
val
)
}
},
mounted
()
{
this
.
_x0
=
0
this
.
_x1
=
0
this
.
$eventOld
=
null
setTimeout
(()
=>
{
const
dom
=
weex
.
requireModule
(
'
dom
'
)
dom
.
getComponentRect
(
this
.
$refs
[
'
slider-track
'
],
res
=>
{
this
.
left
=
res
.
size
.
left
this
.
width
=
res
.
size
.
width
})
},
50
)
},
created
()
{
this
.
$dispatch
(
'
Form
'
,
'
uni-form-group-update
'
,
{
type
:
'
add
'
,
vm
:
this
})
},
beforeDestroy
()
{
this
.
$dispatch
(
'
Form
'
,
'
uni-form-group-update
'
,
{
type
:
'
remove
'
,
vm
:
this
})
},
methods
:
{
_handleStart
(
e
)
{
if
(
e
.
changedTouches
.
length
===
1
&&
!
this
.
_$eventOld
)
{
this
.
_$eventOld
=
e
const
px
=
e
.
changedTouches
[
0
].
pageX
this
.
_x0
=
this
.
_x1
=
px
this
.
_onTrack
(
'
start
'
,
px
)
}
},
_handleMove
(
e
)
{
if
(
e
.
changedTouches
.
length
===
1
&&
this
.
_$eventOld
)
{
const
px
=
e
.
changedTouches
[
0
].
pageX
this
.
_onTrack
(
'
move
'
,
px
)
this
.
_x1
=
px
}
},
_handleEnd
(
e
)
{
if
(
e
.
changedTouches
.
length
===
1
&&
this
.
_$eventOld
)
{
const
px
=
e
.
changedTouches
[
0
].
pageX
this
.
_$eventOld
=
null
this
.
_onTrack
(
'
end
'
,
px
)
}
},
_onTrack
:
function
(
state
,
x
)
{
if
(
!
this
.
disabled
)
{
if
(
state
===
'
move
'
)
{
this
.
_onUserChangedValue
({
x
:
x
})
this
.
$trigger
(
'
changing
'
,
{
value
:
this
.
sliderValue
})
}
else
if
(
state
===
'
end
'
)
{
this
.
_onUserChangedValue
({
x
:
x
})
this
.
$trigger
(
'
change
'
,
{
value
:
this
.
sliderValue
})
}
}
},
_onUserChangedValue
(
e
)
{
let
x
=
e
.
x
if
(
x
<
0
)
{
x
=
0
}
if
(
x
>
this
.
width
)
{
x
=
this
.
width
}
this
.
sliderValue
=
this
.
_filterValue
(
x
)
},
_filterValue
(
x
)
{
let
value
=
(
x
/
this
.
width
)
*
(
Number
(
this
.
max
)
-
Number
(
this
.
min
))
const
step
=
Number
(
this
.
step
)
if
(
step
>
0
&&
value
>
step
&&
(
value
%
step
)
/
step
!==
0
)
{
value
-=
value
%
step
}
return
parseInt
(
value
+
Number
(
this
.
min
))
},
_getBgColor
()
{
return
this
.
backgroundColor
!==
'
#e9e9e9
'
?
this
.
backgroundColor
:
this
.
color
!==
'
#007aff
'
?
this
.
color
:
'
#007aff
'
},
_getActiveColor
()
{
return
this
.
activeColor
!==
'
#007aff
'
?
this
.
activeColor
:
this
.
selectedColor
!==
'
#e9e9e9
'
?
this
.
selectedColor
:
'
#e9e9e9
'
},
_resetFormData
()
{
this
.
sliderValue
=
this
.
min
},
_getFormData
()
{
const
data
=
{}
if
(
this
.
name
!==
''
)
{
data
[
'
value
'
]
=
this
.
sliderValue
data
[
'
key
'
]
=
this
.
name
}
return
data
}
},
render
(
createElement
)
{
const
_vm
=
this
return
createElement
(
'
div
'
,
_vm
.
_g
({
staticClass
:
[
'
uni-slider
'
]
},
_vm
.
$listeners
),
[
createElement
(
'
div
'
,
{
staticClass
:
[
'
uni-slider-wrapper
'
]
},
[
createElement
(
'
div
'
,
{
staticClass
:
[
'
uni-slider-tap-area
'
],
on
:
{
'
touchstart
'
:
_vm
.
_handleStart
,
'
touchmove
'
:
_vm
.
_handleMove
,
'
touchend
'
:
_vm
.
_handleEnd
}
},
[
createElement
(
'
div
'
,
{
ref
:
'
slider-track
'
,
staticClass
:
[
'
uni-slider-handle-wrapper
'
],
style
:
_vm
.
trackStyle
},
[
createElement
(
'
div
'
,
{
staticClass
:
[
'
uni-slider-track
'
],
style
:
_vm
.
trackActiveStyle
})]),
createElement
(
'
div
'
,
{
ref
:
'
uni-slider-handle
'
,
staticClass
:
[
'
uni-slider-thumb
'
],
style
:
_vm
.
thumbStyle
})]),
(
_vm
.
showValue
)
?
createElement
(
'
u-text
'
,
{
staticClass
:
[
'
uni-slider-value
'
]
},
[
_vm
.
_v
(
_vm
.
_s
(
_vm
.
sliderValue
))])
:
_vm
.
_e
()])])
},
style
:
{
'
uni-slider
'
:
{
'
marginTop
'
:
'
12
'
,
'
marginRight
'
:
0
,
'
marginBottom
'
:
'
12
'
,
'
marginLeft
'
:
0
,
'
paddingTop
'
:
0
,
'
paddingRight
'
:
0
,
'
paddingBottom
'
:
0
,
'
paddingLeft
'
:
0
},
'
uni-slider-wrapper
'
:
{
'
flexDirection
'
:
'
row
'
,
'
alignItems
'
:
'
center
'
,
'
minHeight
'
:
'
30
'
},
'
uni-slider-tap-area
'
:
{
'
position
'
:
'
relative
'
,
'
flex
'
:
1
,
'
paddingTop
'
:
'
15
'
,
'
paddingRight
'
:
0
,
'
paddingBottom
'
:
'
15
'
,
'
paddingLeft
'
:
0
},
'
uni-slider-handle-wrapper
'
:
{
'
position
'
:
'
relative
'
,
'
marginTop
'
:
0
,
'
marginRight
'
:
'
18
'
,
'
marginBottom
'
:
0
,
'
marginLeft
'
:
'
18
'
,
'
height
'
:
'
2
'
,
'
borderRadius
'
:
'
5
'
,
'
backgroundColor
'
:
'
#e9e9e9
'
,
'
transitionProperty
'
:
'
backgroundColor
'
,
'
transitionDuration
'
:
300
,
'
transitionTimingFunction
'
:
'
ease
'
},
'
@TRANSITION
'
:
{
'
uni-slider-handle-wrapper
'
:
{
'
property
'
:
'
backgroundColor
'
,
'
duration
'
:
300
,
'
timingFunction
'
:
'
ease
'
},
'
uni-slider-track
'
:
{
'
property
'
:
'
backgroundColor
'
,
'
duration
'
:
300
,
'
timingFunction
'
:
'
ease
'
},
'
uni-slider-thumb
'
:
{
'
property
'
:
'
borderColor
'
,
'
duration
'
:
300
,
'
timingFunction
'
:
'
ease
'
}
},
'
uni-slider-track
'
:
{
'
flex
'
:
1
,
'
height
'
:
'
2
'
,
'
borderRadius
'
:
'
6
'
,
'
backgroundColor
'
:
'
#007aff
'
,
'
transitionProperty
'
:
'
backgroundColor
'
,
'
transitionDuration
'
:
300
,
'
transitionTimingFunction
'
:
'
ease
'
},
'
uni-slider-thumb
'
:
{
'
position
'
:
'
absolute
'
,
'
width
'
:
'
28
'
,
'
height
'
:
'
28
'
,
'
borderRadius
'
:
50
,
'
boxShadow
'
:
'
0 0 4px #ebebeb
'
,
'
transitionProperty
'
:
'
borderColor
'
,
'
transitionDuration
'
:
300
,
'
transitionTimingFunction
'
:
'
ease
'
},
'
uni-slider-step
'
:
{
'
position
'
:
'
absolute
'
,
'
width
'
:
100
,
'
height
'
:
'
2
'
,
'
background
'
:
'
transparent
'
,
'
zIndex
'
:
1
},
'
uni-slider-value
'
:
{
'
color
'
:
'
#888888
'
,
'
fontSize
'
:
'
14
'
,
'
marginRight
'
:
'
14
'
}
}
}
}
export
default
function
init
(
Vue
,
weex
)
{
Vue
.
component
(
'
u-slider
'
,
getSlider
(
weex
))
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录