微信小程序实现顶部选项卡(swiper)

2024-12-01 15:08:49

微信小程序顶部选项卡在开发中是非常常用的，下面用一点时间实现了一下。

效果图：

下面直接上代码:

wxml:

<!--pages/index/index.wxml-->
<view class="swiper-tab">
 <view class="tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">选项一</view>
 <view class="tab-item {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">选项二</view>
 <view class="tab-item {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">选项三</view>
</view> 

<swiper current="{{currentTab}}" class="swiper" duration="300" style="height:{{winHeight - 30}}px" bindchange="bindChange">
 <swiper-item>
  <view>页面一</view>
 </swiper-item>
 <swiper-item>
  <view>页面二</view>
 </swiper-item>
 <swiper-item>
  <view>页面三</view>
 </swiper-item>
</swiper>

wxss:

/* pages/index/index.wxss */
.swiper-tab{
 width: 100%;
 text-align: center;
 line-height: 80rpx;
 border-bottom: 1px solid #000;
 display: flex;
 flex-direction: row;
 justify-content: center;
}
.tab-item{
 flex: 1;
 font-size: 30rpx;
 display: inline-block;
 color: #777777;
}
.on{
 color: red;
 border-bottom: 5rpx solid red;
}
.swiper{ display: block; height: 100%; width: 100%; overflow: hidden; }
.swiper view{
 text-align: center;
 padding-top: 100rpx;
}

js:

// pages/index/index.js
Page({ 

 /**
  * 页面的初始数据
  */
 data: {
  winWidth:0,
  winHeight:0,
  currentTab:0
 }, 

 /**
  * 生命周期函数--监听页面加载
  */
 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) { 

  var that = this; 

  if (this.data.currentTab === e.target.dataset.current) {
   return false;
  } else {
   that.setData({
    currentTab: e.target.dataset.current
   })
  }
 } ,
 /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
 onPullDownRefresh: function () { 

 }, 

 /**
  * 页面上拉触底事件的处理函数
  */
 onReachBottom: function () { 

 }, 

 /**
  * 用户点击右上角分享
  */
 onShareAppMessage: function () { 

 }
})

以上是实现过程，总体上没什么难度。可以参考参考。

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

微信小程序 tabs选项卡效果的实现

微信小程序 tabs选项卡效果前言: 最近微信应用号是炒的如火如荼,热门满满,但是也可以发现搜索关键词出来,各类网站出现的还都是微信的官方文档解释.正好赶上这个热潮,这几天先把小程序技术文档看了个遍,就直接着手写案例了.很多组件微信内部已经封装完了,正好发现没有tab选项卡效果,这两天正好研究了下.思路如下: 1.首先点击导航的时候需要两个变量,一个存储当前点击样式类,一个是其它导航默认的样式类 2.选项卡内容列表同样也需要两个变量,一个存储当前显示块,一个存储的是其它隐藏的默认块 3.使用三
微信小程序实现tabs选项卡效果实例代码

最近微信应用号是炒的如火如荼,热门满满,但是也可以发现搜索关键词出来,各类网站出现的还都是微信的官方文档解释.正好赶上这个热潮,这几天先把小程序技术文档看了个遍,就直接着手写案例了.很多组件微信内部已经封装完了,正好发现没有tab选项卡效果,这两天正好研究了下.思路如下: 1.首先点击导航的时候需要两个变量,一个存储当前点击样式类,一个是其它导航默认的样式类 2.选项卡内容列表同样也需要两个变量,一个存储当前显示块,一个存储的是其它隐藏的默认块 3.使用三目运算通过点击获取导航索引,根据索引判断
微信小程序之选项卡的实现方法

微信小程序之选项卡的实现方法前言: 从事前端的同学们一定不会对选项卡陌生,不管是自己原生写的,还是各个UI框架里带的,我想大家都使用过很多选项卡,对选项卡的原理也足够清楚了,下面我们来在微信小程序里实现选项卡的功能. 微信小程序里没有自带选项卡组件,但是却带有swiper组件,所以,我们便利用swiper来实现选项卡的功能. 先看效果图: 实现代码: 页面代码: <view class="swiper-tab"> <view class="swiper-
微信小程序实战之顶部导航栏（选项卡）（1）

本文实例为大家分享了微信小程序顶部导航栏的具体代码,供大家参考,具体内容如下需求:顶部导航栏效果图: wxml:  <view class="navbar"> <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key=&qu
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换

微信小程序开发中选项卡.在Android中选项卡一般用fragment,到了小程序这里瞬间懵逼了. 总算做出来了.分享出来看看. 先看效果: 再上代码: 1.index.wxml  <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0"
微信小程序开发之选项卡(窗口底部TabBar)页面切换

微信小程序开发中窗口底部tab栏切换页面很简单很方便. 代码: 1.app.json //app.json { "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": &qu
微信小程序选项卡的简单实例

微信小程序选项卡的简单实例看下效果代码: home.wxml  <view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">热门</view&g
微信小程序实现顶部普通选项卡效果(非swiper)

背景:前段时间写了一个抢红包小程序,里面涉及到了顶部选项卡,把它抽了出来. 效果图: 下面直接上代码: wxml: <view class="navbar"> <text wx:for="{{navbar}}" data-index="{{index}}" class="item {{currentIndex==index?'active':''}}" bindtap="navbarTab"
微信小程序实现顶部选项卡(swiper)

微信小程序顶部选项卡在开发中是非常常用的,下面用一点时间实现了一下. 效果图: 下面直接上代码: wxml:  <view class="swiper-tab"> <view class="tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav"&
微信小程序中顶部导航栏的实现代码

微信小程序中顶部导航栏的实现实例代码: <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">11</view> <view class="swiper-tab-list {{curre
微信小程序的tab选项卡的实现效果

效果图,既可以点击切换,又可以滑动切换 .wxml  <view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">全部</view> &
微信小程序实现顶部导航特效

本文实例为大家分享了微信小程序实现顶部导航的具体代码,供大家参考,具体内容如下之前Android开发时,顶部导航用到viewPage,微信小程序里想要达到同样的效果,可用swiper来实现,先看效果图上代码: 1.swiperTab.js Page({ data: { // tab切换 currentTab: 0, }, swichNav: function (e) { console.log(e); var that = this; if (this.data.currentTab ===
微信小程序配置顶部导航条标题颜色的实现方法

微信小程序配置顶部导航条标题颜色的实现方法关于小程序导航顶部配置都写在.json文件中. { "window":{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "bac
微信小程序实现单选选项卡切换效果

这里展示一个工作中用到的微信小程序的单选选项卡切换效果的制作方法,供大家参考,具体内容如下效果如图: wxml: <view class="item" wx:for="{{data}}" wx:for-item="item" wx:for-index="idx" data-idx="{{idx}}" bindtap="chooseItem"> <view class=
微信小程序实现一个简单swiper代码实例

这篇文章主要介绍了微信小程序实现一个简单swiper代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下话不多说,上截图 HTML <swiper class="swiper-block" previous-margin="70rpx" next-margin="70rpx" current="0" autoplay="true" bindcha
微信小程序自定义顶部组件customHeader的示例代码

1.开启配置自定义顶部 { "window": { "navigationStyle":"custom" } } 在app.json的文件window配置"navigationStyle": "custom"属性即可 2.自定义顶部计算原理 2.1 获取系统状态栏的高度和屏幕宽度使用wx.getSystemInfo这个函数获取系统状态栏的高度和屏幕宽度. 2.2 获取右上角胶囊位置信息使用wx.getM
微信小程序轮播图swiper代码详解

微信小程序自定义swiper 滑块视图容器.其中只可放置swiper-item组件,否则会导致未定义的行为. 先在index.wxml中写 style="background:{{item}}" 报错不要管,不影响页面布局 <view class="container"> <swiper class="swiper1" indicator-dots="{{indicatorDots}}" 是否显示面板指示点
微信小程序实现顶部搜索框

本文实例为大家分享了微信小程序实现顶部搜索框的具体代码,供大家参考,具体内容如下这是一个最简单的顶部搜索框,代码如下 wxml <view> <view> <view class="weui-search-bar"> <view class="weui-search-bar__form">

微信小程序实现顶部选项卡(swiper)

相关推荐

随机推荐