# pageContainer 水平滑动页面
用于让用户在不同的滑动液面中进行切换。
# dof-tab-page-container 组件
页面滑动切换组件
- 可允许滑动页面的容器，可控制是否滑动，可指定默认显示的页面等
- 允许对头部进行配置，支持 Binding 手势跟随效果
- 常用于 Tab 切换页面，目前支持icon、text形式的顶栏,详细可见config.js
# 实例
# 基础用法
<template>
<div class="wrapper">
<dof-minibar
title="Tab-page-container"
background-color="#267AFF"
text-color="#ffffff"
:left-button="leftButton"
@dofMinibarRightButtonClicked="reloadHandler"
>
</dof-minibar>
<scroller class="content-container">
<dof-catalog title="可滑动的container容器" background-color="#daf9ca" :has-margin="true"></dof-catalog>
<dof-tab-page-container
ref="dof-tab-page-slider"
:has-margin="false"
>
<scroller class="slidePanel" v-for="index in 3" :key="index">
<text class="slideText">我是第{{index}}个container</text>
</scroller>
</dof-tab-page-container>
<dof-catalog title="指定默认显示container" background-color="#daf9ca" :has-margin="true"></dof-catalog>
<dof-tab-page-container
ref="dof-tab-page-slider"
:slider-index="1"
:has-margin="false"
>
<scroller class="slidePanel" v-for="index in 3" :key="index">
<text class="slideText">我是第{{index}}个container</text>
</scroller>
</dof-tab-page-container>
<dof-catalog title="可循环滚动的container" background-color="#daf9ca" :has-margin="true"></dof-catalog>
<dof-tab-page-container
ref="dof-tab-page-slider"
:slider-index="0"
:has-margin="false"
:infinite="true"
>
<scroller class="slidePanel" v-for="index in 3" :key="index">
<text class="slideText">我是第{{index}}个container</text>
</scroller>
</dof-tab-page-container>
<!-- swiper container test -->
<dof-catalog title="container联动Tab" background-color="#daf9ca" :has-margin="true"></dof-catalog>
<dof-tab-page
ref="dof-tab-page-slider"
type="third"
:tab-titles="thirdTabTitles3"
:tab-checked-index="currentSliderTabIndex"
:has-margin="false"
@dofTabSelected="tabChangeHandlerSlider"
></dof-tab-page>
<slider style="margin-top:4px; padding-bottom: 800px;" infinite="false" :index="currentSliderTabIndex" @change="sliderChange">
<scroller class="slidePanel" v-for="(item, index) in thirdTabTitles3" :key="index">
<text class="slideText">我是{{item.title}}页面</text>
</scroller>
</slider>
</scroller>
</div>
</template>
<style scoped>
.wrapper {
background-color: #f9f9f9;
}
.slidePanel{
background-color: #ffffff;
justify-content: center;
align-items: center;
height: 100px;
}
.slideText{
font-size: 40px;
}
</style>
<script>
import { DofMinibar, DofTabPageContainer,DofTabPage, DofCatalog, Core, Utils, BindEnv } from '../../index'
import { tabMenu } from './config'
export default {
components: {
DofTabPageContainer,
DofTabPage,
DofMinibar,
DofCatalog
},
data: () => ({
leftButton: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/header/icon_back_white@3x.png',
thirdTabTitles3: tabMenu,
currentSliderTabIndex:2, //container slider
}),
created() {},
methods: {
// container和tab联动
tabChangeHandlerSlider(e) {
const self = this
const { index } = e
Core.toast(`Tab:${index}`)
this.currentSliderTabIndex = index
},
sliderChange(slideObj) {
Core.toast(`slider:${slideObj.index}`)
if (this.currentSliderTabIndex != slideObj.index) {
this.currentSliderTabIndex = slideObj.index
}
},
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
config.js文件内容，如下：
export const tabMenu = [
{
title: '起居',
icon: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/scene/icon_scene_living@3x.png',
activeIcon: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/scene/icon_scene_living_visited@3x.png'
},
{
title: '厨房',
icon: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/scene/icon_scene_kitchen@3x.png',
activeIcon: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/scene/icon_scene_kitchen_visited@3x.png'
},
{
title: '安防',
icon: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/scene/icon_scene_security@3x.png',
activeIcon: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/scene/icon_scene_security_visited@3x.png'
},
{
title: '卫浴',
icon: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/scene/icon_scene_bathroom@3x.png',
activeIcon: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/scene/icon_scene_bathroom_visited@3x.png'
},
{
title: '起居',
icon: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/scene/icon_scene_living@3x.png',
activeIcon: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/scene/icon_scene_living_visited@3x.png'
},
{
title: '厨房',
icon: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/scene/icon_scene_kitchen@3x.png',
activeIcon: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/scene/icon_scene_kitchen_visited@3x.png'
},
{
title: '安防',
icon: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/scene/icon_scene_security@3x.png',
activeIcon: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/scene/icon_scene_security_visited@3x.png'
},
{
title: '卫浴',
icon: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/scene/icon_scene_bathroom@3x.png',
activeIcon: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/scene/icon_scene_bathroom_visited@3x.png'
}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
# Attributes
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| infinite | Boolean | N | false | 是否可循环滑动页面 |
| sliderIndex | Number | N | 0 | 指定默认显示页面的索引 |
| scrollable | Boolean | N | true | 设置是否可以通过滑动手势来切换页面，默认为 true |
# Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
dofPanelSlider | 选滑动进入当前页面事件, e, e.index当前页面索引 | - |