主页 / 网络编程 /

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

网络编程 2021-07-04 18:32www.168986.cn编程入门
这篇文章主要为大家详细介绍了微信小程序实战之仿android fragment可滑动的底部导航栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

相关教程

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

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

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

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

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

链接

自定义就有这个必要性

狼蚁网站SEO优化介绍这个仿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_--> 
<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-: 1px solid #c; 
} 
.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( { 
  suess: 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 
  }) 
 } 
 
 } 
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。

上一篇：微信小程序教程系列之设置标题栏和导航栏（7） 下一篇：JavaScript实现前端实时搜索功能

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by