小程序经常会出现选项卡和全屏选项卡，这里写一下我的布局，以便日后使用。
1.创建选项卡组件
我们先创建一个components文件夹和navlist的组件
QQ截图20190718114942.png
navlist的html:
<view class='nav-box'>
<view bindtap='clicnav' data-index="{{index}}" wx:for="{{navdata}}" wx:key="{{index}}" class='nav-list {{navindex === index?"clicknav":""}}'>
{{item.text}}
</view>
</view>
navlist的js:
// components/navbar/index.js
const App = getApp();
Component({
/**
* 组件的属性列表
*/
properties: {
//接收页面传过来的选项卡标签内容
navdata: {
type: Array,
value: []
},
//介绍swiper当前页面数值用于滑动swiper时改动选项卡的显示
current: {
type: Number,
//当父页面current值改动时触发num方法
observer: 'num',
}
},
/**
* 组件的初始数据
*/
data: {
//默认选择第一个
navindex:0,
},
attached(){
console.log(this.data.navdata);
},
/**
* 组件的方法列表
*/
methods: {
//选项卡的点击事件
clicnav(e){
//index 为选项卡的data-index参数
let index = e.currentTarget.dataset.index;
//赋值给navindex以改变点击表签的颜色
this.setData({
navindex: index
});
var that = this;
//将值传给父页面，让父页面改变swiper的当前轮播
var myEventDetail = { index: index } // detail对象，提供给事件监听函数
this.triggerEvent('myevent', myEventDetail) //myevent自定义名称事件，父组件中使用
},
num(num) {
//当父页面current值改动时修改navindex的值
this.setData({
navindex: num
});
}
}
})
navlist的json:
{
"component": true,
"usingComponents": {}
}
navlist的css:
/* components/navlist/navlist.wxss */
.nav-box{
width: 100%;
height: 100rpx;
display: flex;
}
.nav-list{
flex: 1;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 32rpx;
color: #000000;
box-sizing: border-box;
border-bottom: 2rpx solid #c4c4c4;
}
.clicknav{
border-bottom: 2rpx solid #e74a45;
color: #e74a45;
}
2.index页面调用组件
index页面调用选项卡组件并配合swiper滑动
index的html:
<view id="navheight">
<navlist bind:myevent="toggleToast" navdata="{{navdata}}" current="{{current}}"></navlist>
</view>
<swiper style='height:{{swiperHeight}}' current="{{navindex}}" bindchange="navchange">
<swiper-item>
<scroll-view style='width:100%;height:100%;background-color:green;' scroll-y>
我是第一页
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view style='width:100%;height:100%;background-color:yellow;' scroll-y>
我是第二页
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view style='width:100%;height:100%;background-color:blue;' scroll-y>
我是第三页
</scroll-view>
</swiper-item>
</swiper>
index的js:
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
//传给选项卡的标签内容
navdata: [{
text: "个人信息"
}, {
text: "个人评价"
}, {
text: "项目历史"
}],
navindex: 0,
current: 0,
swiperHeight: 0,
},
onLoad: function () {
let _this = this;
// 计算siiper到手机底部的高度赋值给swiper的height
wx.createSelectorQuery().select('#navheight').boundingClientRect(function (rect) {
wx.getSystemInfo({
success(res) {
_this.setData({
swiperHeight: (res.windowHeight - rect.bottom) + "px"
});
}
})
}).exec()
},
// 获取子组件信息
toggleToast(e) {
let index = e.detail.index;
this.setData({
navindex: index
});
},
// 滑动轮播事件
navchange(e) {
this.setData({
current: e.detail.current
});
}
})
index的json:
{
"usingComponents": {
"navlist": "./components/navlist/navlist"
}
}
index的css:无
至此我们的全屏选项卡就做好了
选项ka.gif
