微信小程序实现滴滴导航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 相关文章推荐
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
Jan 16 Javascript
谈谈JavaScript中的函数与闭包
Apr 14 Javascript
JavaScript中的Number数字类型学习笔记
May 26 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
Sep 05 Javascript
jQuery实现移动端手机商城购物车功能
Sep 24 Javascript
详解Vue.js搭建路由报错 router.map is not a function
Jun 27 Javascript
Node.js学习之查询字符串解析querystring详解
Sep 28 Javascript
vue基于两个计算属性实现选中和全选功能示例
Feb 08 Javascript
vue生命周期与钩子函数简单示例
Mar 13 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
Apr 10 Javascript
jQuery实现朋友圈查看图片
Sep 11 jQuery
在vue中使用vant TreeSelect分类选择组件操作
Nov 02 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利用curl抓取新浪微博内容示例
2014/04/27 PHP
php实例分享之通过递归实现删除目录下的所有文件详解
2014/05/15 PHP
PHP实现的简单在线计算器功能示例
2017/08/02 PHP
php实现映射操作实例详解
2019/10/02 PHP
基于php伪静态的实现方法解析
2020/07/31 PHP
web 页面分页打印的实现
2009/06/22 Javascript
JavaScript中的排序算法代码
2011/02/22 Javascript
jQuery hover 延时器实现代码
2011/03/12 Javascript
密码框显示提示文字jquery示例
2013/08/29 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
2013/12/04 Javascript
Bootstrap实现默认导航栏效果
2020/09/21 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
AngularJS实现动态编译添加到dom中的方法
2016/11/04 Javascript
AngularJS读取JSON及XML文件的方法示例
2017/05/25 Javascript
jQuery 实现倒计时天,时,分,秒功能
2018/07/31 jQuery
JavaScript变量提升和严格模式实例分析
2019/01/27 Javascript
javascript中undefined的本质解析
2019/07/31 Javascript
[48:21]Mski vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python实现图片滑动式验证识别方法
2017/11/09 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
Python实现PS滤镜中马赛克效果示例
2018/01/20 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
python基于递归解决背包问题详解
2019/07/03 Python
pytorch nn.Conv2d()中的padding以及输出大小方式
2020/01/10 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
为你的html5网页添加音效示例
2014/04/03 HTML / CSS
瑞贝卡·明可弗包包官网:Rebecca Minkoff
2016/07/21 全球购物
全球酒店比价网:HotelsCombined
2017/06/20 全球购物
应届毕业生个人自荐信范文
2013/11/30 职场文书
运动会宣传口号
2014/06/09 职场文书
流动人口婚育证明
2014/10/19 职场文书
副总经理岗位职责
2015/02/02 职场文书
保送生自荐信
2015/03/06 职场文书
2015年销售内勤工作总结
2015/04/27 职场文书
【海涛教你打DOTA】虚空假面第一视角骨弓3房29杀
2022/04/01 DOTA
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python