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,
  },
})