小程序实现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 相关文章推荐
最佳的addEvent事件绑定是怎样诞生的
Oct 24 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
Sep 26 Javascript
node.js中的fs.createReadStream方法使用说明
Dec 17 Javascript
下雪了 javascript实现雪花飞舞
Aug 02 Javascript
jQuery设计思想
Mar 07 Javascript
JavaScript登录记住密码操作(超简单代码)
Mar 22 Javascript
angular4模块中给标签添加背景图的实现方法
Sep 15 Javascript
vue+element+Java实现批量删除功能
Apr 08 Javascript
解决vue v-for src 图片路径问题 404
Nov 12 Javascript
jQuery实现轮播图效果demo
Jan 11 jQuery
JavaScript 链表定义与使用方法示例
Apr 28 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
Nov 16 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
咖啡知识大全
2021/03/03 新手入门
UCenter 批量添加用户的php代码
2012/07/17 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
Laravle eloquent 多对多模型关联实例详解
2017/11/22 PHP
js实现全屏漂浮广告移入光标停止移动
2013/12/02 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
2014/10/31 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
详解基于angular-cli配置代理解决跨域请求问题
2017/07/05 Javascript
Nuxt.js实战详解
2018/01/18 Javascript
浅谈React 服务器端渲染的使用
2018/05/08 Javascript
Vue.js 事件修饰符的使用教程
2018/11/01 Javascript
Vue通过配置WebSocket并实现群聊功能
2019/12/31 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
Python中的面向对象编程详解(上)
2015/04/13 Python
深入解答关于Python的11道基本面试题
2017/04/01 Python
Python 获取当前所在目录的方法详解
2017/08/02 Python
pymongo中group by的操作方法教程
2019/03/22 Python
python利用itertools生成密码字典并多线程撞库破解rar密码
2019/08/12 Python
Python类中方法getitem和getattr详解
2019/08/30 Python
python实现宿舍管理系统
2019/11/22 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
Python要求O(n)复杂度求无序列表中第K的大元素实例
2020/04/02 Python
tensorflow图像裁剪进行数据增强操作
2020/06/30 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
应届生财务管理求职信
2013/11/06 职场文书
求职信怎么写
2014/05/23 职场文书
县委党的群众路线教育实践活动工作情况报告
2014/10/25 职场文书
2014年车间主任工作总结
2014/12/10 职场文书
银行求职自荐信范文
2015/03/04 职场文书
2015年乡镇卫生院工作总结
2015/04/22 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书
不要在HTML中滥用div
2021/05/08 HTML / CSS