微信小程序实现滴滴导航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 相关文章推荐
javaScript 动态访问JSon元素示例代码
Aug 30 Javascript
jquery遍历数组与筛选数组的方法
Nov 05 Javascript
深入解析JavaScript的闭包机制
Oct 20 Javascript
JavaScript字符串删除重复字符的方法
Dec 25 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
May 16 Javascript
JavaScript简单实现弹出拖拽窗口(二)
Jun 17 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
Jun 17 Javascript
JavaScript中获取时间的函数集
Aug 16 Javascript
基于Swiper实现移动端页面图片轮播效果
Dec 28 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
vue webpack重写cookie路径的方法
Jul 10 Javascript
JS开发 富文本编辑器TinyMCE详解
Jul 19 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 mssql 数据库分页SQL语句
2008/12/16 PHP
PHP 第三节 变量介绍
2012/04/28 PHP
解析smarty模板中类似for的功能实现
2013/06/18 PHP
php_screw安装使用教程(另一个PHP代码加密实现)
2014/05/29 PHP
php三种实现多线程类似的方法
2015/10/30 PHP
php  单例模式详细介绍及实现源码
2016/11/05 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
Yii框架引入coreseek分页功能示例
2019/02/08 PHP
JS 实现完美include载入实现代码
2010/08/05 Javascript
解决jquery的.animate()函数在IE6下的问题
2010/12/03 Javascript
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
2017/01/14 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
2017/04/28 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
2017/06/11 Javascript
基于es6三点运算符的使用方法(实例讲解)
2017/10/12 Javascript
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
vue实现日历表格(element-ui)
2020/09/24 Javascript
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
Python urlopen()函数 示例分享
2014/06/12 Python
python实现清屏的方法
2015/04/30 Python
CentOS 7下安装Python3.6 及遇到的问题小结
2018/11/08 Python
python使用建议与技巧分享(一)
2020/08/17 Python
Python之字符串的遍历的4种方式
2020/12/08 Python
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
毕业生医学检验求职信
2013/10/16 职场文书
公司庆典邀请函范文
2014/01/13 职场文书
大一学生的职业生涯规划书范文
2014/01/19 职场文书
2014年旅游局法制宣传日活动总结
2014/11/01 职场文书
经费申请报告范文
2015/05/18 职场文书
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js
Sql Server之数据类型详解
2022/02/28 SQL Server
python获取带有返回值的多线程
2022/05/02 Python
python manim实现排序算法动画示例
2022/08/14 Python