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


Posted in Javascript onApril 16, 2020

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

相关教程:微信小程序教程系列之设置标题栏和导航栏(7)

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

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

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

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

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

链接:微信小程序实战之轮播图(3)

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

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

项目最终效果图:

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

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 
  }) 
 } 
 
 } 
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
Aug 08 Javascript
Node.js实战 建立简单的Web服务器
Mar 08 Javascript
实现web打印的各种方法介绍及实现代码
Jan 09 Javascript
实现动画效果核心方式的js代码
Sep 27 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 Javascript
JavaScript结合AJAX_stream实现流式显示
Jan 08 Javascript
JavaScript 函数的执行过程
May 09 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
Jun 25 Javascript
JavaScript实现Fly Bird小游戏
Dec 15 Javascript
bootstrap组件之导航组件使用方法
Jan 19 Javascript
JS前端轻量fabric.js系列之画布初始化
Aug 05 Javascript
JavaScript实现前端实时搜索功能
Mar 26 #Javascript
用 js 的 selection range 操作选择区域内容和图片
Apr 18 #Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
Apr 18 #Javascript
Angularjs根据json文件动态生成路由状态的实现方法
Apr 17 #Javascript
微信小程序实战之轮播图(3)
Apr 17 #Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
Jun 19 #Javascript
微信小程序实战之上拉(分页加载)效果(2)
Apr 17 #Javascript
You might like
Ajax+PHP 边学边练 之二 实例
2009/11/24 PHP
微信公众平台网页授权获取用户基本信息中授权回调域名设置的变动
2014/10/21 PHP
Opcache导致php-fpm崩溃nginx返回502
2015/03/02 PHP
jQuery 学习 几种常用方法
2009/06/11 Javascript
Ext对基本类型的扩展 ext,extjs,format
2010/12/25 Javascript
Javascript 面向对象编程(一) 封装
2011/08/28 Javascript
中文输入法不触发onkeyup事件的解决办法
2014/07/09 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
2016/08/02 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
JSON 数据详解及实例代码分析
2017/01/20 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
2017/08/16 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
2017/12/28 Javascript
electron demo项目npm install安装失败的解决方法
2018/02/06 Javascript
centos 上快速搭建ghost博客方法分享
2018/05/23 Javascript
Vue 让元素抖动/摆动起来的实现代码
2018/05/31 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
2018/09/30 Javascript
js 闭包深入理解与实例分析
2020/03/19 Javascript
[09:31]2016国际邀请赛中国区预选赛Yao赛后采访 答题送礼
2016/06/27 DOTA
python使用正则表达式替换匹配成功的组
2017/11/17 Python
python批量设置多个Excel文件页眉页脚的脚本
2018/03/14 Python
python: line=f.readlines()消除line中\n的方法
2018/03/19 Python
Django安装配置mysql的方法步骤
2018/10/15 Python
Python 实现自动导入缺失的库
2019/10/29 Python
兰芝美国网上商城:购买LANEIGE睡眠面膜等
2017/06/30 全球购物
世界上最大的售后摩托车零配件超市:J&P Cycles
2017/12/08 全球购物
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
学前教育教师求职自荐信
2013/09/22 职场文书
2014年创卫实施方案
2014/02/18 职场文书
企业演讲比赛主持词
2014/03/18 职场文书
大学生学习计划书
2014/09/15 职场文书
2014年学校卫生工作总结
2014/11/20 职场文书
订货会邀请函
2015/01/31 职场文书