Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
anyefeiyu
uni-app
提交
cc657f98
U
uni-app
项目概览
anyefeiyu
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
cc657f98
编写于
11月 14, 2018
作者:
蓝色的小猫咪
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
统一顶部分段器命名
上级
ea00b8e4
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
145 addition
and
19 deletion
+145
-19
examples/hello-uniapp/components/segmented-control.vue
examples/hello-uniapp/components/segmented-control.vue
+7
-8
examples/hello-uniapp/components/uni-segmented-control.vue
examples/hello-uniapp/components/uni-segmented-control.vue
+134
-0
examples/hello-uniapp/pages/template/segmented-control/segmented-control.vue
...pp/pages/template/segmented-control/segmented-control.vue
+4
-11
未找到文件。
examples/hello-uniapp/components/segmented-control.vue
浏览文件 @
cc657f98
...
...
@@ -103,33 +103,32 @@
margin
:
0
auto
;
overflow
:
hidden
;
}
.segmented-control.button
{
border
:
1
upx
solid
;
}
.segmented-control.text
{
border
:
0
;
border-radius
:
0
upx
;
}
.segmented-control-item
{
flex
:
1
;
text-align
:
center
;
line-height
:
70
upx
;
box-sizing
:
border-box
;
}
.segmented-control-item.button
{
border-left
:
1
upx
solid
;
}
.segmented-control-item.text
{
border-left
:
0
;
}
.segmented-control-item
:first-child
{
border-left-width
:
0
;
}
</
style
>
</
style
>
examples/hello-uniapp/components/uni-segmented-control.vue
0 → 100644
浏览文件 @
cc657f98
<
template
>
<view
class=
"segmented-control"
:class=
"styleType"
:style=
"wrapStyle"
>
<view
v-for=
"(item, index) in values"
class=
"segmented-control-item"
:class=
"styleType"
:key=
"index"
:style=
"index === currentIndex ? activeStyle : itemStyle"
@
click=
"onClick(index)"
>
{{
item
}}
</view>
</view>
</
template
>
<
script
>
export
default
{
name
:
'
segmented-control
'
,
props
:
{
current
:
{
type
:
Number
,
default
:
0
},
values
:
{
type
:
Array
,
default
()
{
return
[];
}
},
activeColor
:
{
type
:
String
,
default
:
'
#007aff
'
},
styleType
:
{
type
:
String
,
default
:
'
button
'
}
},
data
()
{
return
{
currentIndex
:
this
.
current
}
},
watch
:
{
current
(
val
)
{
if
(
val
!==
this
.
currentIndex
)
{
this
.
currentIndex
=
val
;
}
}
},
computed
:
{
wrapStyle
()
{
let
styleString
=
''
;
switch
(
this
.
styleType
)
{
case
'
text
'
:
styleString
=
`border:0;`
;
break
;
default
:
styleString
=
`border-color:
${
this
.
activeColor
}
`
;
break
;
}
return
styleString
;
},
itemStyle
()
{
let
styleString
=
''
;
switch
(
this
.
styleType
)
{
case
'
text
'
:
styleString
=
`color:#000;border-left:0;`
;
break
;
default
:
styleString
=
`color:
${
this
.
activeColor
}
;border-color:
${
this
.
activeColor
}
;`
;
break
;
}
return
styleString
;
},
activeStyle
()
{
let
styleString
=
''
;
switch
(
this
.
styleType
)
{
case
'
text
'
:
styleString
=
`color:
${
this
.
activeColor
}
;border-left:0;border-bottom-style:solid;`
;
break
;
default
:
styleString
=
`color:#fff;border-color:
${
this
.
activeColor
}
;background-color:
${
this
.
activeColor
}
`
;
break
;
}
return
styleString
;
}
},
methods
:
{
onClick
(
index
)
{
if
(
this
.
currentIndex
!==
index
)
{
this
.
currentIndex
=
index
;
this
.
$emit
(
'
clickItem
'
,
index
);
}
}
},
}
</
script
>
<
style
>
.segmented-control
{
display
:
flex
;
flex-direction
:
row
;
justify-content
:
center
;
width
:
100%
;
font-size
:
30
upx
;
border-radius
:
12
upx
;
box-sizing
:
border-box
;
margin
:
0
auto
;
overflow
:
hidden
;
}
.segmented-control.button
{
border
:
1
upx
solid
;
}
.segmented-control.text
{
border
:
0
;
border-radius
:
0
upx
;
}
.segmented-control-item
{
flex
:
1
;
text-align
:
center
;
line-height
:
70
upx
;
box-sizing
:
border-box
;
}
.segmented-control-item.button
{
border-left
:
1
upx
solid
;
}
.segmented-control-item.text
{
border-left
:
0
;
}
.segmented-control-item
:first-child
{
border-left-width
:
0
;
}
</
style
>
examples/hello-uniapp/pages/template/segmented-control/segmented-control.vue
浏览文件 @
cc657f98
<
template
>
<view
class=
"page"
>
<view>
<view
class=
"uni-padding-wrap uni-common-mt"
>
<
segmented-control
:current=
"current"
:values=
"items"
v-on:clickItem=
"onClickItem"
:styleType=
"styleType"
:activeColor=
"activeColor"
></
segmented-control>
<
uni-segmented-control
:current=
"current"
:values=
"items"
v-on:clickItem=
"onClickItem"
:styleType=
"styleType"
:activeColor=
"activeColor"
></uni-
segmented-control>
</view>
<view
class=
"content"
>
<view
v-show=
"current === 0"
>
...
...
@@ -42,7 +42,7 @@
</
template
>
<
script
>
import
segmentedControl
from
'
../../../components/
segmented-control.vue
'
;
import
uniSegmentedControl
from
'
../../../components/uni-
segmented-control.vue
'
;
export
default
{
data
()
{
...
...
@@ -71,7 +71,7 @@
}
},
components
:
{
s
egmentedControl
uniS
egmentedControl
},
methods
:
{
onClickItem
(
index
)
{
...
...
@@ -94,12 +94,6 @@
</
script
>
<
style
>
.head
{
padding
:
0
20
upx
;
margin-top
:
20
upx
;
height
:
100
upx
;
}
.content
{
display
:
flex
;
justify-content
:
center
;
...
...
@@ -107,7 +101,6 @@
height
:
300
upx
;
text-align
:
center
;
}
.color-tag
{
width
:
50
upx
;
height
:
50
upx
;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录