微信小程序:使用iView Weapp 循环创建自定义的tabbar(图文并茂)
Posted 温柔且上进c
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序:使用iView Weapp 循环创建自定义的tabbar(图文并茂)相关的知识,希望对你有一定的参考价值。
使用iView Weapp 循环自定义创建tabbar
注意:
- 官网内容中并没有循环创建tabbar的方法,以下内容为博主自己网上查资料,摸索出来的,可能方法并不是最优的,但可以保证按照此方法一定可以循环创建tabbar
下载iView Weapp组件库
- iView Weapp官方地址:官方网站
- 从官网进入 GitHub地址下载组件库的zip文件
- 解压后文件夹目录如下:
- 我们使用此组件库时,只需要将上述红色圈出的文件夹,放到我们创建的微信小程序项目的根目录下即可
创建微信小程序并将文件放在根目录
- 创建初始微信小程序:不使用云服务,使用JavaScript基础模板
- 博主是将初始的index页面与logs页面删除,再创建新的我们所需要的页面,接下来我们以创建了三个页面举例 (auth主页、notice消息、home我的)
- 微信小程序删除页面时,首先需要将app.json中的pages页面配置内容删除,再将页面文件删除
- 作为这一步,还需要在app.json删除一个配置内容(删除下述内容):
# app.json中
"style": "v2",
- 删除的原因是:小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱
- 最后创建新的页面,并将dist文件添加到项目的根目录:
引入所需组件
- 在项目配置文件app.json中引入我们所需要的组件:
- 组件路径一定要写对!!!前两个是tabbar组件,最后一个是icon图标组件,可以美化tabbar标签的图标
"usingComponents":
"i-tab-bar": "/dist/tab-bar/index",
"i-tab-bar-item": "/dist/tab-bar-item/index",
"i-icon": "/dist/icon/index"
全局配置文件中设置tabbar
- 添加custom字段值为true,并将其余tabbar配置补充完整
"tabBar":
"custom": true,
"list": [
"pagePath": "pages/auth/auth",
"text": "首页"
,
"pagePath": "pages/notice/notice",
"text": "通知"
,
"pagePath": "pages/home/home",
"text": "我的"
]
,
根据小程序官方文档创建自定义tabbar组件文件
- 文件名必须为custom-tab-bar并且必须也放在项目的根目录,如下创建
- 整个项目文件目录现在已经确定如下:
自定义tabbar组件
- 在custom-tab-bar目录下的index.wxml文件创建如下:
<i-tab-bar current=" current " color="#f759ab" bindchange="handleChange" >
<block wx:for="list" wx:key="*this">
<i-tab-bar-item key="item.status" icon="item.iconPath" current-icon="item.selectedIconPath" title="item.text"></i-tab-bar-item>
</block>
</i-tab-bar>
current:当前所在标签的key值、list:index.js文件中定义的数据集、color:主题色、bindchange:切换标签时触发的事件、key:标签的唯一标识、icon:标签的图标、current-icon:标签被选中时的图标、title:标签的名字
- index.js文件如下:
Component(
data:
//当前页索引
current: 'auth',
list: [
pagePath: "/pages/auth/auth",
text: "首页",
status:'auth',
iconPath: 'homepage',
selectedIconPath: 'homepage_fill',
,
pagePath: "/pages/notice/notice",
text: "通知",
status:'notice',
iconPath: 'interactive',
selectedIconPath: 'interactive_fill'
,
pagePath: "/pages/home/home",
text: "我的",
status:'home',
iconPath: 'group',
selectedIconPath: 'group_fill'
]
,
methods:
handleChange(e)
console.log(e);
let index=e.detail.key;
this.setData(
current:index
)
wx.switchTab(
url: '/pages/'+e.detail.key+'/'+e.detail.key,
)
,
//小程序切换页面
)
- 普通页面js文件的对象是Page对象,而自定义组件只能为Component对象,并且点击触发的事件只能在methods中
- 最后还需要在组件文件中的index.json文件中配置:
"component":true
跳转页面配置
- 最后在我们创建的的三个页面中配置js文件,原因:
为了防止图标切换时的乱跳与闪烁问题!!
- 在js文件中的onShow生命周期函数中添加配置:
// home.js
this.getTabBar().setData(
current:'home'
)
// notice.js
this.getTabBar().setData(
current:'notice'
)
// auth.js
this.getTabBar().setData(
current:'auth'
)
成果展示:
以上是关于微信小程序:使用iView Weapp 循环创建自定义的tabbar(图文并茂)的主要内容,如果未能解决你的问题,请参考以下文章