比如一个小程序需要两个版本(用户版、商家版),并且能通过一个按钮在两个版本间进行切换,可能会用到这种方式。
此处以两个页面(index,logs)显示两种tabbar样式为例,通过切换按钮进行切换。
首先有一个模板文件:tabbar.wxml
在app.json中无需定义“tabBar”
在app.js中自定义如下
在app.wxss中定义显示样式
index.wxml,用到自定义tabbar的页面的首部都需要引入模板文件
index.js
logs.js
加载自定义tabbar的那句话(app.editTabBar)写在onload或onshow中都可以。
只写了两个主页面,其他页面可自行定义跳转。
最后放上效果图:
1.用于实现多页面的快速切换。2.tabbar导航栏只能配置最少 2 个、最多 5 个 tab 页签。
3.步骤:
① 通过 app.json 文件的 pages 节点,新建 对应的 tab 页面
② tabBar 节点中,新增 list 数组,这个数组中存放的,是每个 tab 项的配置对象
③ 在 list 数组中,新增每一个 tab 项的配置对象。对象中包含的属性如下:
-pagePath 指定当前 tab 对应的页面路径【必填】
-text 指定当前 tab 上按钮的文字【必填】
-iconPath 指定当前 tab 未选中时候的图片路径【可选】
-selectedIconPath 指定当前 tab 被选中后高亮的图片路径【可选】
使用组件:<navigator url=" / ">1</navigator>
使用api:wx.navigateTo({url:" / "})
效果图.wxml页面
<!-- nav导航 -->
<view class="goods">
<block wx:for="{{tab}}" wx:key="key">
<view class="{{item.style}}" bindtap="tarClick" data-index="{{index}}">{{item.titcle}}</view>
</block>
</view>
<!--导航下 视图滑块 -->
<swiper bind:change="changeTab" current="{{index}}">
<block>
<swiper-item>
<text>11111</text>
</swiper-item>
<swiper-item>
<text>2222</text>
</swiper-item>
<swiper-item>
<text>3333</text>
</swiper-item>
</block>
</swiper>
.js页面
Page({
data: {
tab:[
{titcle:"商品参数",style:"color"},
{titcle:"商品介绍",style:""},
{titcle:"商品规格",style:""},
],
index:0,
goods:''
},
tarClick(e){
// console.log(e.currentTarget.dataset.index)
let tab = this.data.tab
let that = this
let index = e.currentTarget.dataset.index
console.log(index)
tab.map((item,key)=>{
if(key==index)
{
tab[key]['style']='color'
}else{
tab[key]['style']=''
}
})
that.setData({tab,index})
},changeTab(e){
console.log(e.detail.current)
let tab = this.data.tab
let that = this
let index = e.detail.current
console.log(index)
tab.map((item,key)=>{
if(key==index)
{
tab[key]['style']='color'
}else{
tab[key]['style']=''
}
})
that.setData({tab,index})
},
})
.wxss页面
/* pages/details/details.wxss */
.goods{
width: 100%
height: 100rpx
/* background-color:yellowgreen */
display:flex
justify-content: space-around
align-items: center
}
.goods view{
width: 160rpx
height: 100rpx
display: flex
justify-content: center
align-items: center
}
.color{
color: red
border-bottom: 2px solid red
}
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)