底部3-5个选项的底部导航栏,目前在移动端上是主流布局之一,因此腾讯官方特地做了,可以通过设置,就可以做出了一个底部的导航栏。
相关教程:
但是通过设置的这个底部的导航栏,功能上比较固定,它必须要设置与它对应的一个页面,而且并不能滑动。
在业务上,有时候会比较限制,并不能完全满足所需。
又例如早前有人拿着UI稿问我,这种广告轮播图的样式,在小程序能不能实现呢?
我当时没有想了下,还不是很确定,因为小程序的轮播图的那几个小点点实在比较普通,样式单一。
因此特意写了一篇自定义轮播图的文章
链接:
因此自定义就有这个必要性
下面介绍这个仿Android fragment可滑动的底部导航栏如何实现
项目最终效果图:
wxml:
rush:xml;">
Box" duration="300" style="height:{{winHeight - 51}}px" bindchange="bindChange">
Box" scroll-y="true" upper-threshold="50" lower-threshold="100" bindscrolltolower="scrolltolower">
<view class="themes-list">
<view class="themes-list-Box" wx:for="{{datalists}}">
<view class="themes-list-main">
<view class="themes-list-name">{{item}}
Box" scroll-y="true" upper-threshold="50" lower-threshold="100" bindscrolltolower="scrolltolower">
<view class="themes-list">
<view class="themes-list-Box" wx:for="{{reslists}}">
<view class="themes-list-main">
<view class="themes-list-name">{{item}}
Box" scroll-y="true" upper-threshold="50" lower-threshold="100" bindscrolltolower="scrolltolower">
<view class="themes-list">
<view class="themes-list-Box" wx:for="{{datalists}}">
<view class="themes-list-main">
<view class="themes-list-name">{{item}}
Box" scroll-y="true" upper-threshold="50" lower-threshold="100" bindscrolltolower="scrolltolower">
<view class="themes-list">
<view class="themes-list-Box" wx:for="{{reslists}}">
<view class="themes-list-main">
<view class="themes-list-name">{{item}}
<view class="swiper-tab">
<view class="swiper-tab-list {{currentTab==0 ? 'active' : ''}}" data-current="0" bindtap="swichNav">
<view class="swiper-tab-img"><image class="img" src="{{currentTab==0 ? iconlists[0].focus: iconlists[0].normal}}">
frag01
normal}}">
frag02
normal}}">
frag03
normal}}">
frag04
wxss:
rush:css;">
/*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-b
ottom: 20px;
}
.themes-list-
Box {
display: block;
position: relative;
padding: 16px 20px;
border-b
ottom: 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;
justify-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-b
ottom: 1px solid #FFCC00;*/
color: #FFCC00;
}
.swiper-tab-img {
text-align: center;
}
.img {
width:23px;
height: 23px;
}
js:
rush: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.getSy
stemInfo( {
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
})
}
}
})
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
原文地址:https://www.jb51.cc/weapp/39911.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。