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

底部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 ? 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
   })
  } 

 }
}) 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android 使用Fragment模仿微信界面的实例代码

    什么是Fragment 自从Android 3.0中引入fragments 的概念,根据词海的翻译可以译为:碎片.片段.其目的是为了解决不同屏幕分辩率的动态和灵活UI设计.大屏幕如平板小屏幕如手机,平板电脑的设计使得其有更多的空间来放更多的UI组件,而多出来的空间存放UI使其会产生更多的交互,从而诞生了fragments . fragments 的设计不需要你来亲自管理view hierarchy 的复杂变化,通过将Activity 的布局分散到frament 中,可以在运行时修改activit

  • Android Fragment+FragmentTabHost组件实现常见主页面(仿微信新浪)

    采取的方法是Fragment+FragmentTabHost组件来实现这种常见的app主页面的效果 首先给出main.xml文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical"

  • android 中viewpager+fragment仿微信底部TAG完美渐变

    viewpager+fragment仿微信底部TAG完美渐变,在图片渐变的同时字的颜色也在变,注意,是渐变哦! 效果图: activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:zhy="http://schemas.android.com/apk/res/com.Sing.weixin" xmlns:tools="

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

    底部3-5个选项的底部导航栏,目前在移动端上是主流布局之一,因此腾讯官方特地做了,可以通过设置,就可以做出了一个底部的导航栏. 相关教程:微信小程序教程系列之设置标题栏和导航栏(7) 但是通过设置的这个底部的导航栏,功能上比较固定,它必须要设置与它对应的一个页面,而且并不能滑动. 在业务上,有时候会比较限制,并不能完全满足所需. 又例如早前有人拿着UI稿问我,这种广告轮播图的样式,在小程序能不能实现呢? 我当时没有想了下,还不是很确定,因为小程序的轮播图的那几个小点点实在比较普通,样式单一. 因

  • 微信小程序 实战程序简易新闻的制作

    微信小程序 实战项目: 简易新闻制作 先看下效果: 实现思路数据全部是采用的本地数据,图片也是本地图片,因为苦逼的个人开发者,无法认证:toolbar四个现象:新闻,笑话,历史上的今天和主页,集中主页采用的是默认的页面,添加自己的一些内容:数据绑定,列表渲染,条件渲染和事件的使用:使用一些基础的View和text,部分API的使用: 代码结构 目录 用途 images 存放本地图片 pages 存放页面,history历史上的今天,index主页,joke笑话,news新闻 utils 工具包

  • 微信小程序实现的点击按钮 弹出底部上拉菜单功能示例

    本文实例讲述了微信小程序实现的点击按钮 弹出底部上拉菜单功能.分享给大家供大家参考,具体如下: index.wxml <button type="default" bindtap="actionSheetTap">弹出action sheet</button> <action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetbindch

  • android中Fragment+RadioButton实现底部导航栏

    在App中经常看到这样的tab底部导航栏 那么这种效果是如何实现,实现的方式有很多种,最常见的就是使用Fragment+RadioButton去实现.下面我们来写一个例子 首先我们先在activity_mian.xml定义布局,整个布局的外面是线性布局,上面是帧布局切换不同的Fragment,底下是RadioGroup嵌套的是RadioButton.代码如下所示: <?xml version="1.0" encoding="utf-8"?> <Li

  • 解决android 显示内容被底部导航栏遮挡的问题

    描述: 由于产品需求,要求含有EditText的界面全屏显示,最好的解决方式是使用AndroidBug5497Workaround.assistActivity(this) 的方式来解决,但是华为和魅族手机系统自带的有底部导航栏,会造成一些布局被遮挡. 解决方案:在values-21的style.xml中添加android:windowDrawsSystemBarBackgrounds"并将值设置为false,方式如下 在style引用的主题里面加入android:windowDrawsSyst

  • 微信小程序实战之自定义模态弹窗(8)

    首先看看官方提供的模态弹窗,供大家参考,具体内容如下 api如下: 示例: 这样的模态弹窗,充其量只能做个alert,提示一下信息. 但是并不能使用它来处理复杂性的弹窗业务,因此写了Michael从新自定义了一个,采用了仿原生的样式写法 wxml: <!--button--> <view class="btn" bindtap="powerDrawer" data-statu="open">button</view&

  • 微信小程序 实战小程序实例

    微信小程序基本组件和API已撸完,总归要回到正题的,花了大半天时间做了个精简版的百思不得姐,包括段子,图片,音频,视频,四个模块.这篇就带着大家简述下这个小的APP,源码会放到GitHub上欢迎start. 项目中我能学到什么? tabbar使用方式 网络调用真实接口 loading使用 scroll-view实现下拉刷新上拉加载 image组件对图片的处理, 音乐和视频组件的使用 跳转传值使用 等等等.... app.json全局配置文件 { "pages":[ "page

  • 微信小程序实战之运维小项目

    前言 自从微信推出小程序以来,现在业界炒的非常的火,具说叫微信小程序是因为某公司不让叫应用号,我在朋友圈也看过pony的和张小龙朋友圈关于名字的讨论截图,不知道是真是假,反正名字是定了,叫啥无所谓,还是知道它是干啥的比较重要, 像网上说什么新风口了,原生APP以后没活路了等相关文章喜欢的可以多看看, 我们今天不会在产品层面上去介绍小程序,因为我们是搞运维的,所以我还是在运维层面怎么使用小程序. 今天我们用实际例子来讲解和普及小小程序如何使用,来实现类似IP138的功能,输入IP可以查看IP的详细

  • 微信小程序实战之轮播图(3)

    轮播图是大部分应用的一个常用的功能,常用于广告投放.产品展示.活动展示等等. 漂亮的轮播图效果可以吸引用户的点击,达到推广产品的作用. 废话少说,下面开始动手. 业务需求: 5个图片轮番播放,可以左右滑动,点击指示点可以切换图片 重点说明: 由于微信小程序,整个项目编译后的大小不能超过1M 查看做轮播图功能的一张图片大小都已经有100+k了 那么我们可以把图片放在服务器上,发送请求来获取. index.wxml: 这里使用小程序提供的<swiper>组件 autoplay:自动播放 inter

  • 微信小程序实战之顶部导航栏(选项卡)(1)

    本文实例为大家分享了微信小程序顶部导航栏的具体代码,供大家参考,具体内容如下 需求:顶部导航栏 效果图: wxml: <!--导航条--> <view class="navbar"> <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key=&qu

随机推荐

其他