WeUI for 小程序navbar导航栏选项卡示例

2018年11月09日 08:55 | 27次浏览 作者原创 版权保护

一、引入小程序weui css样式库,请参考第一章


二、在pages目录中新建目录navbar以及文件navbar.wxml,并添加如下代码

<view class="page">
<view class="page__bd">
<view class="weui-tab">
<view class="weui-navbar">
<block wx:for="{{tabs}}" wx:key="*this">
<view id="{{index}}" class="weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick">
<view class="weui-navbar__title">{{item}}</view>
</view>
</block>
<view class="weui-navbar__slider" style="left: {{sliderLeft}}px; transform: translateX({{sliderOffset}}px); -webkit-transform: translateX({{sliderOffset}}px);"></view>
</view>
<view class="weui-tab__panel">
<view class="weui-tab__content" hidden="{{activeIndex != 0}}">选项一的内容</view>
<view class="weui-tab__content" hidden="{{activeIndex != 1}}">选项二的内容</view>
<view class="weui-tab__content" hidden="{{activeIndex != 2}}">选项三的内容</view>
</view>
</view>
</view>
</view>

如上述代码,我们建了三个选项卡,实际上选项卡的多少是由js控制的,请继续看下面文章内容。


三、在根目录app.json配置文件中配置navbar文件路径,保存后会自动生成对应的js、css等文件

"pages/navbar/navbar",


四、navbar.wxss代码实现

page,
.page,
.page__bd{
height: 100%;
}
.page__bd{
padding-bottom: 0;
}
.weui-tab__content{
padding-top: 60px;
text-align: center;
}
/*****www.vxzsk.com V型知识库原创********/


五、navbar.js代码实现

var sliderWidth = 96; // 需要设置slider的宽度,用于计算中间位置

Page({
data: {
tabs: ["选项一", "选项二", "选项三"],
activeIndex: 1,
sliderOffset: 0,
sliderLeft: 0
},
onLoad: function () {
var that = this;
wx.getSystemInfo({
success: function(res) {
that.setData({
sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2,
sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex
});
}
});
},
tabClick: function (e) {
this.setData({
sliderOffset: e.currentTarget.offsetLeft,
activeIndex: e.currentTarget.id
});
}
});


六、效果

如上述效果如所示,此时一共有三个选项卡,我们增加一个选项卡怎么办呢,修改navbar.js代码

data: {
tabs: ["选项一", "选项二", "选项三", "选项四"],
activeIndex: 1,
sliderOffset: 0,
sliderLeft: 0
}

运行效果:


此文章本站原创,地址 https://www.vxzsk.com/1922.html   转载请注明出处!谢谢!

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程