微信小程序实现滴滴导航tab切换效果


Posted in Javascript onJuly 24, 2018

本文实例为大家分享了微信小程序实现tab切换效果的具体代码,供大家参考,具体内容如下

效果图如下: (请自动忽视底部tab.....)

 微信小程序实现滴滴导航tab切换效果

简单介绍一下:顶部导航使用 scroll-view 组件 中间的内容部分使用 swiper 组件

实现的逻辑就是: 先这样在这样,这样然后那样。(此处省略200个字)。

代码如下,复制可用

wxml

<view class="contain">
 <!-- 导航栏 -->
 <scroll-view class="tab" scroll-x scroll-left="{{tabScroll}}" scroll-with-animation="true">
 <block wx:for="{{menuList}}" wx:key="index">
  <view class="tab-item {{currentTab == index ? 'active' : ''}}" data-current="{{index}}" bindtap='clickMenu'>{{item.name}}</view>
 </block>
 </scroll-view>
 <!-- 页面 -->
 <swiper class="content" style='height: {{height}}px' duration="1000" current="{{currentTab}}" bindchange="changeContent">
 <swiper-item class="content-item" wx:for="{{menuList}}" wx:key="index">这里是{{item.name}}</swiper-item>
 </swiper>
</view>

js

Page({
 data: {
 menuList: [{
  name: "快车"
 }, {
  name: "顺风车"
 }, {
  name: "外卖"
 }, {
  name: "单车"
 }, {
  name: "礼橙专车"
 }, {
  name: "出租车"
 }, {
  name: "公交"
 }, {
  name: "代驾"
 }, {
  name: "豪华车"
 }, {
  name: "自驾租车"
 }, {
  name: "拼车"
 }, {
  name: "二手车"
 }],
 tabScroll: 0,
 currentTab: 0,
 windowHeight: '',
 windowWidth: ''
 },
 onLoad: function() { 
 wx.getSystemInfo({  // 获取当前设备的宽高,文档有
  success: (res) => { 
  this.setData({
   windowHeight: res.windowHeight,
   windowWidth: res.windowWidth
  })
  },
 })
 },
 onReady: function() {
 wx.setNavigationBarTitle({ //修改标题文字
  title: ''
 })
 },
 clickMenu: function(e) {
 var current = e.currentTarget.dataset.current //获取当前tab的index
 var tabWidth = this.data.windowWidth / 5 // 导航tab共5个,获取一个的宽度
 this.setData({
  tabScroll: (current - 2) * tabWidth //使点击的tab始终在居中位置
 }) 
 if (this.data.currentTab == current) {
  return false
 } else {
  this.setData({currentTab: current })
 }
 },
 changeContent: function(e) {
 var current = e.detail.current // 获取当前内容所在index,文档有
 var tabWidth = this.data.windowWidth / 5 
 this.setData({
  currentTab: current,
  tabScroll: (current - 2) * tabWidth
 })
 }
})

css 

.contain{
 width: 100%;
 height: 100%;
}
.tab{
 width: 100%;
 height: 100rpx;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 100;
 white-space: nowrap;
 box-sizing: border-box;
 overflow: hidden;
 line-height: 100rpx;
 
}
.tab-item{
 display: inline-block;
 width: 20%;
 text-align: center;
 font-size: 14px;
 color: #8f9193;
}
.active{
 color: #ff502c
}
.content{
 padding-top: 100rpx;
 box-sizing: border-box;
 text-align: center;
 font-size: 14px;
}
.content-item{
 overflow-y: scroll
}

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

Javascript 相关文章推荐
$.ajax返回的JSON无法执行success的解决方法
Sep 09 Javascript
基于jQuery.Validate验证库知识点的详解
Apr 26 Javascript
提升PHP安全:8个必须修改的PHP默认配置
Nov 17 Javascript
JavaScript运算符小结
Jun 03 Javascript
Bootstrap实现默认导航栏效果
Sep 21 Javascript
Ionic 2 实现列表滑动删除按钮的方法
Jan 22 Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 Javascript
jQuery异步提交表单实例
May 30 jQuery
Vue2.0 实现单选互斥的方法
Apr 13 Javascript
React 使用recharts实现散点地图的示例代码
Dec 07 Javascript
微信浏览器左上角返回按钮监听的实现
Mar 04 Javascript
js实现飞机大战游戏
Aug 26 Javascript
JavaScript引用类型Array实例分析
Jul 24 #Javascript
详解微信小程序调起键盘性能优化
Jul 24 #Javascript
原生JavaScript实现remove()和recover()功能示例
Jul 24 #Javascript
js+canvas实现验证码功能
Sep 21 #Javascript
微信小程序网络请求封装示例
Jul 24 #Javascript
js实现敏感词过滤算法及实现逻辑
Jul 24 #Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 #jQuery
You might like
php中使用cookie来保存用户登录信息的实现代码
2012/03/08 PHP
PHP的PSR规范中文版
2013/09/28 PHP
php使用百度ping服务代码实例
2014/06/19 PHP
php简单实现发送带附件的邮件
2015/06/10 PHP
Javascript 倒计时源代码.(时.分.秒) 详细注释版
2011/05/09 Javascript
JS焦点图切换,上下翻转
2011/05/12 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
2013/01/04 Javascript
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
JS判断不能为空实例代码
2013/11/26 Javascript
点击显示指定元素隐藏其他同辈元素的方法
2014/02/19 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
IE6浏览器中window.location.href无效的解决方法
2014/11/20 Javascript
angularjs指令中的compile与link函数详解
2014/12/06 Javascript
AngularJS入门教程之AngularJS表达式
2016/04/18 Javascript
有关jQuery中parent()和siblings()的小问题
2016/06/01 Javascript
jquery实现表单获取短信验证码代码
2017/03/13 Javascript
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
关于layui toolbar和template的结合使用方法
2019/09/19 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
2020/02/05 Javascript
Vue-cli3多页面配置详解
2020/03/22 Javascript
Google开源的Python格式化工具YAPF的安装和使用教程
2016/05/31 Python
Python 正则表达式 re.match/re.search/re.sub的使用解析
2019/07/22 Python
tensorflow -gpu安装方法(不用自己装cuda,cdnn)
2020/01/20 Python
世界领先的以旅馆为主的在线预订平台:Hostelworld
2016/10/09 全球购物
Johnson Fitness澳大利亚:高级健身器材
2021/03/16 全球购物
十八大感想感言
2014/02/10 职场文书
财务学生的职业生涯发展
2014/02/11 职场文书
军训考核自我鉴定
2014/02/13 职场文书
安全生产年活动总结
2014/08/29 职场文书
团员个人年度总结
2015/02/26 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL
vue实现登陆页面开发实践
2022/05/30 Vue.js