微信小程序实战之仿android fragment可滑动底部导航栏(4)
作者:michael_ouyang 时间:2023-07-02 16:22:38
底部3-5个选项的底部导航栏,目前在移动端上是主流布局之一,因此腾讯官方特地做了,可以通过设置,就可以做出了一个底部的导航栏。
相关教程:微信小程序教程系列之设置标题栏和导航栏(7)
但是通过设置的这个底部的导航栏,功能上比较固定,它必须要设置与它对应的一个页面,而且并不能滑动。
在业务上,有时候会比较限制,并不能完全满足所需。
又例如早前有人拿着UI稿问我,这种广告轮播图的样式,在小程序能不能实现呢?
我当时没有想了下,还不是很确定,因为小程序的轮播图的那几个小点点实在比较普通,样式单一。
因此特意写了一篇自定义轮播图的文章
链接:微信小程序实战之轮播图(3)
因此自定义就有这个必要性
下面介绍这个仿Android fragment可滑动的底部导航栏如何实现
项目最终效果图:
wxml:
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 51}}px" bindchange="bindChange">
<!-- frag01 -->
<swiper-item>
<scroll-view class="hot-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}}</view>
</view>
</view>
</view>
</scroll-view>
</swiper-item>
<!-- grag02 -->
<swiper-item>
<scroll-view class="hot-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>
</view>
</view>
</view>
</scroll-view>
</swiper-item>
<!-- grag03 -->
<swiper-item>
<scroll-view class="hot-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}}</view>
</view>
</view>
</view>
</scroll-view>
</swiper-item>
<!-- grag02 -->
<swiper-item>
<scroll-view class="hot-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>
</view>
</view>
</view>
</scroll-view>
</swiper-item>
</swiper>
<!--tab_top-->
<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}}"></image></view>
<view>frag01</view>
</view>
<view class="swiper-tab-list {{currentTab==1 ? 'active' : ''}}" data-current="1" bindtap="swichNav">
<view class="swiper-tab-img"><image class="img" src="{{currentTab==1 ? iconlists[1].focus: iconlists[1].normal}}"></image></view>
<view>frag02</view>
</view>
<view class="swiper-tab-list {{currentTab==2 ? 'active' : ''}}" data-current="2" bindtap="swichNav">
<view class="swiper-tab-img"><image class="img" src="{{currentTab==2 ? iconlists[2].focus: iconlists[2].normal}}"></image></view>
<view>frag03</view>
</view>
<view class="swiper-tab-list {{currentTab==3 ? 'active' : ''}}" data-current="3" bindtap="swichNav">
<view class="swiper-tab-img"><image class="img" src="{{currentTab==3 ? iconlists[3].focus: iconlists[3].normal}}"></image></view>
<view>frag04</view>
</view>
</view>
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;
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-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
})
}
}
})
来源:http://blog.csdn.net/michael_ouyang/article/details/60333699
标签:微信小程序,导航栏
0
投稿
猜你喜欢
Vue Cli与BootStrap结合实现表格分页功能
2024-05-09 15:21:44
Python时间戳转换为字符串与字符串转换为时间戳
2023-04-20 12:47:56
Pandas读取MySQL数据到DataFrame的方法
2024-01-20 02:29:04
python导入时小括号大作用
2021-09-07 19:11:09
Python使用pydub模块转换音频格式以及对音频进行剪辑
2023-03-22 02:17:37
基于Python实现船舶的MMSI的获取(推荐)
2022-02-05 07:44:33
jupyter notebook实现显示行号
2022-11-20 03:51:40
详解Python Opencv和PIL读取图像文件的差别
2023-09-14 07:36:00
基于B-树和B+树的使用:数据搜索和数据库索引的详细介绍
2024-01-19 01:28:16
golang定时任务cron项目实操指南
2023-08-26 00:21:40
Mysql远程访问的开启
2009-12-17 12:27:00
python 绘制斜率图进行对比分析
2022-03-18 15:31:38
用python写个颜值评分器筛选最美主播
2022-11-25 22:13:08
python中如何利用matplotlib画多个并列的柱状图
2022-04-14 12:38:42
SQL Server如何才能访问Sybase中的表
2009-01-08 13:33:00
asp是什么格式 asp文件用什么打开
2020-06-30 16:04:48
Mysql存储过程学习笔记--建立简单的存储过程
2024-01-23 14:41:21
Oracle 数组的学习 小知识也要积累,养成好的学习态度
2024-01-27 21:15:25
python中常用的内置模块汇总
2023-12-28 14:57:01
php测试kafka项目示例
2023-11-19 20:40:04