小程序怎么自定义tabbar组件并实现底部tab切换
小编给大家分享一下小程序怎么自定义tabbar组件并实现底部tab切换,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
创新互联专业为企业提供石河子网站建设、石河子做网站、石河子网站设计、石河子网站制作等企业网站建设、网页设计与制作、石河子企业网站模板建站服务,十余年石河子做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
1.编写自定义组件jtab-bar
wxml文件
{{item.text}}
js文件
Component({ data: { selected: 0, color: "#999999", selectedColor: "#032F82", list: [ { type: 'text', text: "首页" }, { type: 'image', icon: '../../image/icon_map.png', iconSelect: '../../image/icon_map_select.png', text: '' }, { type: 'text', text: "我的" }] }, attached() { }, methods: { switchTab(e) { const data = e.currentTarget.dataset this.setData({selected: data.index}) this.triggerEvent("setTab", data.index) } } })
wxss文件
.jtab-bar { position: fixed; bottom: 0; left: 0; right: 0; height: 100rpx; background: white; display: flex; align-items: center; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0px -2rpx 2rpx rgba(153, 153, 153, 0.1); } .jtab-bar-item { text-align: center; flex: 1; height: 100rpx; } .jtab-bar-item .jtab-text { height: 100rpx; line-height: 100rpx; } .jcover-img-bigicon { position: fixed; bottom: 0rpx; width: 210rpx; height: 128rpx; padding-bottom: env(safe-area-inset-bottom); margin: 0 auto; right: 0; left: 0; }
2.页面中使用
wxml文件
{{item}}
这里使用catchtouchmove="swipperStop" swipperStop是个空函数来处理,禁止手动滑动
wxss文件
.jswipper-block { height: calc(100vh - 170rpx); background: #F7F8F9; }
js文件
/** * 页面的初始数据 */ data: { background: ['demo-text-1', 'demo-text-2', 'demo-text-3'], currentTab: 0 }, setTabbar({detail}) { this.setData({currentTab: detail}) }, // 轮播图 禁止手动滑动 catchtouchmove="swipperStop" swipperStop(){ },
以上是“小程序怎么自定义tabbar组件并实现底部tab切换”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
网站名称:小程序怎么自定义tabbar组件并实现底部tab切换
网页URL:http://pwwzsj.com/article/piodgs.html