微信小程序实战之仿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 相关文章推荐
prototype 源码中文说明之 prototype.js
Sep 22 Javascript
Javascript中的数学函数集合
May 08 Javascript
myEvent.js javascript跨浏览器事件框架
Oct 24 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
Jan 09 Javascript
Jquery的each里用return true或false代替break或continue
May 21 Javascript
jquery中checkbox使用方法简单实例演示
Nov 24 Javascript
JavaScript异步上传图片文件的实例代码
Jul 04 Javascript
利用pm2部署多个node.js项目的配置教程
Oct 22 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
Sep 29 Javascript
vue-cli3全面配置详解
Nov 14 Javascript
详解VUE单页应用骨架屏方案
Jan 17 Javascript
微信小程序国际化探索实现(附源码地址)
May 20 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
php下获取客户端ip地址的函数
2010/03/15 PHP
PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
2014/05/04 PHP
PHP实现搜索相似图片
2015/09/22 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
PHP递归统计系统中代码行数
2019/09/19 PHP
解决tp5在nginx下修改配置访问的问题
2019/10/16 PHP
javascript JSON操作入门实例
2010/04/16 Javascript
5个javascript的数字格式化函数分享
2011/12/07 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
2014/10/17 Javascript
js结合正则实现国内手机号段校验
2015/06/19 Javascript
javascript比较两个日期相差天数的方法
2015/07/24 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
2016/06/20 Javascript
原生js实现验证码功能
2017/03/16 Javascript
Vue学习之路之登录注册实例代码
2017/07/06 Javascript
JavaScript实现图片切换效果
2017/08/12 Javascript
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
详解Vue CLI 3.0脚手架如何mock数据
2018/11/23 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
2019/07/11 jQuery
VUE实现强制渲染,强制更新
2019/10/29 Javascript
Openlayers实现地图的基本操作
2020/09/28 Javascript
[02:40]DOTA2英雄基础教程 炼金术士
2013/12/23 DOTA
简明 Python 基础学习教程
2007/02/08 Python
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
Python多维/嵌套字典数据无限遍历的实现
2016/11/04 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
Ray-Ban雷朋奥地利官网:全球领先的太阳眼镜品牌
2020/10/12 全球购物
迎新晚会主持词
2014/03/24 职场文书
教职工代表大会主持词
2014/04/01 职场文书
保护环境建议书300字
2014/05/13 职场文书
商标侵权律师函
2015/05/27 职场文书
活着观后感
2015/06/03 职场文书
2015年大学生暑期实习报告
2015/07/13 职场文书
浅谈Redis的keys命令到底有多慢
2021/10/05 Redis