推56論壇

 找回密碼
 立即注冊(限中文)

QQ登錄

只需一步,快速開始

查看: 853|回復: 0
打印 上一主題 下一主題

[小程序教程] 微信小程序教程(24) : 微信小程序之仿android fr**ment之可滑動的底部導航欄實例

[復制鏈接]
跳轉到指定樓層
樓主
發表于 2018-4-21 16:42:38 | 只看該作者 回帖獎勵 |倒序瀏覽 |閱讀模式

底部3-5個選項的底部導航欄,目前在移動端上是主流布局之一

因此騰訊官方特地做了,可以通過設置,就可以做出了一個底部的導航欄

相關教程:http://blog.csdn.net/michael_ouyang/article/details/55045300

但是通過設置的這個底部的導航欄,功能上比較固定,它必須要設置與它對應的一個頁面,而且并不能滑動。

在業務上,有時候會比較限制,并不能完全滿足所需。


又例如早前有人拿著UI稿問我,這種廣告輪播圖的樣式,在小程序能不能實現呢?

我當時沒有想了下,還不是很確定,因為小程序的輪播圖的那幾個小點點實在比較普通,樣式單一。

因此特意寫了一篇自定義輪播圖的文章

鏈接:http://blog.csdn.net/michael_ouyang/article/details/58591232


因此自定義就有這個必要性


下面介紹這個仿android fragment可滑動的底部導航欄如何實現


項目最終效果圖:



wxml:


[html] view plain copy


  • <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:


[css] view plain copy


  • /*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:

[javascript] view plain copy


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



本版積分規則

關閉

推56站長論壇推薦上一條 /1 下一條

站長QQ
在線咨詢
咨詢熱線
QQ:405327411
站長

QQ|廣告合作|關于我們|聯系我們|免責聲明|網站導航|小黑屋|站長論壇 ( 豫ICP備11018337號-5 )

王寶臣旗下網站 推56論壇(www.fuibch.live)站長論壇 SEO論壇 網絡營銷論壇 新手站長論壇 網絡推廣論壇 站長社區 站長網

Powered by Discuz! X3.4 Licensed

©2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表
3分赛车计划软件 秒速快三在线预测 完整篮球比分网 11选5山东 精选六尾中特 南京好运麻将100微信群 3d开机号彩吧 福建十一选五开奖号 万人捕鱼游戏 gg516棋牌游戏中心 波克安徽麻将在哪买挂 广东快乐十分专家计 重庆幸运农场快乐十