文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2022-06-06 11:51

关注

底部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%20?%20iconlists[0].focus:%20iconlists[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%20?%20iconlists[1].focus:%20iconlists[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%20?%20iconlists[2].focus:%20iconlists[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%20?%20iconlists[3].focus:%20iconlists[3].normal}}"></image></view> 
 <view>frag04</view> 
 </view> 
</view> 

wxss:


 
.swiper-box { 
 display: block; 
 height: 100%; 
 width: 100%; 
 overflow: hidden; 
} 
.hot-box { 
 display: block; 
 height: 100%; 
 font-family: Helvetica; 
} 
 
.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; 
} 
 
.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 { 
  
 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 
    }); 
   } 
  }); 
 }, 
  
 bindChange: function( e ) { 
  var that = this; 
  that.setData( { currentTab: e.detail.current }); 
 }, 
  
 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 
   }) 
  } 
 } 
}) 


阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯