You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by cx...@apache.org on 2017/04/10 05:54:02 UTC
[12/15] incubator-weex git commit: + [example] Add compositing
showcase
+ [example] Add compositing showcase
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/4a7a54b3
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/4a7a54b3
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/4a7a54b3
Branch: refs/heads/0.12-dev
Commit: 4a7a54b3aed794774fd0e242ca1c2bd33e00d439
Parents: aab1eef
Author: \u9690\u98ce <cx...@apache.org>
Authored: Sun Apr 9 22:05:10 2017 +0800
Committer: \u9690\u98ce <cx...@apache.org>
Committed: Sun Apr 9 22:05:10 2017 +0800
----------------------------------------------------------------------
examples/vue/index.vue | 10 +++-
examples/vue/showcase/compositing.vue | 89 ++++++++++++++++++++++++++++++
2 files changed, 98 insertions(+), 1 deletion(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/4a7a54b3/examples/vue/index.vue
----------------------------------------------------------------------
diff --git a/examples/vue/index.vue b/examples/vue/index.vue
index e37931d..fb4693d 100644
--- a/examples/vue/index.vue
+++ b/examples/vue/index.vue
@@ -6,8 +6,9 @@
module.exports = {
data: function () {
var root = typeof window === 'object' ? 'vue-web/vue' : 'vue'
+
return {
- items: [
+ items: [
// common
{name: root + '/syntax/hello-world', title: 'Hello World'},
{name: root + '/style/index', title: 'Common Style'},
@@ -49,6 +50,13 @@
},
components: {
exampleList: require('./include/example-list.vue')
+ },
+ created: function() {
+ let root = typeof window === 'object' ? 'vue-web/vue' : 'vue'
+ let platform = this.$getConfig().env.platform.toLowerCase()
+ if (platform === 'ios') {
+ this.items.push({name: root + '/showcase/compositing', title: 'Compositing'})
+ }
}
}
</script>
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/4a7a54b3/examples/vue/showcase/compositing.vue
----------------------------------------------------------------------
diff --git a/examples/vue/showcase/compositing.vue b/examples/vue/showcase/compositing.vue
new file mode 100644
index 0000000..58e238f
--- /dev/null
+++ b/examples/vue/showcase/compositing.vue
@@ -0,0 +1,89 @@
+
+<template>
+ <div class="wrapper" @click="update" >
+ <div class="item" compositing=true>
+ <div class="itemWrapper">
+ <div class="nameWrapper">
+ <text class="itemName">Thomas Carlyle</text>
+ </div>
+ <image class="itemPhoto" src="https://gw.alicdn.com/tps/TB1Jl1CPFXXXXcJXXXXXXXXXXXX-370-370.jpg"></image>
+ <div class="descWrapper">
+ <text class="itemDesc">Genius only means hard-working all one\'s life</text>
+ </div>
+ </div>
+ </div>
+
+ <div class="item" compositing=false>
+ <div class="itemWrapper">
+ <div class="nameWrapper">
+ <text class="itemName">Thomas Carlyle</text>
+ </div>
+ <image class="itemPhoto" src="https://gw.alicdn.com/tps/TB1Jl1CPFXXXXcJXXXXXXXXXXXX-370-370.jpg"></image>
+ <div class="descWrapper">
+ <text class="itemDesc">Genius only means hard-working all one\'s life</text>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<style>
+ .wrapper {
+ align-items: center;
+ opacity: 0.8;
+ }
+ .itemWrapper {
+ flex:1;
+ border-top-right-radius: 80;
+ border-bottom-right-radius: 80;
+ border-top-width: 10;
+ border-top-color: red;
+ border-style: dashed;
+ align-items: center;
+ background-color: white;
+ }
+ .nameWrapper {
+ background-color:rgba(255,0,0,0.5);
+ border-radius: 30;
+ overflow: visible;
+ border-color: black;
+ border-width: 10;
+ }
+ .item {
+ margin-top: 120px;
+ background-color: #CCCCCC;
+ align-items: center;
+ }
+ .itemName {
+ font-size:28;
+ color:#333333;
+ line-height:42;
+ text-align:left;
+ margin-top: 24;
+ }
+ .itemPhoto {
+ margin-top: 18;
+ width: 220;
+ height: 220;
+ margin-bottom: 18;
+ border-radius: 30;
+ overflow: hidden;
+ background-color: blue;
+ }
+ .itemDesc {
+ font-size:24;
+ margin:12;
+ color:#999999;
+ line-height:36;
+ text-align:left;
+ }
+</style>
+
+<script>
+ module.exports = {
+ data: {
+ },
+ methods: {
+ }
+ }
+</script>