微信小程序之选项卡的实现方法
微信小程序之选项卡的实现方法
前言:
从事前端的同学们一定不会对选项卡陌生,不管是自己原生写的,还是各个UI框架里带的,我想大家都使用过很多选项卡,对选项卡的原理也足够清楚了,下面我们来在微信小程序里实现选项卡的功能。
微信小程序里没有自带选项卡组件,但是却带有swiper组件,所以,我们便利用swiper来实现选项卡的功能。
先看效果图:
实现代码:
页面代码:
<view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">一</view> <view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">二</view> <view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">三</view> </view> <swiper current="{{currentTab}}" duration="300" bindchange="swiperTab"> <swiper-item><view>第一屏</view></swiper-item> <swiper-item><view>第二屏</view></swiper-item> <swiper-item><view>第三屏</view></swiper-item> </swiper>
js代码:
var app=getApp() Page({ data:{ currentTab:0 }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 }, //滑动切换 swiperTab:function( e ){ var that=this; that.setData({ currentTba:e.detail.current }); }, //点击切换 clickTab: function( e ) { var that = this; if( this.data.currentTab === e.target.dataset.current ) { return false; } else { that.setData( { currentTab: e.target.dataset.current }) } } })
css代码:
.swiper-tab{ width: 100%; border-bottom: 2rpx solid #ccc; text-align: center; height: 88rpx; line-height: 88rpx; font-weight: bold; } .swiper-tab-item{ display: inline-block; width: 33.33%; color:red; } .active{ color:aqua; border-bottom: 4rpx solid red; }
如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
相关推荐
-
微信小程序实现顶部选项卡(swiper)
微信小程序顶部选项卡在开发中是非常常用的,下面用一点时间实现了一下. 效果图: 下面直接上代码: wxml: <!--pages/index/index.wxml--> <view class="swiper-tab"> <view class="tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav"&
-
微信小程序实现顶部普通选项卡效果(非swiper)
背景:前段时间写了一个抢红包小程序,里面涉及到了顶部选项卡,把它抽了出来. 效果图: 下面直接上代码: wxml: <view class="navbar"> <text wx:for="{{navbar}}" data-index="{{index}}" class="item {{currentIndex==index?'active':''}}" bindtap="navbarTab"
-
微信小程序 tabs选项卡效果的实现
微信小程序 tabs选项卡效果 前言: 最近微信应用号是炒的如火如荼,热门满满,但是也可以发现搜索关键词出来,各类网站出现的还都是微信的官方文档解释.正好赶上这个热潮,这几天先把小程序技术文档看了个遍,就直接着手写案例了.很多组件微信内部已经封装完了,正好发现没有tab选项卡效果,这两天正好研究了下.思路如下: 1.首先点击导航的时候需要两个变量,一个存储当前点击样式类,一个是其它导航默认的样式类 2.选项卡内容列表同样也需要两个变量,一个存储当前显示块,一个存储的是其它隐藏的默认块 3.使用三
-
微信小程序开发之选项卡(窗口底部TabBar)页面切换
微信小程序开发中窗口底部tab栏切换页面很简单很方便. 代码: 1.app.json //app.json { "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": &qu
-
微信小程序 实现tabs选项卡效果实例代码
最近微信应用号是炒的如火如荼,热门满满,但是也可以发现搜索关键词出来,各类网站出现的还都是微信的官方文档解释.正好赶上这个热潮,这几天先把小程序技术文档看了个遍,就直接着手写案例了.很多组件微信内部已经封装完了,正好发现没有tab选项卡效果,这两天正好研究了下.思路如下: 1.首先点击导航的时候需要两个变量,一个存储当前点击样式类,一个是其它导航默认的样式类 2.选项卡内容列表同样也需要两个变量,一个存储当前显示块,一个存储的是其它隐藏的默认块 3.使用三目运算通过点击获取导航索引,根据索引判断
-
微信小程序实战之顶部导航栏(选项卡)(1)
本文实例为大家分享了微信小程序顶部导航栏的具体代码,供大家参考,具体内容如下 需求:顶部导航栏 效果图: wxml: <!--导航条--> <view class="navbar"> <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key=&qu
-
微信小程序 选项卡的简单实例
微信小程序 选项卡的简单实例 看下效果 代码: home.wxml <!--pages/home/home.wxml--> <view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">热门</view&g
-
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
微信小程序开发中选项卡.在Android中选项卡一般用fragment,到了小程序这里瞬间懵逼了. 总算做出来了.分享出来看看. 先看效果: 再上代码: 1.index.wxml <!--index.wxml--> <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0"
-
微信小程序之选项卡的实现方法
微信小程序之选项卡的实现方法 前言: 从事前端的同学们一定不会对选项卡陌生,不管是自己原生写的,还是各个UI框架里带的,我想大家都使用过很多选项卡,对选项卡的原理也足够清楚了,下面我们来在微信小程序里实现选项卡的功能. 微信小程序里没有自带选项卡组件,但是却带有swiper组件,所以,我们便利用swiper来实现选项卡的功能. 先看效果图: 实现代码: 页面代码: <view class="swiper-tab"> <view class="swiper-
-
微信小程序实现选项卡的方法
本文实例为大家分享了微信小程序实现选项卡的具体代码,供大家参考,具体内容如下 微信小程序里没有自带选项卡组件,但是却带有swiper组件,所以,我们便利用swiper来实现选项卡的功能. 先看效果图: test.wxml <view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0"
-
微信小程序中setInterval的使用方法
微信小程序中setInterval的使用方法 看了下小程序的画布功能,简单的使用了一下,用蹩脚的逻辑做了个 "弹啊弹,弹走鱼尾纹的小球",一起来看下吧.过程不重要主要是画布的使用哦.(本来想传gif的来着,后来发现不会传,就传个图片吧,想看的自己下载下来玩呦) 先上图,后上代码了: js: var winWidth = 0 var winHeight = 0 var diameter = 10 var time = 0 Page({ data:{ numX:1, numY:1 }, x
-
微信小程序 按钮滑动的实现方法
微信小程序 按钮滑动的实现方法 一.先看东西 滑动前 滑动后 二.再上代码 index.wxml <view class="content"> <view class="sliderContent"> <input placeholder="验证码" placeholder-class="input-placeholder" disabled="{{disabled}}" /&
-
详解微信小程序设置底部导航栏目方法
详解微信小程序设置底部导航栏目方法 小程序底部想要有一个漂亮的导航栏目,不知道怎么制作,于是百度找到了本篇文章,分享给大家. 好了 小程序的头部标题 设置好了,我们来说说底部导航栏是如何实现的. 我们先来看个效果图 这里,我们添加了三个导航图标,因为我们有三个页面,小程序最多能加5个. 那他们是怎么出现怎么着色的呢?两步就搞定! 1. 图标准备 阿里图标库 http://www.iconfont.cn/collections/show/29 我们进入该网站,鼠标滑到一个喜欢的图标上面 点击下
-
微信小程序获取手机系统信息的方法【附源码下载】
本文实例讲述了微信小程序获取手机系统信息的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml布局文件代码 <view>手机型号:{{mobileModel}}</view> <view>手机像素比:{{mobileePixelRatio}}</view> <view>窗口宽度:{{windowWidth}}</view> <view>窗口高度:{{windowHeight}}</
-
微信小程序日期时间选择器使用方法
本文实例为大家分享了精确到秒的微信小程序日期时间选择器,供大家参考,具体内容如下 效果图 实现原理 利用微信小程序的picker组件的多列选择器实现! WXML <view class="tui-picker-content"> <view class="tui-picker-name">时间选择器(选择时分)</view> <picker mode="time" value="{{time}}
-
微信小程序三级联动选择器使用方法
本文实例为大家分享了微信小程序三级联动选择器的具体代码,供大家参考,具体内容如下 效果图 实现原理 利用微信小程序的picker组件,其中: 1,普通选择器:mode = selector实现一级选择实例: 2,省市区选择器:mode = region实现省市区三级联动: 3, 多列选择器:mode = multiSelector实现二级和三级联动的10以内数字的乘法. WXML <view class="tui-picker-content"> <view clas
-
微信小程序传值以及获取值方法的详解
微信小程序传值以及获取值方法,传值有两种方法,对应也有获取值得方法, 1.设置id的方法标识跳转后传递的参数值: 2.通过使用data - xxxx 的方法来标识要传递的值 微信小程序设置id的方法标识来传值 在要跳转的item处,设置一个id并给当前的id赋值上对应的key值,比如一部电影的id(后面带着id去下一个页面查询,详细信息)如: 后我们在js的bindtap的响应事件中获取,并传递到下一个界面中: 获取到id传的值 通过e.currentTarget.id;获取设置的id值,并通过
随机推荐
- 使用准则进行条件查询
- AngularJS实现按钮提示与点击变色效果
- C语言中while与do-while的介绍与注意事项
- VirtualBox 虚拟机中安装 Ubuntu 12.04(图文教程)
- 简单实现js无缝滚动效果
- Android开发学习笔记 Gallery和GridView浅析
- Python的消息队列包SnakeMQ使用初探
- python用pickle模块实现“增删改查”的简易功能
- JSP一句话木马代码
- C#基础知识之this关键字介绍
- MySQL PXC构建一个新节点只需IST传输的方法(推荐)
- MySQL存储过程中的基本函数和触发器的相关学习教程
- js获取系统的根路径实现介绍
- js字符串转换成xml对象并使用技巧解读
- SQL Server 服务器优化技巧浅谈
- Jquery 选中表格一列并对表格排序实现原理
- 网站广告位难卖的几个原因分析与解决方法
- VC MFC非模态对话框的实现方法
- c++中拷贝构造函数的参数类型必须是引用
- .NET C#利用ZXing生成、识别二维码/条形码