TabBar

Vant Weapp

  • 小程序已经支持使用 npm 安装第三方包,注意这个是在你小程序项目的目录下
1
npm i vant-weapp -S --production
  • 保证当前你的微信开发者工具是最新版本,然后找到顶部选项的【工具】点击执行【构建npm】
  • 成功以后你项目的目录里会多出一个文件夹miniprogram_npm,当我们需要调用到Vant组件的时候,需要在想相对应的.json文件里添加配置
1
2
3
"usingComponents": {
"van-button": "/miniprogram_npm/vant-weapp/button/index"
}

tabBar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
"tabBar": {
"custom": true,
"list": [
{
"pagePath": "pages/index/index",
"text": "政策解读"
},
{
"pagePath": "pages/query/query",
"text": "林长查询"
},
{
"pagePath": "pages/dynamic/dynamic",
"text": "林长动态"
},
{
"pagePath": "pages/news/news",
"text": "焦点新闻"
}
]
},
  • 然后在项目根目录新建custom-tab-bar文件夹,然后新建组件index,注意不能改变名字
  • 首先引入Vant的组件
1
2
3
4
5
6
7
{
"component": true,
"usingComponents": {
"van-tabbar": "/miniprogram_npm/vant-weapp/tabbar/index",
"van-tabbar-item": "/miniprogram_npm/vant-weapp/tabbar-item/index"
}
}
1
2
3
4
5
6
7
<!--底部导航栏-->
<van-tabbar active="{{ active }}" bind:change="bottomNavOnChange">
<van-tabbar-item icon="home-o">政策解读</van-tabbar-item>
<van-tabbar-item icon="search">林长查询</van-tabbar-item>
<van-tabbar-item icon="comment-o">林长动态</van-tabbar-item>
<van-tabbar-item icon="newspaper-o">焦点新闻</van-tabbar-item>
</van-tabbar>
  • 然后调用wx.switchTab切换回调,跳转URL
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
Component({
properties: {

},

data: {
// 当前子页 设置为null
active: null,
"list": [{
"pagePath": "/pages/index/index"
},
{
"pagePath": "/pages/query/query"
},
{
"pagePath": "/pages/dynamic/dynamic",
},
{
"pagePath": "/pages/news/news"
}
],
},

methods: {
// 底部导航栏的回调
bottomNavOnChange(event) {
// event.detail 的值为当前选中项的索引
const index = event.detail;
// 小程序切换页面
wx.switchTab({
url: this.data.list[index].pagePath,
})
},
}

})
  • 然后在需要使用的组件中引入,注意在每个跳转的子页面都要加以下事件,设置当前高亮的索引
1
2
3
4
5
onLoad: function (options) {
this.getTabBar().setData({
active: 0
})
},

回到顶部

  • 微信小程序的回到顶部功能非常简单
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
const app = getApp()
Page({
data: {
// 是否显示返回顶部
showBack:false,
},
// 回调:获取滚动条当前位置
onPageScroll(event){
if(event.scrollTop > 100){
this.setData({
showBack : true
})
}else{
this.setData({
showBack:false
})
}
},
// 回到顶部函数,调用即可
backTop(event) {
if (wx.pageScrollTo) {
if (wx.pageScrollTo) {
wx.pageScrollTo({
scrollTop: 0
})
} else {
wx.showModal({
title: '提示',
content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'
})
}
}
},
})

NavBar

获取数据

  • 然后在app.json中设置
1
2
3
"window": {
"navigationStyle": "custom"
},
  • app.js中获取系统信息并保存在全局变量中
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
App({
data: {},
/**
* 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
*/
onLaunch: function (options) {
// 判断是否由分享进入小程序
if (options.scene == 1007 || options.scene == 1008) {
this.globalData.share = true
} else {
this.globalData.share = false
}
// 获取设备顶部窗口的高度(不同设备窗口高度不一样,根据这个来设置自定义导航栏的高度)
wx.getSystemInfo({
success: (res) => {
this.globalData.height = res.statusBarHeight
},
})
},
// 定义全局数据
globalData: {
share: false, // 默认为false
height: 0,
},
})

创建组件

  • 然后创建components/navbar组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<view class='nav-wrap' style='height: {{height*2 + 10}}px;'>
<!--标题-->
<view class='nav-title' style='line-height: {{height*2 + 44}}px;'>{{navbarData.first}}{{navbarData.title}}</view>
<view class="left">
<!--控制左上角按钮的显示隐藏,首页不显示-->
<view class='nav-capsule' style='height: {{height*2 + 44}}px;' wx:if='{{navbarData.showCapsule}}'>
<!--左上角的返回按钮,控制返回按钮显示-->
<view bindtap='_navback' wx:if='{{!share}}'>
<image src='/assets/images/back-pre.png' mode='aspectFill' class='back-pre'></image>
</view>
<!--分隔线-->
<view class='navbar-v-line' wx:if='{{!share}}'></view>
<!--返回主页-->
<view bindtap='_backhome'>
<image src='/assets/images/back-home.png' mode='aspectFill' class='back-home'></image>
</view>
</view>
</view>
</view>
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
/* 顶部要固定定位   标题要居中   自定义按钮和标题要和右边微信原生的胶囊上下对齐 */
.nav-wrap {
position: fixed;
width: 100%;
top: 0;
background: #3367d6;
color: white;
z-index: 9999999;
}

.nav-wrap .left {
display: flex;
justify-content: space-around;
flex-direction: column
}

/* 标题要居中 */
.nav-title {
position: absolute;
text-align: center;
max-width: 400rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
font-size: 36rpx;
color: white;
font-weight: 600;
}

.nav-capsule {
display: flex;
align-items: center;
margin-left: 30rpx;
width: 140rpx;
justify-content: space-between;
height: 100%;
}

.navbar-v-line {
width: 1px;
height: 32rpx;
background-color: #e5e5e5;
}

.back-pre,
.back-home {
width: 32rpx;
height: 36rpx;
margin-top: 4rpx;
padding: 10rpx;
}

.nav-capsule .back-home {
width: 36rpx;
height: 40rpx;
margin-top: 3rpx;
}
  • 在JS中获取父组件传来的数据
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
const app = getApp()
Component({
properties: {
navbarData: { //navbarData 由父页面传递的数据,变量名字自命名
type: Object,
value: {},
observer: function (newVal, oldVal) {}
}
},
data: {
height: '',
//默认值 默认显示左上角
navbarData: {
showCapsule: 1,
}
},
attached: function () {
// 获取是否是通过分享进入的小程序
this.setData({
share: app.globalData.share
})
// 定义导航栏的高度 方便对齐
this.setData({
height: app.globalData.height
})
},
methods: {
// 返回上一页面
_navback() {
wx.navigateBack()
},
//返回到首页
_backhome() {
wx.switchTab({
url: '/pages/index/index',
})
}
}
})
  • 在需要使用的组件引入并设置
1
2
3
4
<nav-bar navbar-data='{{navbarData}}'></nav-bar>

<!--离顶部栏的高度,自己把握-->
<view style='margin-top: {{height+20}}px'></view>
1
2
3
4
5
6
7
8
9
10
11
12
13
// index.js
const app = getApp()
Page({
data: {
// 组件所需的参数
navbarData: {
showCapsule: 0, //是否显示左上角图标 1表示显示 0表示不显示
title: '智慧林长', //导航栏 中间的标题
},
// 此页面 页面内容距最顶部的距离
height: app.globalData.height * 2 + 20,
},
})