微信小程序实战之仿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 相关文章推荐
js实现的常用的左侧导航效果
Oct 17 Javascript
jquery遍历table的tr获取td的值实现方法
May 19 Javascript
微信小程序  audio音频播放详解及实例
Nov 02 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
Nov 29 Javascript
JS在浏览器中解析Base64编码图像
Feb 09 Javascript
微信小程序 支付功能开发错误总结
Feb 21 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
May 03 Javascript
VUE实现表单元素双向绑定(总结)
Aug 08 Javascript
Javascript 编码约定(编码规范)
Mar 11 Javascript
webpack4 处理CSS的方法示例
Sep 03 Javascript
Vue混入mixins滚动触底的方法
Nov 22 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
Jan 18 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
40个迹象表明你还是PHP菜鸟
2008/09/29 PHP
Smarty的配置与高级缓存技术分享
2012/06/05 PHP
JavaScript经典效果集锦
2010/07/06 Javascript
JS教程:window.location使用方法的区别介绍
2013/10/04 Javascript
TypeScript Type Innference(类型判断)
2016/03/10 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
JS实战篇之收缩菜单表单布局
2016/12/10 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
2017/02/10 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
2017/09/14 Javascript
原生JS封装animate运动框架的实例
2017/10/12 Javascript
js注册时输入合法性验证方法
2017/10/21 Javascript
vue-cli中的babel配置文件.babelrc实例详解
2018/02/22 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
2018/09/06 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
2019/06/03 Javascript
微信小程序加载机制及运行机制图解
2019/11/27 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
2020/06/28 Javascript
python+mongodb数据抓取详细介绍
2017/10/25 Python
python中for循环输出列表索引与对应的值方法
2018/11/07 Python
Python中的类与类型示例详解
2019/07/10 Python
Python列表list操作相关知识小结
2020/01/29 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
python对文件的操作方法汇总
2020/02/28 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
2014/06/30 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
2020/06/23 HTML / CSS
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
英语专业学子个人的自我评价
2013/10/02 职场文书
护士长竞聘演讲稿
2014/04/30 职场文书
学雷锋活动总结报告
2014/06/26 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书
小学生反邪教心得体会
2016/01/15 职场文书
2019消防宣传标语!
2019/07/10 职场文书
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python