首页页面制作
Visionwuwu 2020-05-09
# 新建页面,配置page.json
- 点击文件=> 新建=> uni-app页面
- 配置globalStyle全局导航栏状态栏
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "仿小米商城",
"navigationBarBackgroundColor": "#FFFFFF",
"backgroundColor": "#FFFFFF",
"backgroundTextStyle": "light"
},
1
2
3
4
5
6
7
2
3
4
5
6
7
- 底部tabbar选项卡配置
"tabBar": {
"color": "#C0C0C0",
"selectedColor": "#F46D01",
"backgroundColor": "#FFFFFF",
"borderStyle": "black",
"position": "bottom",
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/tabbar/index.png",
"selectedIconPath": "static/tabbar/indexSelected.png"
},
{
"pagePath": "pages/calssify/calssify",
"text": "分类",
"iconPath": "./static/tabbar/class.png",
"selectedIconPath": "static/tabbar/classSelected.png"
},
{
"pagePath": "pages/cart/cart",
"text": "购物车",
"iconPath": "static/tabbar/cart.png",
"selectedIconPath": "static/tabbar/cartSelected.png"
},
{
"pagePath": "pages/about/about",
"text": "我的",
"iconPath": "static/tabbar/my.png",
"selectedIconPath": "static/tabbar/mySelected.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
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
- 配置App首页自定义导航栏
{
"path": "pages/index/index",
"style": {
"navigationBarBackgroundColor": "#FFFFFF",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "仿小米商城",
"enablePullDownRefresh": true,
"app-plus": {
"bounce": "none",
"titleNView": {
"searchInput": {
"borderRadius": "4px",
"align": "left",
"disabled": "true",
"placeholder": "智能积木 越野四驱车",
"placeholderColor": "#CACACA",
"backgroundColor": "#F7F7F7"
},
"buttons": [{
"float": "left",
"text": "\ue67a",
"fontSrc": "/static/font/iconfont.ttf",
"fontSize": "22px",
"color": "#8E8E8E"
},
{
"float": "right",
"text": "\ue661",
"fontSrc": "/static/font/iconfont.ttf",
"fontSize": "22px",
"color": "#8E8E8E"
}
]
}
}
}
}
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
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
# 自定义组件index-tabbar封装index-tabbar
- 1.在components下新建一个index目录,在新建一个index-tabbar.vue文件
- 2.用uniapp官方给出的scroll-view 快捷键是uScroll
- 3.scroll-view配置属性
- scroll-x 滚动方向是x轴
- scroll-with-animation 滚动时带有动画效果
- scroll-into-view 滚动到某个子元素上
- 此组件需要的props
- activeIndex 当前激活的tab索引
- resdata 所需要的数据对象
<scroll-view class="flex-shrink" :scroll-into-view="`tab${activeIndex}`" scroll-x class="scroll-row border-bottom" scroll-with-animation>
<view :id="`tab${index}`" :class="{'main-text-color': activeIndex === index}" :key="index" class="scroll-row-item px-3 font-md" v-for="(item, index) in resdata"
style="height: 80upx;line-height: 80upx;" @tap="$emit('changeTab', index)">{{item.name}}</view>
</scroll-view>
1
2
3
4
2
3
4
export default {
props: {
activeIndex: {
type: Number,
default: 0
},
resdata: {
type: [Array, Object],
requierd: true
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
组件功能介绍
该组件首页的分类导航条通过点击某个分类查看分类对应的数据