微信小程序实现滴滴导航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 相关文章推荐
解决js图片加载时出现404的问题
Nov 30 Javascript
JavaScript实现多种排序算法
Feb 24 Javascript
JavaScipt选取文档元素的方法(推荐)
Aug 05 Javascript
前端面试知识点锦集(JavaScript篇)
Dec 28 Javascript
JS中的phototype详解
Feb 04 Javascript
详解AngularJS之$window窗口对象
Jan 17 Javascript
Vue2 模板template的四种写法总结
Feb 23 Javascript
vue2.0获取鼠标位置的方法
Sep 13 Javascript
移动端(微信等使用vConsole调试console的方法
Mar 05 Javascript
浅析JavaScript预编译和暗示全局变量
Sep 03 Javascript
ant design vue datepicker日期选择器中文化操作
Oct 28 Javascript
详解javascript脚本何时会被执行
Feb 05 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
虹吸式咖啡壶操作
2021/03/03 冲泡冲煮
一个PHP缓存类代码(附详细说明)
2011/06/09 PHP
php+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
JS获取IUSR_机器名和IWAM_机器名帐号的密码
2006/12/06 Javascript
JavaScript获取GridView选择的行内容
2009/04/14 Javascript
JavaScript 学习初步 入门教程
2010/03/25 Javascript
Jquery 最近浏览过的商品的功能实现代码
2010/05/14 Javascript
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
2012/12/30 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
Js制作点击输入框时默认文字消失的效果
2015/09/05 Javascript
Nodejs的express使用教程
2015/11/23 NodeJs
JS动态增删表格行的方法
2016/03/03 Javascript
Node.js的npm包管理器基础使用教程
2016/05/26 Javascript
使用Node.js给图片加水印的方法
2016/11/15 Javascript
jQuery基于排序功能实现上移、下移的方法
2016/11/26 Javascript
Angular2生命周期钩子函数的详细介绍
2017/07/10 Javascript
web前端vue之vuex单独一文件使用方式实例详解
2018/01/11 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
vue给对象动态添加属性和值的实例
2019/09/09 Javascript
编写多线程Python服务器 最适合基础
2018/09/14 Python
Python matplotlib实时画图案例
2020/04/23 Python
Python连接Impala实现步骤解析
2020/08/04 Python
Django路由层URLconf作用及原理解析
2020/09/24 Python
Django中template for如何使用方法
2021/01/31 Python
英国在线珠宝店:The Jewel Hut
2017/03/20 全球购物
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
阳光体育活动方案
2014/02/16 职场文书
伊索寓言教学反思
2014/05/01 职场文书
活动总结模板
2014/05/09 职场文书
四风对照检查材料范文
2014/09/27 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书
2016年机关单位节能宣传周活动总结
2016/04/05 职场文书
goland 恢复已更改文件的操作
2021/04/28 Golang