小程序实现tab标签页


Posted in Javascript onNovember 16, 2020

本文实例为大家分享了小程序实现tab标签页的具体代码,供大家参考,具体内容如下

页面效果:

小程序实现tab标签页

HTML:

<view wx:if="{{userType==0}}" style="height:100%">
 <view class="tab_box" style="width: 100%">
 <view class="tabs_v">
 <block wx:for="{{tabs}}" wx:for-item="item" wx:key="index">
  <view class="tab_v {{index<1?'tab_nature':'tab_course'}}" bindtap='changeCurrentTab_' data-index='{{index}}'
  data-current='{{index}}'>
  <text class="tab_txt {{currentTab==index? 'tab_v_active' : ''}}">{{item.label}}</text>
  </view>
 </block>
 </view>
 </view>
 <!-- tab 容器 -->
 <view class="tabWrap">
 <swiper class="" current="{{currentTab}}" duration="300" bindchange="swiperTab" style="width:100%;height:100%;">
 <!-- 页面1 -->
 <block>
  <swiper-item style="width:100%;height:100%;">
  <view class="" style="width:100%;height:100%;">
  <scroll-view style="width:100%;height:100%;" scroll-y="true" bindscrolltolower='scrollToLower'
  bindscrolltoupper='scrollToUpper' lower-threshold='30' upper-threshold='30'>
  <view style="width:100%;height:auto;">
   页面1
  </view>
  </scroll-view>
  </view>
  </swiper-item>
 </block>
 <!-- 页面2 -->
 <block>
  <swiper-item style="width:100%;height:100%;">
  <view class="" style="width:100%;height:100%;">
  <scroll-view style="width:100%;height:100%;" scroll-y="true" bindscrolltolower='scrollToLower'
  bindscrolltoupper='scrollToUpper' lower-threshold='30' upper-threshold='30'>
  <view style="width:100%;height:auto;">
   页面2
  </view>
  </scroll-view>
  </view>
  </swiper-item>
 </block>
 </swiper>
 </view>
</view>

CSS:

/* tab */
.tab_box{
 height: 50px;
 display: flex;
 flex-direction: row;
 background-color: #fff;
 border-bottom: 1px solid #E5E5E5;
 margin-bottom: 15px;
}
.tabs_v{
 width: 100%;
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 align-items: center;
}
.tab_v{
 width: 50%;
 text-align: center;
}
.tab_txt{
 border-bottom: 2px solid transparent;
 padding-bottom: 14px;
 color: #999999;
}
.tab_v_active{
 border-bottom: 2px solid #00C6AC;
 color: #00C6AC;
 font-weight: bold;
}
/* 容器 */
.tabWrap{
 width: 100%;
 height: calc(100% - 67px);
 position: relative;
 border-bottom: 1px solid #e6e6e6;
}

JS:

Page({
 
 /**
 * 页面的初始数据
 */
 data: {
 tabs: [
 {label:'访客', index: 0},
 {label:'工作人员', index: 1}
 ],
 currentTab:0
 },
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 },
 
 /**
 * 生命周期函数--监听页面初次渲染完成
 */
 onReady: function () {
 
 },
 
 /**
 * 生命周期函数--监听页面显示
 */
 onShow: function () {
 
 },
 
 // tab切换
 changeCurrentTab_(e){
 let that = this
 if (that.data.currentTab === e.currentTarget.dataset.current){
 return false
 }else{
 that.setData({ 
 currentTab: e.currentTarget.dataset.current
 })
 }
 },
 //滑动切换
 swiperTab: function (e) {
 var that = this;
 that.setData({
 currentTab: e.detail.current
 });
 }
})

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

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

Javascript 相关文章推荐
关于Javascript 的 prototype问题。
Jan 03 Javascript
Javascript的一种模块模式
Mar 22 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
Jan 12 Javascript
jquery购物车实时结算特效实现思路
Sep 23 Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 Javascript
关于function类中定义变量this的简单说明
May 28 Javascript
JavaScript 数组中最大最小值
Jun 05 Javascript
JavaScript中的splice方法用法详解
Jul 20 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
Feb 15 Javascript
js中document.referrer实现移动端返回上一页
Feb 22 Javascript
vue-cli webpack2项目打包优化分享
Feb 07 Javascript
vue结合el-upload实现腾讯云视频上传功能
Jul 01 Javascript
vue+Element-ui实现登录注册表单
Nov 17 #Javascript
Vue+Element-U实现分页显示效果
Nov 15 #Javascript
vue+Element-ui前端实现分页效果
Nov 15 #Javascript
vue+Element-ui实现分页效果
Nov 15 #Javascript
vue实现抽屉弹窗效果
Nov 15 #Javascript
vue项目中js-cookie的使用存储token操作
Nov 13 #Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
Nov 13 #Javascript
You might like
php 清除网页病毒的方法
2008/12/05 PHP
php实现加减法验证码代码
2014/02/14 PHP
体育彩票排列三组选三算法分享
2014/03/07 PHP
php 实现进制相互转换
2016/04/07 PHP
PHP实现图片的等比缩放和Logo水印功能示例
2017/05/04 PHP
php 7新特性之类型申明详解
2017/06/06 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
Extjs学习笔记之八 继承和事件基础
2010/01/08 Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
2011/01/12 Javascript
Android中资源文件(非代码部分)的使用概览
2012/12/18 Javascript
TextArea设置MaxLength属性最大输入值的js代码
2012/12/21 Javascript
对frameset、frame、iframe的js操作示例代码
2013/08/16 Javascript
js数组的操作指南
2014/12/28 Javascript
JavaScript自定义数组排序方法
2015/02/12 Javascript
Bootstrap每天必学之弹出框(Popover)插件
2016/04/25 Javascript
JS与jQuery实现隔行变色的方法
2016/09/09 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
详解nodejs微信jssdk后端接口
2017/05/25 NodeJs
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
element form 校验数组每一项实例代码
2019/10/10 Javascript
跟老齐学Python之用Python计算
2014/09/12 Python
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
Python实现程序的单一实例用法分析
2015/06/03 Python
python自动发送邮件脚本
2018/06/20 Python
详解selenium + chromedriver 被反爬的解决方法
2020/10/28 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
关于HTML5语义标签的实践(blog页面)
2016/07/12 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
2017/12/07 HTML / CSS
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
英文简历中的自荐信范文
2013/12/14 职场文书
自我鉴定四大框架
2014/01/17 职场文书
社团活动总结格式
2014/08/29 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
2019暑假阅读倡议书
2019/06/24 职场文书