Skip to content

Commit 575197d

Browse files
nuochongnuochong
committed
update nsvue
1 parent 6b41e43 commit 575197d

File tree

2 files changed

+184
-98
lines changed

2 files changed

+184
-98
lines changed

‎app/components/App.vue‎

Lines changed: 27 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,26 @@
11
<template>
22
<Page>
33
<ActionBar class="action-bar" title="Welcome to NativeScript-Vue!">
4-
<ActionItem @tap="onTapEdit" v-show="!isEditing" ios.systemIcon="2" ios.position="right" android.systemIcon="ic_menu_edit" />
5-
<ActionItem @tap="onTapSave" v-show="isEditing" ios.systemIcon="3" ios.position="right" android.systemIcon="ic_menu_save" />
6-
<ActionItem @tap="onTapCancel" v-show="isEditing" ios.systemIcon="1" android.systemIcon="ic_menu_close_clear_cancel" />
4+
<ActionItem
5+
@tap="onTapEdit"
6+
v-show="!isEditing"
7+
ios.systemIcon="2"
8+
ios.position="right"
9+
android.systemIcon="ic_menu_edit"
10+
/>
11+
<ActionItem
12+
@tap="onTapSave"
13+
v-show="isEditing"
14+
ios.systemIcon="3"
15+
ios.position="right"
16+
android.systemIcon="ic_menu_save"
17+
/>
18+
<ActionItem
19+
@tap="onTapCancel"
20+
v-show="isEditing"
21+
ios.systemIcon="1"
22+
android.systemIcon="ic_menu_close_clear_cancel"
23+
/>
724
</ActionBar>
825
<ScrollView>
926
<!--<GridLayout colums="*" rows="*">-->
@@ -13,19 +30,18 @@
1330
<Button class="btn btn-primary dd" text="应用" @tap="project" />
1431
</StackLayout>
1532
<!-- </GridLayout> -->
16-
1733
</ScrollView>
1834
</Page>
1935
</template>
2036

2137
<script>
22-
import example from "./example/Main";
23-
import project from "./project/Main";
38+
import example from './example/Main';
39+
import project from './project/Main';
2440
2541
export default {
2642
data() {
2743
return {
28-
msg: "Hello World!"
44+
msg: 'Hello World!'
2945
};
3046
},
3147
mounted() {},
@@ -35,18 +51,18 @@ export default {
3551
},
3652
project: function() {
3753
this.$navigateTo(project);
38-
console.log("project");
54+
console.log('project');
3955
},
4056
onButtonTap: function() {
4157
this.$navigateTo(HelloWorld, {
4258
animated: true,
4359
transition: {
44-
name: "slide",
60+
name: 'slide',
4561
duration: 380,
46-
curve: "easeIn"
62+
curve: 'easeIn'
4763
}
4864
});
49-
},
65+
}
5066
}
5167
};
5268
</script>

‎app/components/project/Main.vue‎

Lines changed: 157 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,138 @@
11
<template>
2-
<Page class="page" actionBarHidden="true">
3-
<ActionBar id="header head">
4-
<StackLayout orientation="horizontal" class="btn menu hh">
5-
<Image src="~/assets/icons/arrow.png" class="icon" @tap="$navigateBack" width="40" height="40" verticalAlignment="left" />
6-
<Label class="tess" text="NativeScript" fontSize="24" horizontalAlignment="right" />
7-
</StackLayout>
8-
<!-- <NavigationButton text="Go Back" android.systemIcon="ic_menu_back" @tap="$navigateBack"/> -->
9-
</ActionBar>
10-
11-
<GridLayout rows="60, *, auto" backgroundColor="#26252A">
12-
<Header class="header" row="0" />
13-
<ScrollView orientation="vertical" row="1" backgroundColor="red" v-show="selectedTabview == 0">
14-
<StackLayout flexDirection="column" height="100%">
15-
<!-- <Tabbar2 v-for="(place,index) in places" :key="index" :place="place" :index="index" :active="active" width="100%" /> -->
16-
<ListView ref='ca' for="(place,index) in places" :key="index" :place="place" :index="index" :active="active" height="100%" class="dt" backgroundColor="white">
17-
<v-template>
18-
<WrapLayout height="415" class="card" flexDirection="column" justifyContent="center" >
19-
<AbsoluteLayout width="56%" height="80%" class="ll" alignSelf="center">
20-
<Image src="~/assets/icons/box-shadow.png" width="100%" height="97%" class="background" />
21-
<FlexboxLayout flexDirection="column" width="100%" height="97%" padding="12">
22-
<StackLayout orientation="vertical" class="head">
23-
<Label :text="place.name" class="title bold" />
24-
<Label :text="place.type" class="subTitle semi-bold" horizontalAlignment="center" />
25-
<FlexboxLayout flexDirection="row" height="12" marginTop="4">
26-
<Image src="~/assets/icons/Star-Red.png" v-for="star in place.stars" :key="star" marginRight="4" />
27-
<Image src="~/assets/icons/Star-grey.png" v-for="star in (5 - place.stars)" :key="(star * 10)" marginRight="4" />
28-
</FlexboxLayout>
29-
</StackLayout>
30-
<StackLayout orientation="vertical" :backgroundImage="'~/assets/media/' + place.media" height="58%" width="100%" class="img">
31-
</StackLayout>
32-
</FlexboxLayout>
33-
</AbsoluteLayout>
34-
</WrapLayout>
35-
</v-template>
36-
<!-- <Label text="first" width="100%" height="415" backgroundColor="#43b883" />
2+
<Page class="page" actionBarHidden="true">
3+
<ActionBar id="header head">
4+
<StackLayout orientation="horizontal" class="btn menu hh">
5+
<Image
6+
src="~/assets/icons/arrow.png"
7+
class="icon"
8+
@tap="$navigateBack"
9+
width="40"
10+
height="40"
11+
verticalAlignment="left"
12+
/>
13+
<Label class="tess" text="NativeScript" fontSize="24" horizontalAlignment="right" />
14+
</StackLayout>
15+
<!-- <NavigationButton text="Go Back" android.systemIcon="ic_menu_back" @tap="$navigateBack"/> -->
16+
</ActionBar>
17+
18+
<GridLayout rows="60, *, auto" backgroundColor="#26252A">
19+
<Header class="header" row="0" />
20+
<ScrollView
21+
orientation="vertical"
22+
row="1"
23+
backgroundColor="red"
24+
v-show="selectedTabview == 0"
25+
>
26+
<StackLayout flexDirection="column" height="100%">
27+
<!-- <Tabbar2 v-for="(place,index) in places" :key="index" :place="place" :index="index" :active="active" width="100%" /> -->
28+
<ListView
29+
ref="ca"
30+
for="(place,index) in places"
31+
:key="index"
32+
:place="place"
33+
:index="index"
34+
:active="active"
35+
height="100%"
36+
class="dt"
37+
backgroundColor="white"
38+
>
39+
<v-template>
40+
<WrapLayout height="415" class="card" flexDirection="column" justifyContent="center">
41+
<AbsoluteLayout width="56%" height="80%" class="ll" alignSelf="center">
42+
<Image
43+
src="~/assets/icons/box-shadow.png"
44+
width="100%"
45+
height="97%"
46+
class="background"
47+
/>
48+
<FlexboxLayout flexDirection="column" width="100%" height="97%" padding="12">
49+
<StackLayout orientation="vertical" class="head">
50+
<Label :text="place.name" class="title bold" />
51+
<Label
52+
:text="place.type"
53+
class="subTitle semi-bold"
54+
horizontalAlignment="center"
55+
/>
56+
<FlexboxLayout flexDirection="row" height="12" marginTop="4">
57+
<Image
58+
src="~/assets/icons/Star-Red.png"
59+
v-for="star in place.stars"
60+
:key="star"
61+
marginRight="4"
62+
/>
63+
<Image
64+
src="~/assets/icons/Star-grey.png"
65+
v-for="star in (5 - place.stars)"
66+
:key="(star * 10)"
67+
marginRight="4"
68+
/>
69+
</FlexboxLayout>
70+
</StackLayout>
71+
<StackLayout
72+
orientation="vertical"
73+
:backgroundImage="'~/assets/media/' + place.media"
74+
height="58%"
75+
width="100%"
76+
class="img"
77+
></StackLayout>
78+
</FlexboxLayout>
79+
</AbsoluteLayout>
80+
</WrapLayout>
81+
</v-template>
82+
<!-- <Label text="first" width="100%" height="415" backgroundColor="#43b883" />
3783
<Label text="second" width="100%" height="415" backgroundColor="#1c6b48" />
3884
<Label text="third" width="100%" height="415" backgroundColor="#289062" />
3985
<Label text="fourth" width="100%" height="415" backgroundColor="#1c6b48" />
40-
<Label text="third" width="100%" height="415" backgroundColor="#289062" /> -->
41-
</ListView>
42-
</StackLayout>
43-
</ScrollView>
44-
<ScrollView orientation="vertical" row="1" backgroundColor="yellow" v-show="selectedTabview == 1">
45-
<StackLayout>
46-
<Tabbar2 v-for="(place,index) in places" :key="index" :place="place" :index="index" :active="active" width="100%"/>
47-
</StackLayout>
48-
</ScrollView>
49-
<ScrollView orientation="vertical" row="1" backgroundColor="green" v-show="selectedTabview == 2">
50-
<StackLayout>
51-
<Tabbar2 v-for="(place,index) in places" :key="index" :place="place" :index="index" :active="active" width="100%"/>
52-
</StackLayout>
53-
</ScrollView>
54-
<Footer class="footer" row="2" @change="change" />
55-
</GridLayout>
56-
</Page>
86+
<Label text="third" width="100%" height="415" backgroundColor="#289062" />-->
87+
</ListView>
88+
</StackLayout>
89+
</ScrollView>
90+
<ScrollView
91+
orientation="vertical"
92+
row="1"
93+
backgroundColor="yellow"
94+
v-show="selectedTabview == 1"
95+
>
96+
<StackLayout>
97+
<Tabbar2
98+
v-for="(place,index) in places"
99+
:key="index"
100+
:place="place"
101+
:index="index"
102+
:active="active"
103+
width="100%"
104+
/>
105+
</StackLayout>
106+
</ScrollView>
107+
<ScrollView
108+
orientation="vertical"
109+
row="1"
110+
backgroundColor="green"
111+
v-show="selectedTabview == 2"
112+
>
113+
<StackLayout>
114+
<Tabbar2
115+
v-for="(place,index) in places"
116+
:key="index"
117+
:place="place"
118+
:index="index"
119+
:active="active"
120+
width="100%"
121+
/>
122+
</StackLayout>
123+
</ScrollView>
124+
<Footer class="footer" row="2" @change="change" />
125+
</GridLayout>
126+
</Page>
57127
</template>
58128

59129
<script>
60-
import Header from "./Header";
61-
import Footer from "./Footer";
62-
import Home from "./Home";
63-
import Tabbar1 from "./tabbar/tabbar1";
64-
import Tabbar2 from "./tabbar/tabbar2";
65-
import Tabbar3 from "./tabbar/tabbar3";
130+
import Header from './Header';
131+
import Footer from './Footer';
132+
import Home from './Home';
133+
import Tabbar1 from './tabbar/tabbar1';
134+
import Tabbar2 from './tabbar/tabbar2';
135+
import Tabbar3 from './tabbar/tabbar3';
66136
export default {
67137
components: {
68138
Header,
@@ -71,42 +141,43 @@ export default {
71141
//Searching,
72142
Tabbar1,
73143
Tabbar2,
74-
Tabbar3,
144+
Tabbar3
75145
},
76-
data () {
146+
data() {
77147
return {
78148
surprise: false,
79-
title: "点击我！【Tap me!】",
80-
imgsrc: "res://icon",
81-
places: [{
82-
name: "The Custom House1",
83-
type: "Architecture",
84-
stars: 4,
85-
media: "Dublin.jpg"
86-
},
87-
{
88-
name: "Christ Church's",
89-
type: "Architecture",
90-
stars: 4,
91-
media: "Cathedral.jpg"
92-
},
93-
{
94-
name: "Bord Gáis Energ",
95-
type: "Architecture",
96-
stars: 5,
97-
media: "Theater.jpg"
98-
}
149+
title: '点击我！【Tap me!】',
150+
imgsrc: 'res://icon',
151+
places: [
152+
{
153+
name: 'The Custom House1',
154+
type: 'Architecture',
155+
stars: 4,
156+
media: 'Dublin.jpg'
157+
},
158+
{
159+
name: "Christ Church's",
160+
type: 'Architecture',
161+
stars: 4,
162+
media: 'Cathedral.jpg'
163+
},
164+
{
165+
name: 'Bord Gáis Energ',
166+
type: 'Architecture',
167+
stars: 5,
168+
media: 'Theater.jpg'
169+
}
99170
],
100-
selectedTabview: 0,
171+
selectedTabview: 0
101172
};
102173
},
103-
mounted () {
104-
console.log('jjjj',this.$refs.ca.nativeView);
174+
mounted() {
175+
console.log('jjjj', this.$refs.ca.nativeView);
105176
this.$refs.ca.nativeView.separatorColor = 'white';
106-
this.$refs.ca.nativeView.itemsProperty = 'white'
177+
this.$refs.ca.nativeView.itemsProperty = 'white';
107178
},
108179
methods: {
109-
change: function (value) {
180+
change: function(value) {
110181
//console.log('我是伏组件');
111182
this.selectedTabview = value;
112183
}
@@ -115,11 +186,10 @@ export default {
115186
</script>
116187

117188
<style scoped>
118-
.dt{
189+
.dt {
119190
padding: 0;
120191
}
121192
122-
123193
.home-panel {
124194
background-color: red;
125195
padding: 0;

0 commit comments

Comments
 (0)