Skip to content

Commit 2e8cfb6

Browse files
falstackfalstack
committed
add: demo
1 parent c3eaec8 commit 2e8cfb6

File tree

15 files changed

+516
-96
lines changed

15 files changed

+516
-96
lines changed

‎examples/App.vue

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<style lang="scss">
2+
</style>
3+
4+
<template>
5+
<div id="app">
6+
<router-view />
7+
</div>
8+
</template>
9+
10+
<script>
11+
export default {
12+
name: 'App',
13+
components: {},
14+
props: {},
15+
data () {
16+
return {}
17+
},
18+
computed: {},
19+
watch: {},
20+
created () {},
21+
mounted () {},
22+
methods: {}
23+
}
24+
</script>

‎examples/components/Item.vue

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<style lang="scss">
2+
.comp-item {
3+
padding: 0 10px;
4+
height: 110px;
5+
6+
.outer {
7+
padding-top: 10px;
8+
}
9+
10+
.inner {
11+
border-radius: 5px;
12+
height: 100px;
13+
line-height: 100px;
14+
text-align: center;
15+
}
16+
}
17+
</style>
18+
19+
<template>
20+
<div v-if="item" class="comp-item">
21+
<div class="outer">
22+
<div class="inner" :style="{ backgroundColor: item.style.color }" @click="handleClick">
23+
count：{{ index + 1 }}，id：{{ item.id }}，click：{{ click }}
24+
</div>
25+
</div>
26+
</div>
27+
</template>
28+
29+
<script>
30+
export default {
31+
name: 'Item',
32+
props: {
33+
item: {
34+
type: Object,
35+
default: null
36+
},
37+
index: {
38+
type: Number,
39+
required: true
40+
}
41+
},
42+
data () {
43+
return {
44+
click: 0
45+
}
46+
},
47+
methods: {
48+
handleClick () {
49+
this.click++
50+
}
51+
}
52+
}
53+
</script>

‎examples/main.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import Vue from 'vue'
2+
import App from './App.vue'
3+
import router from './router'
4+
import store from './store'
5+
import VueMixinStore from 'vue-mixin-store'
6+
import VueFlowRender from 'vue-flow-render'
7+
import VScroller from 'h5-vue-scroller'
8+
import VSwitcher from 'v-switcher'
9+
import 'v-switcher/dist/v-switcher.css'
10+
import 'normalize.css'
11+
12+
Vue.component(VSwitcher.name, VSwitcher)
13+
Vue.component(VScroller.name, VScroller)
14+
Vue.component(VueFlowRender.name, VueFlowRender)
15+
Vue.component(VueMixinStore.FlowLoader.name, VueMixinStore.FlowLoader)
16+
17+
// eslint-disable-next-line no-new
18+
new Vue({
19+
el: '#app',
20+
router,
21+
store,
22+
render: h => h(App)
23+
})

‎examples/pages/index.vue

Lines changed: 293 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,293 @@
1+
<style lang="scss">
2+
#index {
3+
position: fixed;
4+
bottom: 0;
5+
right: 0;
6+
left: 0;
7+
top: 0;
8+
transform: translateY(0);
9+
transition: transform 0.4s ease;
10+
11+
&.active {
12+
transform: translateY(-120px);
13+
}
14+
15+
.carousel {
16+
width: 100%;
17+
height: 120px;
18+
19+
.c-item {
20+
display: block;
21+
height: 120px;
22+
background-position: center;
23+
background-repeat: no-repeat;
24+
background-size: cover;
25+
}
26+
27+
.v-switcher {
28+
&-header {
29+
&-wrap {
30+
box-sizing: border-box;
31+
position: absolute;
32+
right: 10px;
33+
bottom: 10px;
34+
height: 35px;
35+
z-index: 1;
36+
width: 150px;
37+
border-bottom: none;
38+
}
39+
40+
&-item {
41+
margin-left: 8px;
42+
width: 18px;
43+
height: 18px;
44+
border-bottom-width: 0;
45+
cursor: default;
46+
padding: 0;
47+
border-radius: 50%;
48+
background-color: #fff;
49+
50+
&.is-active {
51+
background-color: palevioletred;
52+
}
53+
}
54+
}
55+
}
56+
}
57+
58+
.content {
59+
height: 100%;
60+
box-sizing: border-box;
61+
62+
.v-switcher-header-anchor {
63+
height: 2px;
64+
bottom: 0;
65+
background-color: palevioletred;
66+
}
67+
68+
.v-switcher-header-item {
69+
padding: 0 20px;
70+
}
71+
72+
.ul-wrap {
73+
margin: 0;
74+
padding: 0;
75+
76+
.hoz-wrap {
77+
width: 100%;
78+
height: 150px;
79+
overflow: hidden;
80+
}
81+
82+
.item-wrap {
83+
display: inline-block;
84+
white-space: nowrap;
85+
overflow-x: auto;
86+
overflow-y: hidden;
87+
height: 110%;
88+
padding-bottom: 10%;
89+
box-sizing: content-box;
90+
width: 100%;
91+
-webkit-overflow-scrolling: touch;
92+
93+
.item {
94+
height: 150px;
95+
line-height: 150px;
96+
font-size: 24px;
97+
display: inline-block;
98+
text-align: center;
99+
padding: 0 10px;
100+
width: 120px;
101+
white-space: nowrap;
102+
}
103+
}
104+
}
105+
}
106+
107+
.flow-loader-state {
108+
text-align: center;
109+
height: 40px;
110+
line-height: 40px;
111+
}
112+
}
113+
</style>
114+
115+
<template>
116+
<div id="index" :class="{ 'active': isActive }">
117+
<div class="carousel">
118+
<v-switcher :headers="headers1" :swipe="true" :autoplay="2000" align="end" :header-height="18">
119+
<a
120+
v-for="(item, index) in headers1"
121+
:key="index"
122+
:slot="`${index}`"
123+
:style="{ backgroundColor: getRandomColor() }"
124+
class="c-item"
125+
href="javascript:;"
126+
>
127+
{{ item.title }}
128+
</a>
129+
</v-switcher>
130+
</div>
131+
<div class="content">
132+
<v-switcher
133+
:headers="headers2"
134+
:swipe="true"
135+
:sticky="true"
136+
:anchor-padding="20"
137+
@change="handleTabSwitch"
138+
>
139+
<template slot="header-after">
140+
<button @click="handleBtnClick">筛选</button>
141+
</template>
142+
<v-scroller
143+
v-for="(item, index) in headers2"
144+
ref="scroll"
145+
:key="index"
146+
:event-step="30"
147+
:slot="`${index}`"
148+
@top="handlePullDown"
149+
@scroll="handleScroll"
150+
@scroll-down="handlePullUp"
151+
@bottom="handleLoadMore"
152+
@refresh="handleRefresh"
153+
>
154+
<ul class="ul-wrap">
155+
<li class="hoz-wrap">
156+
<div class="item-wrap" @touchstart.stop @touchmove.stop>
157+
<div
158+
v-for="item in 10"
159+
:key="item"
160+
:style="{ backgroundColor: getRandomColor() }"
161+
@click="click++"
162+
class="item"
163+
>{{ item }} - {{ click }}</div>
164+
</div>
165+
</li>
166+
<flow-loader
167+
ref="loader"
168+
func="getListByPage"
169+
type="page"
170+
:auto="0"
171+
:query="{
172+
id: item,
173+
count: 10
174+
}"
175+
:callback="handleCallback"
176+
>
177+
<vue-flow-render
178+
ref="render"
179+
:remain="30"
180+
:total="count"
181+
slot-scope="{ flow, count }"
182+
>
183+
<ItemComponent
184+
v-for="(item, index) in flow"
185+
:key="item.id"
186+
:item="item"
187+
:index="index"
188+
:style="{ height: '110px' }"
189+
/>
190+
</vue-flow-render>
191+
</flow-loader>
192+
</ul>
193+
</v-scroller>
194+
</v-switcher>
195+
</div>
196+
</div>
197+
</template>
198+
199+
<script>
200+
import ItemComponent from '../components/Item'
201+
202+
export default {
203+
name: 'Index',
204+
components: {
205+
ItemComponent
206+
},
207+
data () {
208+
const headers2 = [
209+
'tab-0',
210+
'tab-1',
211+
'tab-2奥术大师',
212+
'tab',
213+
'tab-4答',
214+
'tab-5',
215+
'tab-6阿斯达稍等',
216+
'tab-7',
217+
'tab-8奥术大',
218+
'tab-9'
219+
]
220+
return {
221+
click: 0,
222+
isActive: false,
223+
headers1: [
224+
{
225+
text: '',
226+
title: '成名必备！'
227+
},
228+
{
229+
text: '',
230+
title: '花泽香菜，甜美来袭！'
231+
},
232+
{
233+
text: '',
234+
title: '鸡鸣紫陌曙光寒，水转皇州春色阑'
235+
},
236+
{
237+
text: '',
238+
title: '请查收您的追番清单!'
239+
},
240+
{
241+
text: '',
242+
title: '欢迎来到天生制造狂的世界'
243+
}
244+
],
245+
headers2,
246+
activeIndex: 0
247+
}
248+
},
249+
methods: {
250+
getRandomColor () {
251+
var colors = [
252+
'rgba(21,174,103,.5)',
253+
'rgba(245,163,59,.5)',
254+
'rgba(255,230,135,.5)',
255+
'rgba(194,217,78,.5)',
256+
'rgba(195,123,177,.5)',
257+
'rgba(125,205,244,.5)'
258+
]
259+
return colors[~~(Math.random() * colors.length)]
260+
},
261+
handlePullDown () {
262+
this.isActive = false
263+
},
264+
handlePullUp () {
265+
this.isActive = true
266+
},
267+
handleTabSwitch (index) {
268+
this.activeIndex = index
269+
this.$nextTick(() => {
270+
this.$refs.loader[index].initData()
271+
})
272+
},
273+
handleCallback () {
274+
this.$nextTick(() => {
275+
const index = this.activeIndex
276+
this.$refs.render[index].setWrap(this.$refs.scroll[index].$el)
277+
})
278+
},
279+
handleLoadMore () {
280+
this.$refs.loader[this.activeIndex].loadMore()
281+
},
282+
handleScroll ({ offsetTop, isUp }) {
283+
this.$refs.render[this.activeIndex].scroll(offsetTop, isUp)
284+
},
285+
handleBtnClick () {
286+
alert('筛选')
287+
},
288+
handleRefresh () {
289+
this.isActive = false
290+
}
291+
}
292+
}
293+
</script>

0 commit comments

Comments
 (0)