1.创建components 组件
目录结构
wxml
<view class='nav-wrap' style='height: {{navHeight}}px;padding-top: {{navHeight - menuHeight}}px' wx:if="{{!navbarData.isShare}}">
<!-- 视频首页 -->
<view class="navTop" style="height:{{menuHeight}}px;padding-right:{{menuWith}}px;" wx:if="{{navbarData.workType==3}}">
<van-icon name="arrow-left" bindtap='_navback'/>
<view class="centerTab">
<block wx:for="{{tablist}}" wx:for-index="idx" wx:for-item="item">
<view class="li {{tabcur==idx?'cur':''}}" bind:tap="tabClick" data-idx="{{idx}}">{{item}}</view>
</block>
</view>
<van-icon name="search" bindtap='_search'/>
</view>
<view class="navTop" style="height:{{menuHeight}}px;padding-right:{{menuWith}}px;" wx:if="{{navbarData.workType==4}}">
<van-icon name="arrow-left" bindtap='_navback'/>
<view class="centerTab">
<view class="li">司庆祝福</view>
</view>
<van-icon name="search" bindtap='_search'/>
</view>
</view>
<view class='nav-wrap' style='height: {{navHeight}}px;padding-top: {{navHeight - menuHeight}}px' wx:else>
<view class="navTop" style="height:{{menuHeight}}px;padding-right:{{menuWith}}px;">
<van-icon name="wap-home-o" bindtap='_backhome'/>
<view class="centerTab">
<view class="li">短视频</view>
</view>
</view>
</view>
wxss
/* pages/components/header/header.js.wxss */
.nav-wrap {
position: fixed;
width: 100%;
top: 0;
background: none;
color: #000;
z-index: 9999999;
overflow: hidden;
box-sizing: border-box;
}
/* 标题要居中 */
.nav-title {
position: absolute;
text-align: center;
max-width: 400rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
font-size: 36rpx;
color: #000;
font-weight: bold;
}
.leftnav {
display: flex;
justify-content:
space-around;
flex-direction: column
}
.nav-capsule {
display: flex;
align-items: center;
margin-left: 30rpx;
width: 140rpx;
justify-content: space-between;
height: 100%;
position: relative;
}
.navbar-v-line {
width: 1px;
height: 40rpx;
background-color: #fff;
}
.back-pre,
.back-home {
width: 40rpx;
height: 36rpx;
line-height: 36rpx;
font-size: 40rpx;
color: #fff;
}
.bg {
position: absolute;
width: 100%;
height: 100%;
}
.nav-wrap{background-color: rgba(0,0,0,.5)}
.navTop{
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 30rpx;
}
.navTop van-icon{
color: #fff;
font-weight: bold;
font-size: 50rpx;
}
.navTop .centerTab{
flex:1;
display: flex;
align-items: center;
justify-content: center;
}
.navTop .centerTab .li{
padding: 0 10rpx;
font-size: 30rpx;
font-weight: bold;
color: #fff;
line-height: 1.5em;
margin: 0 20rpx;
box-sizing: border-box;
}
.navTop .centerTab .li.cur{
border-bottom: 2px solid #fff;
}
js
const app = getApp()
Component({
properties: {
navbarData: { //navbarData 由父页面传递的数据,变量名字自命名
type: Object,
value: {},
observer: function(newVal, oldVal) {}
}
},
data: {
// height: '',
navHeight: 0,
menuHeight: 0,
menuWith:0,
tablist:['精选','全部'],
tabcur:0,
},
attached: function() {
// 获取是否是通过分享进入的小程序
this.setData({
share: app.globalData.share
})
// 定义导航栏的高度 方便对齐
this.setData({
// height: app.globalData.height
navHeight: app.globalData.navHeight,
menuHeight: app.globalData.menuHeight,
menuWith: app.globalData.menuWith
})
},
methods: {
// 返回上一页面
_navback() {
wx.navigateBack()
},
//返回到首页
_backhome() {
wx.reLaunch({
url: '/pages/index/index',
})
},
_search(){
wx.navigateTo({
url: '/pages/video_search/index?workType='+ this.data.navbarData.workType
})
},
tabClick(e){
this.setData({
tabcur: e.target.dataset.idx
})
this.triggerEvent("tabClick", { "tabcur": e.target.dataset.idx })
}
}
})
json 设置
在主页面引入
<navBar navbarData="{{navbarData}}" bind:tabClick="tabClick"></navBar>
bind:tabClick=“tabClick” 绑定组件点击事件
主页面 js
data:{
navbarData:{ //主页面传递给组件的值
isShare: false,
activityCode:’’,
workType:3
},
},
tabClick:function(e){
//触发事件,this.setData 赋值 navbarData
},