Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
梦里逆天
uni-app
提交
6f52113e
U
uni-app
项目概览
梦里逆天
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
22
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
6f52113e
编写于
8月 28, 2018
作者:
H
hulinNeil
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
增加echart示例、图片剪切示例、可滑动九宫格示例、修改部分文字描述、优化列表到详情示例的打开速度
上级
b7c2b800
变更
20
隐藏空白更改
内联
并排
Showing
20 changed file
with
1407 addition
and
53 deletion
+1407
-53
examples/hello-uniapp/App.vue
examples/hello-uniapp/App.vue
+0
-2
examples/hello-uniapp/components/echarts/echarts.simple.min.js
...les/hello-uniapp/components/echarts/echarts.simple.min.js
+22
-0
examples/hello-uniapp/components/mpvue-echarts/src/echarts.vue
...les/hello-uniapp/components/mpvue-echarts/src/echarts.vue
+152
-0
examples/hello-uniapp/components/mpvue-echarts/src/wx-canvas.js
...es/hello-uniapp/components/mpvue-echarts/src/wx-canvas.js
+73
-0
examples/hello-uniapp/components/page-foot.vue
examples/hello-uniapp/components/page-foot.vue
+38
-0
examples/hello-uniapp/pages.json
examples/hello-uniapp/pages.json
+33
-11
examples/hello-uniapp/pages/API/API.vue
examples/hello-uniapp/pages/API/API.vue
+3
-3
examples/hello-uniapp/pages/API/file/file.vue
examples/hello-uniapp/pages/API/file/file.vue
+1
-1
examples/hello-uniapp/pages/API/navigator/new-page/new-page.vue
...es/hello-uniapp/pages/API/navigator/new-page/new-page.vue
+44
-0
examples/hello-uniapp/pages/API/show-loading/show-loading.vue
...ples/hello-uniapp/pages/API/show-loading/show-loading.vue
+41
-0
examples/hello-uniapp/pages/component/picker-view/picker-view.vue
.../hello-uniapp/pages/component/picker-view/picker-view.vue
+80
-0
examples/hello-uniapp/pages/template/crop/crop.vue
examples/hello-uniapp/pages/template/crop/crop.vue
+644
-0
examples/hello-uniapp/pages/template/echart/echart.vue
examples/hello-uniapp/pages/template/echart/echart.vue
+146
-0
examples/hello-uniapp/pages/template/grid-pagination/grid-pagination.vue
...uniapp/pages/template/grid-pagination/grid-pagination.vue
+82
-0
examples/hello-uniapp/pages/template/list2detail-detail/list2detail-detail.vue
.../pages/template/list2detail-detail/list2detail-detail.vue
+7
-9
examples/hello-uniapp/pages/template/list2detail-list/list2detail-list.vue
...iapp/pages/template/list2detail-list/list2detail-list.vue
+9
-14
examples/hello-uniapp/pages/template/qrcode/qrcode.vue
examples/hello-uniapp/pages/template/qrcode/qrcode.vue
+5
-1
examples/hello-uniapp/pages/template/template.vue
examples/hello-uniapp/pages/template/template.vue
+25
-10
examples/hello-uniapp/platforms/app-plus/about/about.vue
examples/hello-uniapp/platforms/app-plus/about/about.vue
+1
-0
examples/hello-uniapp/platforms/app-plus/feedback/feedback.vue
...les/hello-uniapp/platforms/app-plus/feedback/feedback.vue
+1
-2
未找到文件。
examples/hello-uniapp/App.vue
浏览文件 @
6f52113e
...
...
@@ -75,7 +75,6 @@
font-size
:
32px
;
font-family
:
-apple-system-font
,
Helvetica
Neue
,
Helvetica
,
sans-serif
;
}
.page-head
{
padding
:
60px
50px
80px
;
text-align
:
center
;
...
...
@@ -265,5 +264,4 @@
background-color
:
#F1F1F1
;
color
:
#353535
;
}
</
style
>
examples/hello-uniapp/components/echarts/echarts.simple.min.js
0 → 100644
浏览文件 @
6f52113e
因为 它太大了无法显示 source diff 。你可以改为
查看blob
。
examples/hello-uniapp/components/mpvue-echarts/src/echarts.vue
0 → 100644
浏览文件 @
6f52113e
<
template
>
<canvas
v-if=
"canvasId"
class=
"ec-canvas"
:id=
"canvasId"
:canvasId=
"canvasId"
@
touchstart=
"touchStart"
@
touchmove=
"touchMove"
@
touchend=
"touchEnd"
@
error=
"error"
>
</canvas>
</
template
>
<
script
>
import
WxCanvas
from
'
./wx-canvas
'
;
export
default
{
props
:
{
echarts
:
{
required
:
true
,
type
:
Object
,
default
()
{
return
null
;
},
},
onInit
:
{
required
:
true
,
type
:
Function
,
default
:
null
,
},
canvasId
:
{
type
:
String
,
default
:
'
ec-canvas
'
,
},
lazyLoad
:
{
type
:
Boolean
,
default
:
false
,
},
disableTouch
:
{
type
:
Boolean
,
default
:
false
,
},
throttleTouch
:
{
type
:
Boolean
,
default
:
false
,
},
},
onReady
()
{
if
(
!
this
.
echarts
)
{
console
.
warn
(
'
组件需绑定 echarts 变量,例:<ec-canvas id="mychart-dom-bar"
'
+
'
canvas-id="mychart-bar" :echarts="echarts"></ec-canvas>
'
);
return
;
}
if
(
!
this
.
lazyLoad
)
this
.
init
();
},
methods
:
{
init
()
{
const
version
=
wx
.
version
.
version
.
split
(
'
.
'
).
map
(
n
=>
parseInt
(
n
,
10
));
const
isValid
=
version
[
0
]
>
1
||
(
version
[
0
]
===
1
&&
version
[
1
]
>
9
)
||
(
version
[
0
]
===
1
&&
version
[
1
]
===
9
&&
version
[
2
]
>=
91
);
if
(
!
isValid
)
{
console
.
error
(
'
微信基础库版本过低,需大于等于 1.9.91。
'
+
'
参见:https://github.com/ecomfe/echarts-for-weixin
'
+
'
#%E5%BE%AE%E4%BF%A1%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82
'
);
return
;
}
if
(
!
this
.
onInit
)
{
console
.
warn
(
'
请传入 onInit 函数进行初始化
'
);
return
;
}
const
{
canvasId
}
=
this
;
this
.
ctx
=
wx
.
createCanvasContext
(
canvasId
);
const
canvas
=
new
WxCanvas
(
this
.
ctx
,
canvasId
);
this
.
echarts
.
setCanvasCreator
(()
=>
canvas
);
const
query
=
wx
.
createSelectorQuery
();
query
.
select
(
`#
${
canvasId
}
`
).
boundingClientRect
((
res
)
=>
{
if
(
!
res
)
{
setTimeout
(()
=>
this
.
init
(),
50
);
return
;
}
this
.
chart
=
this
.
onInit
(
canvas
,
res
.
width
,
res
.
height
);
}).
exec
();
},
canvasToTempFilePath
(
opt
)
{
const
{
canvasId
}
=
this
;
this
.
ctx
.
draw
(
true
,
()
=>
{
wx
.
canvasToTempFilePath
({
canvasId
,
...
opt
,
});
});
},
touchStart
(
e
)
{
const
{
disableTouch
,
chart
}
=
this
;
if
(
disableTouch
||
!
chart
||
!
e
.
mp
.
touches
.
length
)
return
;
const
touch
=
e
.
mp
.
touches
[
0
];
chart
.
_zr
.
handler
.
dispatch
(
'
mousedown
'
,
{
zrX
:
touch
.
x
,
zrY
:
touch
.
y
,
});
chart
.
_zr
.
handler
.
dispatch
(
'
mousemove
'
,
{
zrX
:
touch
.
x
,
zrY
:
touch
.
y
,
});
},
touchMove
(
e
)
{
const
{
disableTouch
,
throttleTouch
,
chart
,
lastMoveTime
,
}
=
this
;
if
(
disableTouch
||
!
chart
||
!
e
.
mp
.
touches
.
length
)
return
;
if
(
throttleTouch
)
{
const
currMoveTime
=
Date
.
now
();
if
(
currMoveTime
-
lastMoveTime
<
240
)
return
;
this
.
lastMoveTime
=
currMoveTime
;
}
const
touch
=
e
.
mp
.
touches
[
0
];
chart
.
_zr
.
handler
.
dispatch
(
'
mousemove
'
,
{
zrX
:
touch
.
x
,
zrY
:
touch
.
y
,
});
},
touchEnd
(
e
)
{
const
{
disableTouch
,
chart
}
=
this
;
if
(
disableTouch
||
!
chart
)
return
;
const
touch
=
e
.
mp
.
changedTouches
?
e
.
mp
.
changedTouches
[
0
]
:
{};
chart
.
_zr
.
handler
.
dispatch
(
'
mouseup
'
,
{
zrX
:
touch
.
x
,
zrY
:
touch
.
y
,
});
chart
.
_zr
.
handler
.
dispatch
(
'
click
'
,
{
zrX
:
touch
.
x
,
zrY
:
touch
.
y
,
});
},
},
};
</
script
>
<
style
scoped
>
.ec-canvas
{
width
:
100%
;
height
:
100%
;
}
</
style
>
examples/hello-uniapp/components/mpvue-echarts/src/wx-canvas.js
0 → 100644
浏览文件 @
6f52113e
export
default
class
WxCanvas
{
constructor
(
ctx
,
canvasId
)
{
this
.
ctx
=
ctx
;
this
.
canvasId
=
canvasId
;
this
.
chart
=
null
;
WxCanvas
.
initStyle
(
ctx
);
this
.
initEvent
();
}
getContext
(
contextType
)
{
return
contextType
===
'
2d
'
?
this
.
ctx
:
null
;
}
setChart
(
chart
)
{
this
.
chart
=
chart
;
}
attachEvent
()
{
// noop
}
detachEvent
()
{
// noop
}
static
initStyle
(
ctx
)
{
const
styles
=
[
'
fillStyle
'
,
'
strokeStyle
'
,
'
globalAlpha
'
,
'
textAlign
'
,
'
textBaseAlign
'
,
'
shadow
'
,
'
lineWidth
'
,
'
lineCap
'
,
'
lineJoin
'
,
'
lineDash
'
,
'
miterLimit
'
,
'
fontSize
'
];
styles
.
forEach
((
style
)
=>
{
Object
.
defineProperty
(
ctx
,
style
,
{
set
:
(
value
)
=>
{
if
((
style
!==
'
fillStyle
'
&&
style
!==
'
strokeStyle
'
)
||
(
value
!==
'
none
'
&&
value
!==
null
)
)
{
ctx
[
`set
${
style
.
charAt
(
0
).
toUpperCase
()}${
style
.
slice
(
1
)}
`
](
value
);
}
},
});
});
ctx
.
createRadialGradient
=
()
=>
ctx
.
createCircularGradient
(
arguments
);
}
initEvent
()
{
this
.
event
=
{};
const
eventNames
=
[{
wxName
:
'
touchStart
'
,
ecName
:
'
mousedown
'
,
},
{
wxName
:
'
touchMove
'
,
ecName
:
'
mousemove
'
,
},
{
wxName
:
'
touchEnd
'
,
ecName
:
'
mouseup
'
,
},
{
wxName
:
'
touchEnd
'
,
ecName
:
'
click
'
,
}];
eventNames
.
forEach
((
name
)
=>
{
this
.
event
[
name
.
wxName
]
=
(
e
)
=>
{
const
touch
=
e
.
mp
.
touches
[
0
];
this
.
chart
.
_zr
.
handler
.
dispatch
(
name
.
ecName
,
{
zrX
:
name
.
wxName
===
'
tap
'
?
touch
.
clientX
:
touch
.
x
,
zrY
:
name
.
wxName
===
'
tap
'
?
touch
.
clientY
:
touch
.
y
,
});
};
});
}
}
examples/hello-uniapp/components/page-foot.vue
0 → 100644
浏览文件 @
6f52113e
<
template
name=
"page-foot"
>
<view
class=
"page-share-title"
>
<text>
感谢
{{
name
}}
提供本示例,
</text>
<text
class=
"submit"
@
tap=
"submit"
>
我也提交
</text>
</view>
</
template
>
<
script
>
export
default
{
name
:
"
page-foot
"
,
props
:
{
name
:
{
type
:
String
,
default
:
""
}
},
methods
:
{
submit
()
{
uni
.
showModal
({
content
:
"
hello uni-app开源地址为https://github.com/dcloudio/uni-app/tree/master/examples,请在这个开源项目上贡献你的代码
"
,
showCancel
:
false
})
}
}
}
</
script
>
<
style
>
.page-share-title
{
text-align
:
center
;
font-size
:
30px
;
color
:
#BEBEBE
;
margin
:
20px
0
;
}
.submit
{
border-bottom
:
1px
solid
#BEBEBE
;
}
</
style
>
examples/hello-uniapp/pages.json
浏览文件 @
6f52113e
{
"pages"
:
[
//pages数组中第一项表示应用启动页
"pages"
:
[
//pages数组中第一项表示应用启动页
,参考:https://uniapp.dcloud.io/collocation/pages
{
"path"
:
"pages/component/component"
,
"style"
:
{
"navigationBarTitleText"
:
"组件"
,
"app-plus"
:{
"titleNView"
:{
"titleText"
:
"组件"
,
"buttons"
:[{
"text"
:
"
\u
e534"
,
"fontSrc"
:
"
_www
/static/uni.ttf"
,
"fontSrc"
:
"/static/uni.ttf"
,
"fontSize"
:
"22px"
,
"color"
:
"#999999"
}]
...
...
@@ -22,10 +21,9 @@
"navigationBarTitleText"
:
"接口"
,
"app-plus"
:{
"titleNView"
:{
"titleText"
:
"接口"
,
"buttons"
:[{
"text"
:
"
\u
e534"
,
"fontSrc"
:
"
_www
/static/uni.ttf"
,
"fontSrc"
:
"/static/uni.ttf"
,
"fontSize"
:
"22px"
,
"color"
:
"#999999"
}]
...
...
@@ -38,10 +36,9 @@
"navigationBarTitleText"
:
"模版"
,
"app-plus"
:{
"titleNView"
:{
"titleText"
:
"模版"
,
"buttons"
:[{
"text"
:
"
\u
e534"
,
"fontSrc"
:
"
_www
/static/uni.ttf"
,
"fontSrc"
:
"/static/uni.ttf"
,
"fontSize"
:
"22px"
,
"color"
:
"#999999"
}]
...
...
@@ -113,6 +110,11 @@
"style"
:
{
"navigationBarTitleText"
:
"picker"
}
},
{
"path"
:
"pages/component/picker-view/picker-view"
,
"style"
:
{
"navigationBarTitleText"
:
"picker-view"
}
},
{
"path"
:
"pages/component/radio/radio"
,
"style"
:
{
...
...
@@ -214,15 +216,20 @@
"navigationBarTitleText"
:
"设置界面标题"
}
},
{
"path"
:
"pages/API/
navigation-bar-loading/navigation-bar
-loading"
,
"path"
:
"pages/API/
show-loading/show
-loading"
,
"style"
:
{
"navigationBarTitleText"
:
"
标题栏加载动画
"
"navigationBarTitleText"
:
"
加载提示框
"
}
},
{
"path"
:
"pages/API/navigator/navigator"
,
"style"
:
{
"navigationBarTitleText"
:
"页面跳转"
}
},
{
"path"
:
"pages/API/navigator/new-page/new-page"
,
"style"
:
{
"navigationBarTitleText"
:
"新页面"
}
},
{
"path"
:
"pages/API/pull-down-refresh/pull-down-refresh"
,
"style"
:
{
...
...
@@ -399,6 +406,11 @@
"style"
:
{
"navigationBarTitleText"
:
"九宫格"
}
},
{
"path"
:
"pages/template/grid-pagination/grid-pagination"
,
"style"
:
{
"navigationBarTitleText"
:
"左右拖动分页9宫格"
}
},
{
"path"
:
"pages/template/drag-right/drag-right"
,
"style"
:
{
...
...
@@ -482,6 +494,16 @@
"style"
:
{
"navigationBarTitleText"
:
"二维码生成"
}
},
{
"path"
:
"pages/template/crop/crop"
,
"style"
:
{
"navigationBarTitleText"
:
"图片裁剪"
}
},
{
"path"
:
"pages/template/echart/echart"
,
"style"
:
{
"navigationBarTitleText"
:
"echart图表"
}
},
{
"path"
:
"platforms/app-plus/about/about"
,
"style"
:
{
...
...
@@ -491,7 +513,7 @@
],
"globalStyle"
:
{
"navigationBarTextStyle"
:
"black"
,
"navigationBarTitleText"
:
"
演示
"
,
"navigationBarTitleText"
:
"
Hello uniapp
"
,
"navigationBarBackgroundColor"
:
"#F8F8F8"
,
"backgroundColor"
:
"#F8F8F8"
},
...
...
@@ -514,7 +536,7 @@
"pagePath"
:
"pages/template/template"
,
"iconPath"
:
"static/template.png"
,
"selectedIconPath"
:
"static/templateHL.png"
,
"text"
:
"模
版
"
"text"
:
"模
板
"
}]
}
}
examples/hello-uniapp/pages/API/API.vue
浏览文件 @
6f52113e
...
...
@@ -33,9 +33,6 @@
pages
:
[{
name
:
'
设置界面标题
'
,
url
:
'
set-navigation-bar-title
'
},
{
name
:
'
标题栏加载动画
'
,
url
:
'
navigation-bar-loading
'
},
{
name
:
'
页面跳转
'
,
url
:
'
navigator
'
...
...
@@ -54,6 +51,9 @@
},
{
name
:
'
显示模态弹窗
'
,
url
:
'
modal
'
},
{
name
:
'
显示加载提示框
'
,
url
:
'
show-loading
'
},
{
name
:
'
显示消息提示框
'
,
url
:
'
toast
'
...
...
examples/hello-uniapp/pages/API/file/file.vue
浏览文件 @
6f52113e
...
...
@@ -23,7 +23,7 @@
<button
@
tap=
"clear"
>
删除文件
</button>
</view>
<view
class=
"btn-area"
>
<button
@
tap=
"openDocument"
>
打开文件
</button>
<button
@
tap=
"openDocument"
>
打开
pdf
文件
</button>
</view>
</view>
</view>
...
...
examples/hello-uniapp/pages/API/navigator/new-page/new-page.vue
0 → 100644
浏览文件 @
6f52113e
<
template
>
<view
class=
"root"
>
<page-head
:title=
"title"
></page-head>
<view
class=
"page-body"
>
{{
data
}}
</view>
</view>
</
template
>
<
script
>
import
pageHead
from
'
../../../../components/page-head.vue
'
export
default
{
data
()
{
return
{
title
:
'
新页面
'
,
data
:
""
}
},
onLoad
(
e
){
if
(
e
.
data
){
this
.
data
=
e
.
data
;
}
},
components
:
{
pageHead
}
}
</
script
>
<
style
>
page
{
display
:
flex
;
min-height
:
100%
;
}
.root
{
display
:
flex
;
flex
:
1
;
flex-direction
:
column
;
}
.page-body
{
flex
:
1
;
display
:
flex
;
justify-content
:
center
;
align-items
:
center
;
}
</
style
>
\ No newline at end of file
examples/hello-uniapp/pages/API/show-loading/show-loading.vue
0 → 100644
浏览文件 @
6f52113e
<
template
>
<view>
<page-head
:title=
"title"
></page-head>
<view
class=
"page-body"
>
<view
class=
"btn-area"
>
<button
class=
"btn-load"
@
tap=
"showLoading"
>
显示 loading 提示框
</button>
<button
@
tap=
"hideLoading"
>
隐藏 loading 提示框
</button>
</view>
</view>
</view>
</
template
>
<
script
>
import
pageHead
from
'
../../../components/page-head.vue
'
export
default
{
data
()
{
return
{
title
:
'
loading
'
}
},
methods
:
{
showLoading
:
function
()
{
uni
.
showLoading
()
},
hideLoading
:
function
()
{
uni
.
hideLoading
()
}
},
components
:
{
pageHead
}
}
</
script
>
<
style
>
.btn-load
{
background-color
:
#007aff
;
color
:
#ffffff
;
}
</
style
>
examples/hello-uniapp/pages/component/picker-view/picker-view.vue
0 → 100644
浏览文件 @
6f52113e
<
template
>
<view>
<page-head
:title=
"title"
></page-head>
<view
class=
"title"
>
日期:
{{
year
}}
年
{{
month
}}
月
{{
day
}}
日
</view>
<picker-view
indicator-style=
"height: 50px;"
:value=
"value"
@
change=
"bindChange"
>
<picker-view-column>
<view
class=
"item"
v-for=
"item in years"
>
{{
item
}}
年
</view>
</picker-view-column>
<picker-view-column>
<view
class=
"item"
v-for=
"item in months"
>
{{
item
}}
月
</view>
</picker-view-column>
<picker-view-column>
<view
class=
"item"
v-for=
"item in days"
>
{{
item
}}
日
</view>
</picker-view-column>
</picker-view>
</view>
</
template
>
<
script
>
import
pageHead
from
'
../../../components/page-head.vue
'
export
default
{
data
:
function
()
{
const
date
=
new
Date
()
const
years
=
[]
const
months
=
[]
const
days
=
[]
for
(
let
i
=
1990
;
i
<=
date
.
getFullYear
();
i
++
)
{
years
.
push
(
i
)
}
for
(
let
i
=
1
;
i
<=
12
;
i
++
)
{
months
.
push
(
i
)
}
for
(
let
i
=
1
;
i
<=
31
;
i
++
)
{
days
.
push
(
i
)
}
return
{
title
:
'
picker-view
'
,
years
:
years
,
year
:
date
.
getFullYear
(),
months
:
months
,
month
:
2
,
days
:
days
,
day
:
2
,
value
:
[
9999
,
1
,
1
]
}
},
methods
:
{
bindChange
:
function
(
e
)
{
const
val
=
e
.
detail
.
value
this
.
year
=
this
.
years
[
val
[
0
]]
this
.
month
=
this
.
months
[
val
[
1
]]
this
.
day
=
this
.
days
[
val
[
2
]]
}
},
components
:
{
pageHead
}
}
</
script
>
<
style
>
.title
{
padding
:
0
50px
;
}
picker-view
{
width
:
100%
;
height
:
600px
;
margin-top
:
50px
;
}
.item
{
line-height
:
100px
;
text-align
:
center
;
}
</
style
>
examples/hello-uniapp/pages/template/crop/crop.vue
0 → 100644
浏览文件 @
6f52113e
<
template
>
<view
class=
"container"
>
<view
class=
"page-body uni-content-info"
>
<view
class=
'cropper-content'
>
<view
v-if=
"isShowImg"
class=
"uni-corpper"
:style=
"'width:'+cropperInitW+'px;height:'+cropperInitH+'px;background:#000'"
>
<view
class=
"uni-corpper-content"
:style=
"'width:'+cropperW+'px;height:'+cropperH+'px;left:'+cropperL+'px;top:'+cropperT+'px'"
>
<image
:src=
"imageSrc"
:style=
"'width:'+cropperW+'px;height:'+cropperH+'px'"
></image>
<view
class=
"uni-corpper-crop-box"
@
touchstart.stop=
"contentStartMove"
@
touchmove.stop=
"contentMoveing"
@
touchend.stop=
"contentTouchEnd"
:style=
"'left:'+cutL+'px;top:'+cutT+'px;right:'+cutR+'px;bottom:'+cutB+'px'"
>
<view
class=
"uni-cropper-view-box"
>
<view
class=
"uni-cropper-dashed-h"
></view>
<view
class=
"uni-cropper-dashed-v"
></view>
<view
class=
"uni-cropper-line-t"
data-drag=
"top"
@
touchstart.stop=
"dragStart"
@
touchmove.stop=
"dragMove"
></view>
<view
class=
"uni-cropper-line-r"
data-drag=
"right"
@
touchstart.stop=
"dragStart"
@
touchmove.stop=
"dragMove"
></view>
<view
class=
"uni-cropper-line-b"
data-drag=
"bottom"
@
touchstart.stop=
"dragStart"
@
touchmove.stop=
"dragMove"
></view>
<view
class=
"uni-cropper-line-l"
data-drag=
"left"
@
touchstart.stop=
"dragStart"
@
touchmove.stop=
"dragMove"
></view>
<view
class=
"uni-cropper-point point-t"
data-drag=
"top"
@
touchstart.stop=
"dragStart"
@
touchmove.stop=
"dragMove"
></view>
<view
class=
"uni-cropper-point point-tr"
data-drag=
"topTight"
></view>
<view
class=
"uni-cropper-point point-r"
data-drag=
"right"
@
touchstart.stop=
"dragStart"
@
touchmove.stop=
"dragMove"
></view>
<view
class=
"uni-cropper-point point-rb"
data-drag=
"rightBottom"
@
touchstart.stop=
"dragStart"
@
touchmove.stop=
"dragMove"
></view>
<view
class=
"uni-cropper-point point-b"
data-drag=
"bottom"
@
touchstart.stop=
"dragStart"
@
touchmove.stop=
"dragMove"
@
touchend.stop=
"dragEnd"
></view>
<view
class=
"uni-cropper-point point-bl"
data-drag=
"bottomLeft"
></view>
<view
class=
"uni-cropper-point point-l"
data-drag=
"left"
@
touchstart.stop=
"dragStart"
@
touchmove.stop=
"dragMove"
></view>
<view
class=
"uni-cropper-point point-lt"
data-drag=
"leftTop"
></view>
</view>
</view>
</view>
</view>
</view>
<view
class=
'cropper-config'
>
<button
type=
"primary reverse"
@
click=
"getImage"
style=
'margin-top: 30px;'
>
选择图片
</button>
<button
type=
"warn"
@
click=
"getImageInfo"
style=
'margin-top: 30px;'
>
点击生成图片
</button>
</view>
<canvas
canvas-id=
"myCanvas"
:style=
"'position:absolute;border: 1px solid red; width:'+imageW+'px;height:'+imageH+'px;top:-9999px;left:-9999px;'"
></canvas>
</view>
<page-foot
:name=
"name"
></page-foot>
</view>
</
template
>
<
script
>
import
pageFoot
from
'
../../../components/page-foot.vue
'
;
let
sysInfo
=
uni
.
getSystemInfoSync
();
let
SCREEN_WIDTH
=
sysInfo
.
screenWidth
let
PAGE_X
,
// 手按下的x位置
PAGE_Y
,
// 手按下y的位置
PR
=
sysInfo
.
pixelRatio
,
// dpi
T_PAGE_X
,
// 手移动的时候x的位置
T_PAGE_Y
,
// 手移动的时候Y的位置
CUT_L
,
// 初始化拖拽元素的left值
CUT_T
,
// 初始化拖拽元素的top值
CUT_R
,
// 初始化拖拽元素的
CUT_B
,
// 初始化拖拽元素的
CUT_W
,
// 初始化拖拽元素的宽度
CUT_H
,
// 初始化拖拽元素的高度
IMG_RATIO
,
// 图片比例
IMG_REAL_W
,
// 图片实际的宽度
IMG_REAL_H
,
// 图片实际的高度
DRAFG_MOVE_RATIO
=
1
,
//移动时候的比例,
INIT_DRAG_POSITION
=
100
,
// 初始化屏幕宽度和裁剪区域的宽度之差,用于设置初始化裁剪的宽度
DRAW_IMAGE_W
=
sysInfo
.
screenWidth
// 设置生成的图片宽度
export
default
{
/**
* 页面的初始数据
*/
data
()
{
return
{
name
:
'
杨大宝
'
,
imageSrc
:
'
http://www.bing.com/az/hprichbg/rb/BulgariaPerseids_ZH-CN11638911564_1920x1080.jpg
'
,
isShowImg
:
false
,
// 初始化的宽高
cropperInitW
:
SCREEN_WIDTH
,
cropperInitH
:
SCREEN_WIDTH
,
// 动态的宽高
cropperW
:
SCREEN_WIDTH
,
cropperH
:
SCREEN_WIDTH
,
// 动态的left top值
cropperL
:
0
,
cropperT
:
0
,
transL
:
0
,
transT
:
0
,
// 图片缩放值
scaleP
:
0
,
imageW
:
0
,
imageH
:
0
,
// 裁剪框 宽高
cutL
:
0
,
cutT
:
0
,
cutB
:
SCREEN_WIDTH
,
cutR
:
'
100%
'
,
qualityWidth
:
DRAW_IMAGE_W
,
innerAspectRadio
:
DRAFG_MOVE_RATIO
}
},
components
:
{
pageFoot
},
/**
* 生命周期函数--监听页面加载
*/
onLoad
:
function
(
options
)
{},
/**
* 生命周期函数--监听页面初次渲染完成
*/
mounted
:
function
()
{
this
.
loadImage
();
},
methods
:
{
setData
:
function
(
obj
)
{
let
that
=
this
;
Object
.
keys
(
obj
).
forEach
(
function
(
key
)
{
that
.
$set
(
that
.
$data
,
key
,
obj
[
key
])
});
},
getImage
:
function
()
{
var
_this
=
this
uni
.
chooseImage
({
success
:
function
(
res
)
{
_this
.
setData
({
imageSrc
:
res
.
tempFilePaths
[
0
],
})
_this
.
loadImage
();
},
})
},
loadImage
:
function
()
{
var
_this
=
this
uni
.
showLoading
({
title
:
'
图片加载中...
'
,
})
uni
.
getImageInfo
({
src
:
_this
.
imageSrc
,
success
:
function
success
(
res
)
{
IMG_RATIO
=
res
.
width
/
res
.
height
if
(
IMG_RATIO
>=
1
)
{
IMG_REAL_W
=
SCREEN_WIDTH
IMG_REAL_H
=
SCREEN_WIDTH
/
IMG_RATIO
}
else
{
IMG_REAL_W
=
SCREEN_WIDTH
*
IMG_RATIO
IMG_REAL_H
=
SCREEN_WIDTH
}
let
minRange
=
IMG_REAL_W
>
IMG_REAL_H
?
IMG_REAL_W
:
IMG_REAL_H
INIT_DRAG_POSITION
=
minRange
>
INIT_DRAG_POSITION
?
INIT_DRAG_POSITION
:
minRange
// 根据图片的宽高显示不同的效果 保证图片可以正常显示
if
(
IMG_RATIO
>=
1
)
{
let
cutT
=
Math
.
ceil
((
SCREEN_WIDTH
/
IMG_RATIO
-
(
SCREEN_WIDTH
/
IMG_RATIO
-
INIT_DRAG_POSITION
))
/
2
);
let
cutB
=
cutT
;
let
cutL
=
Math
.
ceil
((
SCREEN_WIDTH
-
SCREEN_WIDTH
+
INIT_DRAG_POSITION
)
/
2
);
let
cutR
=
cutL
;
_this
.
setData
({
cropperW
:
SCREEN_WIDTH
,
cropperH
:
SCREEN_WIDTH
/
IMG_RATIO
,
// 初始化left right
cropperL
:
Math
.
ceil
((
SCREEN_WIDTH
-
SCREEN_WIDTH
)
/
2
),
cropperT
:
Math
.
ceil
((
SCREEN_WIDTH
-
SCREEN_WIDTH
/
IMG_RATIO
)
/
2
),
cutL
:
cutL
,
cutT
:
cutT
,
cutR
:
cutR
,
cutB
:
cutB
,
// 图片缩放值
imageW
:
IMG_REAL_W
,
imageH
:
IMG_REAL_H
,
scaleP
:
IMG_REAL_W
/
SCREEN_WIDTH
,
qualityWidth
:
DRAW_IMAGE_W
,
innerAspectRadio
:
IMG_RATIO
})
}
else
{
let
cutL
=
Math
.
ceil
((
SCREEN_WIDTH
*
IMG_RATIO
-
(
SCREEN_WIDTH
*
IMG_RATIO
))
/
2
);
let
cutR
=
cutL
;
let
cutT
=
Math
.
ceil
((
SCREEN_WIDTH
-
INIT_DRAG_POSITION
)
/
2
);
let
cutB
=
cutT
;
_this
.
setData
({
cropperW
:
SCREEN_WIDTH
*
IMG_RATIO
,
cropperH
:
SCREEN_WIDTH
,
// 初始化left right
cropperL
:
Math
.
ceil
((
SCREEN_WIDTH
-
SCREEN_WIDTH
*
IMG_RATIO
)
/
2
),
cropperT
:
Math
.
ceil
((
SCREEN_WIDTH
-
SCREEN_WIDTH
)
/
2
),
cutL
:
cutL
,
cutT
:
cutT
,
cutR
:
cutR
,
cutB
:
cutB
,
// 图片缩放值
imageW
:
IMG_REAL_W
,
imageH
:
IMG_REAL_H
,
scaleP
:
IMG_REAL_W
/
SCREEN_WIDTH
,
qualityWidth
:
DRAW_IMAGE_W
,
innerAspectRadio
:
IMG_RATIO
})
}
_this
.
setData
({
isShowImg
:
true
})
uni
.
hideLoading
()
}
})
},
// 拖动时候触发的touchStart事件
contentStartMove
(
e
)
{
PAGE_X
=
e
.
touches
[
0
].
pageX
PAGE_Y
=
e
.
touches
[
0
].
pageY
},
// 拖动时候触发的touchMove事件
contentMoveing
(
e
)
{
var
_this
=
this
var
dragLengthX
=
(
PAGE_X
-
e
.
touches
[
0
].
pageX
)
*
DRAFG_MOVE_RATIO
var
dragLengthY
=
(
PAGE_Y
-
e
.
touches
[
0
].
pageY
)
*
DRAFG_MOVE_RATIO
// 左移
if
(
dragLengthX
>
0
)
{
if
(
this
.
cutL
-
dragLengthX
<
0
)
dragLengthX
=
this
.
cutL
}
else
{
if
(
this
.
cutR
+
dragLengthX
<
0
)
dragLengthX
=
-
this
.
cutR
}
if
(
dragLengthY
>
0
)
{
if
(
this
.
cutT
-
dragLengthY
<
0
)
dragLengthY
=
this
.
cutT
}
else
{
if
(
this
.
cutB
+
dragLengthY
<
0
)
dragLengthY
=
-
this
.
cutB
}
this
.
setData
({
cutL
:
this
.
cutL
-
dragLengthX
,
cutT
:
this
.
cutT
-
dragLengthY
,
cutR
:
this
.
cutR
+
dragLengthX
,
cutB
:
this
.
cutB
+
dragLengthY
})
PAGE_X
=
e
.
touches
[
0
].
pageX
PAGE_Y
=
e
.
touches
[
0
].
pageY
},
contentTouchEnd
()
{
},
// 获取图片
getImageInfo
()
{
var
_this
=
this
;
uni
.
showLoading
({
title
:
'
图片生成中...
'
,
});
// 将图片写入画布
const
ctx
=
uni
.
createCanvasContext
(
'
myCanvas
'
);
ctx
.
drawImage
(
_this
.
imageSrc
,
0
,
0
,
IMG_REAL_W
,
IMG_REAL_H
);
ctx
.
draw
(
true
,
()
=>
{
// 获取画布要裁剪的位置和宽度 均为百分比 * 画布中图片的宽度 保证了在微信小程序中裁剪的图片模糊 位置不对的问题 canvasT = (_this.cutT / _this.cropperH) * (_this.imageH / pixelRatio)
var
canvasW
=
((
_this
.
cropperW
-
_this
.
cutL
-
_this
.
cutR
)
/
_this
.
cropperW
)
*
IMG_REAL_W
;
var
canvasH
=
((
_this
.
cropperH
-
_this
.
cutT
-
_this
.
cutB
)
/
_this
.
cropperH
)
*
IMG_REAL_H
;
var
canvasL
=
(
_this
.
cutL
/
_this
.
cropperW
)
*
IMG_REAL_W
;
var
canvasT
=
(
_this
.
cutT
/
_this
.
cropperH
)
*
IMG_REAL_H
;
uni
.
canvasToTempFilePath
({
x
:
canvasL
,
y
:
canvasT
,
width
:
canvasW
,
height
:
canvasH
,
destWidth
:
canvasW
,
destHeight
:
canvasH
,
quality
:
0.5
,
canvasId
:
'
myCanvas
'
,
success
:
function
(
res
)
{
uni
.
hideLoading
()
// 成功获得地址的地方
uni
.
previewImage
({
current
:
''
,
// 当前显示图片的http链接
urls
:
[
res
.
tempFilePath
]
// 需要预览的图片http链接列表
})
}
});
});
},
// 设置大小的时候触发的touchStart事件
dragStart
(
e
)
{
T_PAGE_X
=
e
.
touches
[
0
].
pageX
T_PAGE_Y
=
e
.
touches
[
0
].
pageY
CUT_L
=
this
.
cutL
CUT_R
=
this
.
cutR
CUT_B
=
this
.
cutB
CUT_T
=
this
.
cutT
},
// 设置大小的时候触发的touchMove事件
dragMove
(
e
)
{
var
_this
=
this
var
dragType
=
e
.
target
.
dataset
.
drag
switch
(
dragType
)
{
case
'
right
'
:
var
dragLength
=
(
T_PAGE_X
-
e
.
touches
[
0
].
pageX
)
*
DRAFG_MOVE_RATIO
if
(
CUT_R
+
dragLength
<
0
)
dragLength
=
-
CUT_R
this
.
setData
({
cutR
:
CUT_R
+
dragLength
})
break
;
case
'
left
'
:
var
dragLength
=
(
T_PAGE_X
-
e
.
touches
[
0
].
pageX
)
*
DRAFG_MOVE_RATIO
if
(
CUT_L
-
dragLength
<
0
)
dragLength
=
CUT_L
if
((
CUT_L
-
dragLength
)
>
(
this
.
cropperW
-
this
.
cutR
))
dragLength
=
CUT_L
-
(
this
.
cropperW
-
this
.
cutR
)
this
.
setData
({
cutL
:
CUT_L
-
dragLength
})
break
;
case
'
top
'
:
var
dragLength
=
(
T_PAGE_Y
-
e
.
touches
[
0
].
pageY
)
*
DRAFG_MOVE_RATIO
if
(
CUT_T
-
dragLength
<
0
)
dragLength
=
CUT_T
if
((
CUT_T
-
dragLength
)
>
(
this
.
cropperH
-
this
.
cutB
))
dragLength
=
CUT_T
-
(
this
.
cropperH
-
this
.
cutB
)
this
.
setData
({
cutT
:
CUT_T
-
dragLength
})
break
;
case
'
bottom
'
:
var
dragLength
=
(
T_PAGE_Y
-
e
.
touches
[
0
].
pageY
)
*
DRAFG_MOVE_RATIO
if
(
CUT_B
+
dragLength
<
0
)
dragLength
=
-
CUT_B
this
.
setData
({
cutB
:
CUT_B
+
dragLength
})
break
;
case
'
rightBottom
'
:
var
dragLengthX
=
(
T_PAGE_X
-
e
.
touches
[
0
].
pageX
)
*
DRAFG_MOVE_RATIO
var
dragLengthY
=
(
T_PAGE_Y
-
e
.
touches
[
0
].
pageY
)
*
DRAFG_MOVE_RATIO
if
(
CUT_B
+
dragLengthY
<
0
)
dragLengthY
=
-
CUT_B
if
(
CUT_R
+
dragLengthX
<
0
)
dragLengthX
=
-
CUT_R
let
cutB
=
CUT_B
+
dragLengthY
;
let
cutR
=
CUT_R
+
dragLengthX
;
this
.
setData
({
cutB
:
cutB
,
cutR
:
cutR
})
break
;
default
:
break
;
}
}
}
}
</
script
>
<
style
>
/* pages/uni-cropper/index.wxss */
.uni-content-info
{
/* position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
align-items: center;
flex-direction: column; */
}
.cropper-config
{
padding
:
20px
40px
;
}
.cropper-content
{
min-height
:
750px
;
width
:
100%
;
}
.uni-corpper
{
position
:
relative
;
overflow
:
hidden
;
-webkit-user-select
:
none
;
-moz-user-select
:
none
;
-ms-user-select
:
none
;
user-select
:
none
;
-webkit-tap-highlight-color
:
transparent
;
-webkit-touch-callout
:
none
;
box-sizing
:
border-box
;
}
.uni-corpper-content
{
position
:
relative
;
}
.uni-corpper-content
image
{
display
:
block
;
width
:
100%
;
min-width
:
0
!important
;
max-width
:
none
!important
;
height
:
100%
;
min-height
:
0
!important
;
max-height
:
none
!important
;
image-orientation
:
0deg
!important
;
margin
:
0
auto
;
}
/* 移动图片效果 */
.uni-cropper-drag-box
{
position
:
absolute
;
top
:
0
;
right
:
0
;
bottom
:
0
;
left
:
0
;
cursor
:
move
;
background
:
rgba
(
0
,
0
,
0
,
0.6
);
z-index
:
1
;
}
/* 内部的信息 */
.uni-corpper-crop-box
{
position
:
absolute
;
background
:
rgba
(
255
,
255
,
255
,
0.3
);
z-index
:
2
;
}
.uni-corpper-crop-box
.uni-cropper-view-box
{
position
:
relative
;
display
:
block
;
width
:
100%
;
height
:
100%
;
overflow
:
visible
;
outline
:
1px
solid
#69f
;
outline-color
:
rgba
(
102
,
153
,
255
,
.75
)
}
/* 横向虚线 */
.uni-cropper-dashed-h
{
position
:
absolute
;
top
:
33.33333333%
;
left
:
0
;
width
:
100%
;
height
:
33.33333333%
;
border-top
:
1px
dashed
rgba
(
255
,
255
,
255
,
0.5
);
border-bottom
:
1px
dashed
rgba
(
255
,
255
,
255
,
0.5
);
}
/* 纵向虚线 */
.uni-cropper-dashed-v
{
position
:
absolute
;
left
:
33.33333333%
;
top
:
0
;
width
:
33.33333333%
;
height
:
100%
;
border-left
:
1px
dashed
rgba
(
255
,
255
,
255
,
0.5
);
border-right
:
1px
dashed
rgba
(
255
,
255
,
255
,
0.5
);
}
/* 四个方向的线 为了之后的拖动事件*/
.uni-cropper-line-t
{
position
:
absolute
;
display
:
block
;
width
:
100%
;
background-color
:
#69f
;
top
:
0
;
left
:
0
;
height
:
1px
;
opacity
:
0.1
;
cursor
:
n-resize
;
}
.uni-cropper-line-t
::before
{
content
:
''
;
position
:
absolute
;
top
:
50%
;
right
:
0px
;
width
:
100%
;
-webkit-transform
:
translate3d
(
0
,
-50%
,
0
);
transform
:
translate3d
(
0
,
-50%
,
0
);
bottom
:
0
;
height
:
41px
;
background
:
transparent
;
z-index
:
11
;
}
.uni-cropper-line-r
{
position
:
absolute
;
display
:
block
;
background-color
:
#69f
;
top
:
0
;
right
:
0px
;
width
:
1px
;
opacity
:
0.1
;
height
:
100%
;
cursor
:
e-resize
;
}
.uni-cropper-line-r
::before
{
content
:
''
;
position
:
absolute
;
top
:
0
;
left
:
50%
;
width
:
41px
;
-webkit-transform
:
translate3d
(
-50%
,
0
,
0
);
transform
:
translate3d
(
-50%
,
0
,
0
);
bottom
:
0
;
height
:
100%
;
background
:
transparent
;
z-index
:
11
;
}
.uni-cropper-line-b
{
position
:
absolute
;
display
:
block
;
width
:
100%
;
background-color
:
#69f
;
bottom
:
0
;
left
:
0
;
height
:
1px
;
opacity
:
0.1
;
cursor
:
s-resize
;
}
.uni-cropper-line-b
::before
{
content
:
''
;
position
:
absolute
;
top
:
50%
;
right
:
0px
;
width
:
100%
;
-webkit-transform
:
translate3d
(
0
,
-50%
,
0
);
transform
:
translate3d
(
0
,
-50%
,
0
);
bottom
:
0
;
height
:
41px
;
background
:
transparent
;
z-index
:
11
;
}
.uni-cropper-line-l
{
position
:
absolute
;
display
:
block
;
background-color
:
#69f
;
top
:
0
;
left
:
0
;
width
:
1px
;
opacity
:
0.1
;
height
:
100%
;
cursor
:
w-resize
;
}
.uni-cropper-line-l
::before
{
content
:
''
;
position
:
absolute
;
top
:
0
;
left
:
50%
;
width
:
41px
;
-webkit-transform
:
translate3d
(
-50%
,
0
,
0
);
transform
:
translate3d
(
-50%
,
0
,
0
);
bottom
:
0
;
height
:
100%
;
background
:
transparent
;
z-index
:
11
;
}
.uni-cropper-point
{
width
:
5px
;
height
:
5px
;
background-color
:
#69f
;
opacity
:
.75
;
position
:
absolute
;
z-index
:
3
;
}
.point-t
{
top
:
-3px
;
left
:
50%
;
margin-left
:
-3px
;
cursor
:
n-resize
;
}
.point-tr
{
top
:
-3px
;
left
:
100%
;
margin-left
:
-3px
;
cursor
:
n-resize
;
}
.point-r
{
top
:
50%
;
left
:
100%
;
margin-left
:
-3px
;
margin-top
:
-3px
;
cursor
:
n-resize
;
}
.point-rb
{
left
:
100%
;
top
:
100%
;
-webkit-transform
:
translate3d
(
-50%
,
-50%
,
0
);
transform
:
translate3d
(
-50%
,
-50%
,
0
);
cursor
:
n-resize
;
width
:
36px
;
height
:
36px
;
background-color
:
#69f
;
position
:
absolute
;
z-index
:
1112
;
opacity
:
1
;
}
.point-b
{
left
:
50%
;
top
:
100%
;
margin-left
:
-3px
;
margin-top
:
-3px
;
cursor
:
n-resize
;
}
.point-bl
{
left
:
0%
;
top
:
100%
;
margin-left
:
-3px
;
margin-top
:
-3px
;
cursor
:
n-resize
;
}
.point-l
{
left
:
0%
;
top
:
50%
;
margin-left
:
-3px
;
margin-top
:
-3px
;
cursor
:
n-resize
;
}
.point-lt
{
left
:
0%
;
top
:
0%
;
margin-left
:
-3px
;
margin-top
:
-3px
;
cursor
:
n-resize
;
}
/* 裁剪框预览内容 */
.uni-cropper-viewer
{
position
:
relative
;
width
:
100%
;
height
:
100%
;
overflow
:
hidden
;
}
.uni-cropper-viewer
image
{
position
:
absolute
;
z-index
:
2
;
}
</
style
>
examples/hello-uniapp/pages/template/echart/echart.vue
0 → 100644
浏览文件 @
6f52113e
<
template
>
<div
class=
"container"
>
<view
class=
"canvasView"
>
<view
class=
"title"
>
饼图示例
</view>
<mpvue-echarts
:echarts=
"echarts"
:onInit=
"pieInit"
canvasId=
"pie"
/>
</view>
<view
class=
"canvasView"
>
<view
class=
"title"
>
折线图示例
</view>
<mpvue-echarts
:echarts=
"echarts"
:onInit=
"lineInit"
canvasId=
"line"
/>
</view>
</div>
</
template
>
<
script
>
import
*
as
echarts
from
'
../../../components/echarts/echarts.simple.min.js
'
;
import
mpvueEcharts
from
'
../../../components/mpvue-echarts/src/echarts.vue
'
;
function
getPieOption
()
{
return
{
animation
:
false
,
backgroundColor
:
'
#F8F8F8
'
,
color
:
[
'
#37A2DA
'
,
'
#32C5E9
'
,
'
#67E0E3
'
,
'
#91F2DE
'
,
'
#FFDB5C
'
,
'
#FF9F7F
'
],
series
:
[{
label
:
{
normal
:
{
fontSize
:
14
}
},
type
:
'
pie
'
,
center
:
[
'
50%
'
,
'
50%
'
],
radius
:
[
0
,
'
60%
'
],
data
:
[{
value
:
55
,
name
:
'
北京
'
},
{
value
:
20
,
name
:
'
武汉
'
},
{
value
:
10
,
name
:
'
杭州
'
},
{
value
:
20
,
name
:
'
广州
'
},
{
value
:
38
,
name
:
'
上海
'
}],
itemStyle
:
{
emphasis
:
{
shadowBlur
:
10
,
shadowOffsetX
:
0
,
shadowColor
:
'
rgba(0, 2, 2, 0.3)
'
}
}
}]
}
}
function
getLineOption
()
{
return
{
animation
:
false
,
color
:
[
'
#37A2DA
'
,
'
#9FE6B8
'
],
legend
:
{
data
:
[
'
蒸发量
'
,
'
降水量
'
]
},
grid
:
{
x
:
35
,
x2
:
10
,
y
:
30
,
y2
:
25
},
calculable
:
false
,
xAxis
:
[{
type
:
'
category
'
,
data
:
[
'
1月
'
,
'
2月
'
,
'
3月
'
,
'
4月
'
,
'
5月
'
,
'
6月
'
,
'
7月
'
,
'
8月
'
,
'
9月
'
,
'
10月
'
,
'
11月
'
,
'
12月
'
]
}],
yAxis
:
[{
type
:
'
value
'
,
splitArea
:
{
show
:
true
}
}],
series
:
[{
name
:
'
蒸发量
'
,
type
:
'
line
'
,
data
:
[
2.0
,
4.9
,
7.0
,
23.2
,
25.6
,
76.7
,
135.6
,
162.2
,
32.6
,
20.0
,
6.4
,
3.3
]
},
{
name
:
'
降水量
'
,
type
:
'
line
'
,
data
:
[
2.6
,
5.9
,
9.0
,
26.4
,
28.7
,
70.7
,
175.6
,
182.2
,
48.7
,
18.8
,
6.0
,
2.3
]
}]
}
}
export
default
{
data
()
{
return
{
echarts
,
pieInit
:
function
(
canvas
,
width
,
height
)
{
let
pieChart
=
echarts
.
init
(
canvas
,
null
,
{
width
:
width
,
height
:
height
})
canvas
.
setChart
(
pieChart
)
pieChart
.
setOption
(
getPieOption
())
return
pieChart
},
lineInit
:
function
(
canvas
,
width
,
height
)
{
let
lineChart
=
echarts
.
init
(
canvas
,
null
,
{
width
:
width
,
height
:
height
})
canvas
.
setChart
(
lineChart
)
lineChart
.
setOption
(
getLineOption
())
return
lineChart
}
}
},
components
:
{
mpvueEcharts
}
}
</
script
>
<
style
>
page
,
view
{
display
:
flex
;
/* uni-app默认使用flex布局。因为flex布局有利于跨更多平台,尤其是采用原生渲染的平台。如不了解flex布局,请参考http://www.w3.org/TR/css3-flexbox/。若不需要flex布局可删除本行*/
}
page
{
min-height
:
100%
;
}
.title
{
margin-left
:
30px
;
color
:
#8f8f94
;
}
.container
,
.canvasView
{
flex
:
1
;
flex-direction
:
column
;
}
</
style
>
examples/hello-uniapp/pages/template/grid-pagination/grid-pagination.vue
0 → 100644
浏览文件 @
6f52113e
<
template
>
<view
class=
"page"
>
<page-head
:title=
"title"
></page-head>
<view
class=
"uni-list"
>
<view
class=
"uni-list-cell uni-list-cell-pd"
>
<view
class=
"uni-list-cell-db"
>
循环
</view>
<switch
@
change=
"switchChange"
/>
</view>
</view>
<swiper
:indicator-dots=
"true"
:autoplay=
"true"
:circular=
"isCircular"
>
<swiper-item>
<view
class=
"uni-grid-9"
>
<view
class=
"uni-grid-9-item"
hover-class=
"uni-grid-9-item-hover"
v-for=
"(item,index) in date"
:key=
"index"
:class=
"index % 3 === 2 ? 'no-border-right' : ''"
>
<image
class=
"uni-grid-9-image"
:src=
"item"
></image>
<text
class=
"uni-grid-9-text"
>
grid
</text>
</view>
</view>
</swiper-item>
<swiper-item>
<view
class=
"uni-grid-9"
>
<view
class=
"uni-grid-9-item"
hover-class=
"uni-grid-9-item-hover"
v-for=
"(item,index) in date"
:key=
"index"
:class=
"index % 3 === 2 ? 'no-border-right' : ''"
>
<image
class=
"uni-grid-9-image"
:src=
"item"
></image>
<text
class=
"uni-grid-9-text"
>
grid
</text>
</view>
</view>
</swiper-item>
<swiper-item>
<view
class=
"uni-grid-9"
>
<view
class=
"uni-grid-9-item"
hover-class=
"uni-grid-9-item-hover"
v-for=
"(item,index) in date"
:key=
"index"
:class=
"index % 3 === 2 ? 'no-border-right' : ''"
>
<image
class=
"uni-grid-9-image"
:src=
"item"
></image>
<text
class=
"uni-grid-9-text"
>
grid
</text>
</view>
</view>
</swiper-item>
</swiper>
</view>
</
template
>
<
script
>
import
pageHead
from
'
../../../components/page-head.vue
'
export
default
{
data
(){
return
{
title
:
'
grid
'
,
date
:
[
"
../../../static/c1.png
"
,
"
../../../static/c2.png
"
,
"
../../../static/c3.png
"
,
"
../../../static/c4.png
"
,
"
../../../static/c5.png
"
,
"
../../../static/c6.png
"
,
"
../../../static/c7.png
"
,
"
../../../static/c8.png
"
,
"
../../../static/c9.png
"
],
isCircular
:
false
}
},
methods
:{
switchChange
(
e
){
this
.
isCircular
=
e
.
detail
.
value
;
}
},
components
:
{
pageHead
}
}
</
script
>
<
style
>
@import
"../../../common/uni.css"
;
.page
{
padding-top
:
60px
;
}
page
{
background
:
#efeff4
;
}
.uni-list
{
margin-bottom
:
30px
;
}
.uni-list-cell
{
justify-content
:
flex-start
}
swiper
{
height
:
600px
;
}
</
style
>
examples/hello-uniapp/pages/template/list2detail-detail/list2detail-detail.vue
浏览文件 @
6f52113e
...
...
@@ -17,10 +17,12 @@
<
script
>
export
default
{
data
:
{
title
:
'
list-triplex-row
'
,
banner
:
{},
htmlString
:
""
data
()
{
return
{
title
:
'
list-triplex-row
'
,
banner
:
{},
htmlString
:
""
}
},
onShareAppMessage
()
{
return
{
...
...
@@ -35,17 +37,13 @@
title
:
this
.
banner
.
title
})
},
onUnload
()
{
this
.
htmlString
=
""
;
this
.
banner
=
{}
},
methods
:
{
getDetail
()
{
uni
.
request
({
url
:
'
https://spider.dcloud.net.cn/api/news/36kr/
'
+
this
.
banner
.
post_id
,
success
:
(
data
)
=>
{
if
(
data
.
statusCode
==
200
)
{
this
.
htmlString
=
data
.
data
.
content
.
replace
(
/
\\
/g
,
""
).
replace
(
/<img/g
,
"
<img width='100%'
"
);
this
.
htmlString
=
data
.
data
.
content
.
replace
(
/
\\
/g
,
""
).
replace
(
/<img/g
,
"
<img style=
\"
display:none;
\"
"
);
}
},
fail
:
()
=>
{
...
...
examples/hello-uniapp/pages/template/list2detail-list/list2detail-list.vue
浏览文件 @
6f52113e
...
...
@@ -25,11 +25,13 @@
var
dateUtils
=
require
(
'
../../../common/util.js
'
).
dateUtils
;
export
default
{
data
:
{
banner
:
{},
listData
:
[],
last_id
:
""
,
reload
:
false
data
()
{
return
{
banner
:
{},
listData
:
[],
last_id
:
""
,
reload
:
false
}
},
onLoad
()
{
this
.
getBanner
();
...
...
@@ -41,11 +43,6 @@
this
.
getBanner
();
this
.
getList
();
},
onUnload
()
{
this
.
banner
=
{},
this
.
listData
=
[],
this
.
last_id
=
""
;
},
onReachBottom
()
{
this
.
getList
();
},
...
...
@@ -64,7 +61,7 @@
}
},
fail
:
(
data
,
code
)
=>
{
console
.
log
(
'
fail
'
+
JSON
.
stringify
(
data
));
console
.
log
(
'
fail
'
+
JSON
.
stringify
(
data
));
}
})
},
...
...
@@ -72,7 +69,6 @@
var
data
=
{
column
:
"
id,post_id,title,author_name,cover,published_at
"
//需要的字段名
};
console
.
log
(
this
.
last_id
);
if
(
this
.
last_id
)
{
//说明已有数据,目前处于上拉加载
data
.
minId
=
this
.
last_id
;
data
.
time
=
new
Date
().
getTime
()
+
""
;
...
...
@@ -90,12 +86,11 @@
}
},
fail
:
(
data
,
code
)
=>
{
console
.
log
(
'
fail
'
+
JSON
.
stringify
(
data
));
console
.
log
(
'
fail
'
+
JSON
.
stringify
(
data
));
}
})
},
goDetail
:
function
(
e
)
{
console
.
log
(
e
);
if
(
!
/前|刚刚/
.
test
(
e
.
published_at
))
{
e
.
published_at
=
dateUtils
.
format
(
e
.
published_at
);
}
...
...
examples/hello-uniapp/pages/template/qrcode/qrcode.vue
浏览文件 @
6f52113e
<
template
>
<view>
<view
class=
"container"
>
<page-head
:title=
"title"
></page-head>
<view
class=
"page-body"
>
<view
class=
"page-section"
>
...
...
@@ -23,16 +23,19 @@
<button
type=
"warn"
@
tap=
"clearQrcode"
>
清除二维码
</button>
</view>
</view>
<page-foot
:name=
"name"
></page-foot>
</view>
</
template
>
<
script
>
import
pageHead
from
'
../../../components/page-head.vue
'
import
pageFoot
from
'
../../../components/page-foot.vue
'
import
qrcode
from
'
../../../components/qrcode/qrcode.vue
'
export
default
{
data
()
{
return
{
title
:
'
二维码生成
'
,
name
:
'
诗小柒
'
,
showClearIcon
:
false
,
qrval
:
''
,
qrsize
:
100
,
...
...
@@ -64,6 +67,7 @@
},
components
:
{
pageHead
,
pageFoot
,
qrcode
}
}
...
...
examples/hello-uniapp/pages/template/template.vue
浏览文件 @
6f52113e
...
...
@@ -2,7 +2,7 @@
<view
class=
"index"
>
<view
class=
"index-hd"
>
<image
class=
"index-logo"
src=
"../../static/templateIndex.png"
></image>
<view
class=
"page-section-title"
>
以下是uni-app的部分模
版示例,欢迎大家积极分享更多的模版
,一起完善uni-app生态。
</view>
<view
class=
"page-section-title"
>
以下是uni-app的部分模
板示例,欢迎大家积极分享更多的模板
,一起完善uni-app生态。
</view>
</view>
<view
class=
"uni-card"
v-for=
"(list,index) in lists"
:key=
"index"
>
<view
class=
"uni-list"
>
...
...
@@ -52,12 +52,20 @@
},
{
name
:
'
图文列表
'
,
url
:
'
media-list
'
},
{
},
{
name
:
'
商品列表
'
,
url
:
'
product-list
'
},{
},
{
id
:
'
grid
'
,
name
:
'
九宫格
'
,
url
:
'
grid
'
open
:
false
,
pages
:
[{
name
:
'
默认样式
'
,
url
:
'
grid
'
},
{
name
:
'
可左右滑动的九宫导航
'
,
url
:
'
grid-pagination
'
}]
},
{
name
:
'
popup
'
,
url
:
'
popup
'
...
...
@@ -65,7 +73,7 @@
name
:
'
选项卡
'
,
url
:
'
tabbar
'
},
// #ifdef APP-PLUS
// #ifdef APP-PLUS
{
name
:
'
问题反馈
'
,
url
:
'
/platforms/app-plus/feedback/feedback
'
...
...
@@ -78,11 +86,17 @@
name
:
'
markdown富文本渲染
'
,
url
:
'
mdparse
'
},
{
name
:
'
二维码生成
'
,
url
:
'
qrcode
'
name
:
'
echart图表
'
,
url
:
'
echart
'
},
{
name
:
'
列表到详情示例
'
,
url
:
'
list2detail-list
'
},
{
name
:
'
二维码生成
'
,
url
:
'
qrcode
'
},
{
name
:
'
图片裁剪
'
,
url
:
'
crop
'
}
]
}
...
...
@@ -93,7 +107,7 @@
path
:
'
/pages/template/template
'
}
},
onNavigationBarButtonTap
(
e
){
onNavigationBarButtonTap
(
e
)
{
uni
.
navigateTo
({
url
:
'
/platforms/app-plus/about/about
'
})
...
...
@@ -122,10 +136,11 @@
<
style
>
@import
"../../common/uni.css"
;
.index
{
.index
{
padding-bottom
:
1px
;
}
.uni-card
{
box-shadow
:
none
;
}
...
...
examples/hello-uniapp/platforms/app-plus/about/about.vue
浏览文件 @
6f52113e
...
...
@@ -141,6 +141,7 @@
flex
:
1
;
padding
:
30px
;
flex-direction
:
column
;
justify-content
:
center
;
}
.desc
{
margin-top
:
30px
;
...
...
examples/hello-uniapp/platforms/app-plus/feedback/feedback.vue
浏览文件 @
6f52113e
...
...
@@ -110,14 +110,13 @@
});
},
send
()
{
//发送反馈
console
.
log
(
this
.
sendDate
);
console
.
log
(
JSON
.
stringify
(
this
.
sendDate
)
);
let
imgs
=
this
.
imageList
.
map
((
value
)
=>
{
return
{
name
:
"
uni-app.feedback
"
,
uri
:
value
}
})
console
.
log
(
imgs
)
uni
.
uploadFile
({
url
:
"
https://service.dcloud.net.cn/feedback
"
,
files
:
imgs
,
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录