微信小程序实战之仿android fragment可滑动底部导航栏（4）

微信小程序实战之仿android fragment可滑动底部导航栏（4）

底部3-5个选项的底部导航栏，目前在移动端上是主流布局之一，因此腾讯官方特地做了，可以通过设置，就可以做出了一个底部的导航栏。

相关教程：微信小程序教程系列之设置标题栏和导航栏（7）

但是通过设置的这个底部的导航栏，功能上比较固定，它必须要设置与它对应的一个页面，而且并不能滑动。

在业务上，有时候会比较限制，并不能完全满足所需。

又例如早前有人拿着UI稿问我，这种广告轮播图的样式，在小程序能不能实现呢？

我当时没有想了下，还不是很确定，因为小程序的轮播图的那几个小点点实在比较普通，样式单一。

因此特意写了一篇自定义轮播图的文章

链接：微信小程序实战之轮播图（3）

因此自定义就有这个必要性

下面介绍这个仿android fragment可滑动的底部导航栏如何实现

项目最终效果图：

wxml：

{{item}}

<view class="themes-list-box" wx:for="{{reslists}}">

{{item}}

{{item}}

{{item}}

frag01

frag02

frag03

frag04

wxss：

/*swiper*/

.swiper-box {

display: block;

height: 100%;

width: 100%;

overflow: hidden;

}

.hot-box {

display: block;

height: 100%;

font-family: Helvetica;

}

/* list */

.themes-list {

background: #fff;

display: block;

margin-bottom: 20px;

}

.themes-list-box {

display: block;

position: relative;

padding: 16px 20px;

border-bottom: 1px solid #f2f2f2;

}

.themes-list-main {

margin-left: 1px;

}

.themes-list-name {

font-size: 14px;

color: #444;

height: 20px;

line-height: 20px;

overflow: hidden;

}

/*tab*/

.swiper-tab {

height: 50px;

background: #fff;

display: flex;

position: relative;

z-index: 2;

flex-direction: row;

justhttp://ify-content: center;

align-items: center;

border-top: 1px solid #ccc;

}

.swiper-tab-list {

margin: 0 20px;

padding: 0 4px;

font-size: 28rpx;

font-family: Helvetica;

}

.active {

/*border-bottom: 1px solid #FFCC00;*/

color: #FFCC00;

}

.swiper-tab-img {

text-align: center;

}

.img {

width:23px;

height: 23px;

}

js：

Page( {

data: {

winWidth: 0,

winHeight: 0,

currentTab: 0,

datalists : [

"习近平主持中央财经领导小组第十五次会议",

"李克强打叉的“万里审批图”成历史",

"新疆自治区举行反恐维稳誓师大会",

"朝鲜代表团抵达马来西亚处理金正男遇害案",

"习近平主持中央财经领导小组第十五次会议",

"李克强打叉的“万里审批图”成历史",

"新疆自治区举行反恐维稳誓师大会",

"砸锅卖铁！索尼是在走向毁灭 还是在奔向新生？"

],

reslists:["hello","thank you for your read","if u feel good","can u give me good？"],

iconlists:[

{normal:"../../images/wp.png",focus:"../../images/wpselect.png"},

{normal:"../../images/ss.png",focus:"../../images/ssselect.png"},

{normal:"../../images/hc.png",focus:"../../images/hcselect.png"},

{normal:"../../images/my.png",focus:"../../images/myselect.png"},

]

},

onLoad: function( options ) {

var that = this;

//获取系统信息

wx.getSystemInfo( {

success: function( res ) {

that.setData( {

winWidth: res.windowWidth,

winHeight: res.windowHeight

});

}

});

},

/**

* 滑动切换tab

*/

bindChange: function( e ) {

var that = this;

that.setData( { currentTab: e.detail.current });

},

/**

* 点击切换tab

*/

swichNav: function( e ) {

console.log(e)

var that = this;

if( this.data.currentTab === e.currentTarget.dataset.current ) {

//点击的是同一个，则不操作

return false;

} else {

that.setData( {

currentTab: e.currentTarget.dataset.current

})

}

}

})

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。