Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DiDi
cube-ui
提交
ca9cd7ee
C
cube-ui
项目概览
DiDi
/
cube-ui
11 个月 前同步成功
通知
34
Star
9078
Fork
1508
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
C
cube-ui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
ca9cd7ee
编写于
12月 05, 2017
作者:
D
dolymood
浏览文件
操作
浏览文件
下载
差异文件
Merge branch 'dev' of github.com:didi/cube-ui into dev
上级
865ec6cf
6e931341
变更
3
展开全部
隐藏空白更改
内联
并排
Showing
3 changed file
with
1479 addition
and
14 deletion
+1479
-14
example/data/goods-list.json
example/data/goods-list.json
+1379
-0
example/pages/scroll.vue
example/pages/scroll.vue
+87
-7
src/components/scroll/scroll.vue
src/components/scroll/scroll.vue
+13
-7
未找到文件。
example/data/goods-list.json
0 → 100644
浏览文件 @
ca9cd7ee
此差异已折叠。
点击以展开。
example/pages/scroll.vue
浏览文件 @
ca9cd7ee
...
...
@@ -34,6 +34,10 @@
<input-option
v-if=
"pullUpLoad"
class=
"item sub last"
name=
"noMoreTxt"
:value=
"pullUpLoadNoMoreTxt"
@
update:value=
"updatePullUpLoadNoMoreTxt"
></input-option>
</div>
<div
class=
"group"
>
<switch-option
class=
"item"
name=
"Custom List"
:value=
"customList"
@
update:value=
"updateCustomList"
></switch-option>
</div>
<div
class=
"group"
>
<input-option
class=
"item"
name=
"startY"
:value=
"startY"
@
update:value=
"updateStartY"
></input-option>
...
...
@@ -44,11 +48,29 @@
<div
class=
"title sub"
>
Demo
</div>
<div
class=
"scroll-list-wrap"
>
<cube-scroll
ref=
"scroll"
:data=
"items"
:options=
"scrollOptions"
@
pulling-down=
"onPullingDown"
@
pulling-up=
"onPullingUp"
>
ref=
"scroll"
:data=
"items"
:options=
"scrollOptions"
@
pulling-down=
"onPullingDown"
@
pulling-up=
"onPullingUp"
>
<ul
v-if=
"customList"
class=
"foods-wrapper"
>
<li
@
click=
"selectFood(food,$event)"
v-for=
"food in items"
class=
"food-item border-1px"
>
<div
class=
"icon"
>
<img
width=
"57"
height=
"57"
:src=
"food.icon"
>
</div>
<div
class=
"food-content"
>
<h2
class=
"name"
>
{{
food
.
name
}}
</h2>
<p
class=
"description"
>
{{
food
.
description
}}
</p>
<div
class=
"extra"
>
<span
class=
"count"
>
月售
{{
food
.
sellCount
}}
份
</span><span>
好评率
{{
food
.
rating
}}
%
</span>
</div>
<div
class=
"price"
>
<span
class=
"now"
>
¥
{{
food
.
price
}}
</span>
<span
class=
"old"
v-show=
"food.oldPrice"
>
¥
{{
food
.
oldPrice
}}
</span>
</div>
</div>
</li>
</ul>
<template
v-if=
"customPullDown"
slot=
"pulldown"
slot-scope=
"props"
>
<div
v-if=
"props.pullDownRefresh"
...
...
@@ -98,6 +120,7 @@
import
SwitchOption
from
'
../components/switch-option
'
import
InputOption
from
'
../components/input-option
'
import
SelectOption
from
'
../components/select-option
'
import
goodsData
from
'
example/data/goods-list.json
'
import
{
ease
}
from
'
../data/ease
'
...
...
@@ -119,6 +142,12 @@
'
I am line 15
'
]
let
_foods
=
[]
goodsData
.
goods
.
forEach
((
item
)
=>
{
_foods
=
_foods
.
concat
(
item
.
foods
)
})
export
default
{
data
()
{
return
{
...
...
@@ -126,6 +155,7 @@
itemIndex
:
_data
.
length
,
scrollbar
:
true
,
scrollbarFade
:
true
,
customList
:
false
,
pullDownRefresh
:
true
,
pullDownRefreshThreshold
:
90
,
pullDownRefreshStop
:
40
,
...
...
@@ -169,6 +199,9 @@
},
deep
:
true
},
customList
(
newVal
)
{
this
.
items
=
newVal
?
_foods
:
_data
},
pullDownRefreshObj
:
{
handler
()
{
this
.
rebuildScroll
()
...
...
@@ -216,7 +249,7 @@
setTimeout
(()
=>
{
if
(
Math
.
random
()
>
0.5
)
{
// 如果有新数据
this
.
items
.
unshift
(
'
I am new data:
'
+
+
new
Date
()
)
this
.
items
.
unshift
(
this
.
customList
?
_foods
[
1
]
:
`I am new data:
${
+
new
Date
()}
`
)
}
else
{
// 如果没有新数据
this
.
$refs
.
scroll
.
forceUpdate
()
...
...
@@ -228,7 +261,7 @@
setTimeout
(()
=>
{
if
(
Math
.
random
()
>
0.5
)
{
// 如果有新数据
let
newPage
=
[
let
newPage
=
this
.
customList
?
_foods
.
slice
(
0
,
5
)
:
[
'
I am line
'
+
++
this
.
itemIndex
,
'
I am line
'
+
++
this
.
itemIndex
,
'
I am line
'
+
++
this
.
itemIndex
,
...
...
@@ -249,6 +282,9 @@
updateScrollbar
(
val
)
{
this
.
scrollbar
=
val
},
updateCustomList
(
val
)
{
this
.
customList
=
val
},
updateScrollbarFade
(
val
)
{
this
.
scrollbarFade
=
val
},
...
...
@@ -324,4 +360,48 @@
border-radius: 5px
transform: rotate(0deg) // fix 子元素超出边框圆角部分不隐藏的问题
overflow: hidden
.foods-wrapper
.food-item
display: flex
padding: 18px
border-bottom: 1px solid rgba(7, 17, 27, 0.1)
&:last-child
border-none()
margin-bottom: 0
.icon
flex: 0 0 57px
margin-right: 10px
.food-content
flex: 1
.name
margin: 2px 0 8px 0
height: 14px
line-height: 14px
font-size: 14px
color: rgb(7, 17, 27)
.description, .extra
line-height: 10px
font-size: 10px
color: rgb(147, 153, 159)
.description
line-height: 12px
margin-bottom: 8px
.extra
.count
margin-right: 12px
.price
font-weight: 700
line-height: 24px
.now
margin-right: 8px
font-size: 14px
color: rgb(240, 20, 20)
.old
text-decoration: line-through
font-size: 10px
color: rgb(147, 153, 159)
.cartcontrol-wrapper
position: absolute
right: 0
bottom: 12px
</
style
>
src/components/scroll/scroll.vue
浏览文件 @
ca9cd7ee
<
template
>
<div
ref=
"wrapper"
class=
"cube-scroll-wrapper"
>
<div
class=
"cube-scroll-content"
>
<slot>
<ul
ref=
"list"
class=
"cube-scroll-list"
>
<li
@
click=
"clickItem(item)"
class=
"cube-scroll-item border-bottom-1px"
v-for=
"item in data"
>
{{
item
}}
</li>
</ul>
</slot>
<div
ref=
"listWrapper"
>
<slot>
<ul
class=
"cube-scroll-list"
>
<li
@
click=
"clickItem(item)"
class=
"cube-scroll-item border-bottom-1px"
v-for=
"item in data"
>
{{
item
}}
</li>
</ul>
</slot>
</div>
<slot
name=
"pullup"
:pullUpLoad=
"pullUpLoad"
:isPullUpLoad=
"isPullUpLoad"
>
<div
class=
"cube-pullup-wrapper"
v-if=
"pullUpLoad"
>
<div
class=
"before-trigger"
v-if=
"!isPullUpLoad"
>
...
...
@@ -97,6 +99,10 @@
refreshDelay
:
{
type
:
Number
,
default
:
20
},
listRef
:
{
type
:
String
,
default
:
'
list
'
}
},
data
()
{
...
...
@@ -143,8 +149,8 @@
if
(
!
this
.
$refs
.
wrapper
)
{
return
}
if
(
this
.
$refs
.
list
&&
(
this
.
pullDownRefresh
||
this
.
pullUpLoad
))
{
this
.
$refs
.
list
.
style
.
minHeight
=
`
${
getRect
(
this
.
$refs
.
wrapper
).
height
+
1
}
px`
if
(
this
.
$refs
.
list
Wrapper
&&
(
this
.
pullDownRefresh
||
this
.
pullUpLoad
))
{
this
.
$refs
.
list
Wrapper
.
style
.
minHeight
=
`
${
getRect
(
this
.
$refs
.
wrapper
).
height
+
1
}
px`
}
let
options
=
Object
.
assign
({},
DEFAULT_OPTIONS
,
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录