uni-app开发时自定义导航栏

1. 修改pages.json文件

增加navigationStyle

{
			"path": "pages/index/index",
			"style": {
				"navigationStyle": "custom",
				"navigationBarTitleText": "首页"
			}
		},
1
2
3
4
5
6
7

2. 下载uni-ui扩展组件库

npm install @dcloudio/uni-ui --save
1

3. 编写代码

components/CustomNavbar.vue文件

<script>
const { safeAreaInsets } = uni.getSystemInfoSync()
import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue';

export default {
  components: {
    uniIcons
  },
  data() {
    return {
        safeAreaInsets,
        searchValue: ''
    }
  },
  methods: {
    handleSearch() {
        console.log(this.searchValue)
    },
    handleScan() {
        uni.scanCode({
            success: (res) => {
                console.log("res", res)
            }
        })
    }
  }
}
</script>

<template>
    <view class="navbar" :style="{paddingTop: safeAreaInsets?.top + 10 + 'px'}">
        <view class="logo">
            <image class="logo-image" src="/static/images/logo.png" />
            <text class="logo-text">新鲜 · 亲民 · 快捷</text>
        </view>
        <view class="search"> 
            <uni-icons color="#fff" type="search" size="16" @click="handleSearch"></uni-icons>
            <input class="search-value" v-model="searchValue" placeholder="搜索商品">
            <uni-icons color="#fff" type="scan" size="16" @click="handleScan"></uni-icons>
        </view>
    </view>

</template>

<style lang="scss">
.navbar {
    background-image: url(@/static/images/navigator_bg.png);
    background-size: cover;
    padding-bottom: 20rpx;

    .logo {
        display: flex;
        align-items: center;
        height: 64rpx;
        padding-left: 30rpx;

        .logo-image {
            width: 166rpx;
            height: 39rpx;
        }
        .logo-text {
            font-size: 26rpx;
            color: #fff;
            padding-left: 20rpx;
            margin-left: 20rpx;
            border-left: 1px solid #fff;
        }
    }

    .search {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 26rpx 0 26rpx;
        height: 64rpx;
        margin: 16rpx 20rpx;
        color: #fff;
        font-size: 28rpx;
        border-radius: 32rpx;
        background-color: rgba(255, 255, 255, 0.5);

        .uni-icons {
            width: 32rpx;
        }
        .search-value {
            flex: 1;
            padding: 0 20rpx;
        }
    }
}
</style>
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

index.vue文件

<script>
import CustomNavbar from '@/components/CustomNavbar.vue'

export default {
  components: {
    CustomNavbar
  },
  data() {
    return {

    }
  },
  methods: {

  }
}

</script>

<template>
  <view class="viewport">
      <CustomNavbar />
  </view>
</template>

<style lang="scss">
page {
  background: #f7f7f7;
}
</style>
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