微信小程序实现滴滴导航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 DOM 添加事件
Feb 14 Javascript
点击标签切换和自动切换DIV选项卡
Aug 10 Javascript
jquery彩色投票进度条简单实例演示
Jul 23 Javascript
基于jquery插件编写countdown计时器
Jun 12 Javascript
js倒计时简单实现代码
Aug 11 Javascript
TableSort.js表格排序插件使用方法详解
Feb 10 Javascript
JSONP跨域请求
Mar 02 Javascript
Linux CentOS系统下安装node.js与express的方法
Apr 01 Javascript
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 Javascript
探索webpack模块及webpack3新特性
Sep 18 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
May 28 Javascript
JavaScript实现英语单词题库
Dec 24 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
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
jquery 表单进行客户端验证demo
2009/08/24 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
2013/04/17 Javascript
网页前端优化之滚动延时加载图片示例
2013/07/13 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
2014/01/23 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
js中document.write使用过程中的一点疑问解答
2014/03/20 Javascript
浅谈Javascript数组的使用
2015/07/29 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
Highcharts+NodeJS搭建数据可视化平台示例
2017/01/01 NodeJs
webpack2.0配置postcss-loader的方法
2017/08/17 Javascript
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
javascript+html5+css3自定义弹出窗口效果
2017/10/26 Javascript
vue生成token并保存到本地存储中
2018/07/17 Javascript
微信小程序实现留言板(Storage)
2018/11/02 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
微信小程序上传文件到阿里OSS教程
2019/05/20 Javascript
详解Vue 的异常处理机制
2020/11/30 Vue.js
python使用sqlite3时游标使用方法
2018/03/13 Python
python 获取微信好友列表的方法(微信web)
2019/02/21 Python
python+tifffile之tiff文件读写方式
2020/01/13 Python
python计算二维矩形IOU实例
2020/01/18 Python
Python tornado上传文件的功能
2020/03/26 Python
Python调用.net动态库实现过程解析
2020/06/05 Python
python 如何将office文件转换为PDF
2020/09/22 Python
Linux文件操作命令都有哪些
2015/02/27 面试题
员工自我鉴定范文
2013/10/06 职场文书
cf收人广告词大全
2014/03/14 职场文书
报考公务员诚信承诺书
2014/08/29 职场文书
2014年社区工会工作总结
2014/12/18 职场文书
大学生实习推荐信
2015/03/27 职场文书
Pandas 稀疏数据结构的实现
2021/07/25 Python
能用CSS实现的就不要麻烦JavaScript了
2021/10/05 HTML / CSS
Win11如何修改dns?Win11修改dns图文教程
2022/01/18 数码科技
Win11应用商店打开闪退怎么解决? win11应用商店打不开的多种解决办法
2022/04/05 数码科技