基于wepy框架开发微信小程序NavBar组件

最近学习微信小程序开发,比较了一下小程序原生开发方式和wepy框架,
决定还是基于wepy开发,熟悉了wepy的基本框架后,感觉还是挺方便的,
wepy支持组件化方式抽象组件,在开发中碰到需要使用类似于Android中TabBar的控件,
Google搜索了一下有不少基于小程序实现的,但没有基于wepy封装的,于是顺手将其封装一下。

NavBar

使用

安装组件

npm install wepy-com-navbar --save

使用例子

<template>
<navBar :tabs="tabs" :currentTab.sync="currentTab"></navBar>
<swiper current="{{currentTab}}" duration="300"
bindchange="bindChange">
<swiper-item>
<view>TAB1</view>
</swiper-item>
<swiper-item>
<view>TAB2</view>
</swiper-item>
<swiper-item>
<view>TAB3</view>
</swiper-item>
</swiper>
</template>
<script>
import wepy from 'wepy'
import NavBar from 'wepy-com-navbar'
export default class Index extends wepy.page {
config = {
navigationBarTitleText: 'NavBar测试',
enablePullDownRefresh: false
}
data = {
currentTab: 0,
tabs: ['TAB1', 'TAB2', 'TAB3']
}
methods = {
bindChange(e) {
this.currentTab = e.detail.current
}
}
components = {
navBar: NavBar
}
}
</script>

Git

https://github.com/chenyangcun/wepy-com-navbar

参考资料

小程序框架wepy文档
微信官方小程序文档


 扫一扫下方二维码,关注我的微信公众号,第一时间获得Android开发进阶文章