微信小程序自定义底部tarbar的代码实现(微信小程序底部Tabbar)

网友投稿 857 2022-10-05

微信小程序自定义底部tarbar的代码实现(微信小程序底部Tabbar)

微信小程序自定义底部tarbar的代码实现(微信小程序底部Tabbar)

本篇文章给大家带来的内容是关于微信小程序自定义底部tarbar的代码实现,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

程序员必备接口测试调试工具:立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试,同时在线协作,内容实时同步

template文件夹里存放tabbar模板。

template/template.wxml

-

template.css

.icon{ width:54rpx; height: 54rpx;}.tabBar{ width:100%; position: fixed; bottom:0; padding:10rpx; margin-left:-4rpx; background:#F7F7FA; font-size:20rpx; color:#8A8A8A; box-shadow: 6rpx 6rpx 6rpx 6rpx #aaa;} .tabBar-item{ float:left; width:25%; text-align: center; overflow: hidden;}/*当前字体颜色*/.tabBartext{ color:red;}-

template.js

//初始化数据function tabbarinit() { return [ { "current":0, "pagePath": "/pages/index/index", "iconPath": "/imgs/home.png", "selectedIconPath": "/imgs/home_on.png", "text": "主页" }, { "current": 0, "pagePath": "/pages/news/news", "iconPath": "/imgs/message.png", "selectedIconPath": "/imgs/message_on.png", "text": "资讯" }, { "current": 0, "pagePath": "/pages/category/category", "iconPath": "/imgs/category.png", "selectedIconPath": "/imgs/category_on.png", "text": "分类" }, { "current": 0, "pagePath": "/pages/buy/buy", "iconPath": "/imgs/buy.png", "selectedIconPath": "/imgs/buy_on.png", "text": "购物" } ]}//tabbar 主入口function tabbarmain(bindName = "tabdata", id, target) { var that = target; var bindData = {}; var otabbar = tabbarinit(); otabbar[id]['iconPath'] = otabbar[id]['selectedIconPath']//换当前的icon otabbar[id]['current'] = 1; bindData[bindName] = otabbar that.setData({ bindData });}module.exports = { tabbar: tabbarmain}-

到此改组件完成,然后讲解一下使用方法。 我们先把样式载入到app.wxss

@import "/template/template.wxss";-

在index文件夹

index.wxml

-

index.js

const app = getApp()var template = require('../../template/template.js');Page({ data: { }, onLoad: function () { template.tabbar("tabBar", 0, this)//0表示第一个tabbar },})-

news.wxml与index.wxml一样 news.js如下

const app = getApp()var template = require('../../template/template.js');Page({ data: { }, onLoad: function () { template.tabbar("tabBar", 1, this)//1表示第二个tabbar },})-

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:poj2018
下一篇:Google Earth Engine(GEE)批量下载不透水面数据
相关文章

 发表评论

暂时没有评论,来抢沙发吧~