微信小程序实现顶部导航特效


Posted in Javascript onJanuary 28, 2019

本文实例为大家分享了微信小程序实现顶部导航的具体代码,供大家参考,具体内容如下

之前Android开发时,顶部导航用到viewPage,微信小程序里想要达到同样的效果,可用swiper来实现,先看效果图

微信小程序实现顶部导航特效

上代码:

1.swiperTab.js

Page({
  data: {
    // tab切换 
    currentTab: 0,
  },
  swichNav: function (e) {
    console.log(e);
    var that = this;
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current,
      })
    }
  },
  swiperChange: function (e) {
    console.log(e);
    this.setData({
      currentTab: e.detail.current,
    })
 
  },
  onLoad: function (options) {
    // 生命周期函数--监听页面加载
  },
  onReady: function () {
    // 生命周期函数--监听页面初次渲染完成
  },
  onShow: function () {
    // 生命周期函数--监听页面显示
  },
  onHide: function () {
    // 生命周期函数--监听页面隐藏
  },
  onUnload: function () {
    // 生命周期函数--监听页面卸载
  },
  onPullDownRefresh: function () {
    // 页面相关事件处理函数--监听用户下拉动作
  },
  onReachBottom: function () {
    // 页面上拉触底事件的处理函数
  },
  onShareAppMessage: function () {
    // 用户点击右上角分享
    return {
      title: 'title', // 分享标题
      desc: 'desc', // 分享描述
      path: 'path' // 分享路径
    }
  }
})

2.swiperTab.wxml

<view class="page">
 
 <!--顶部导航栏-->
 <view class="swiper-tab">
  <view class="tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">Tab1</view>
  <view class="tab-item {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">Tab2</view>
  <view class="tab-item {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">Tab3</view>
 </view>
 
 <!--内容主体-->
 <swiper class="swiper" current="{{currentTab}}" duration="200" bindchange="swiperChange">
  <swiper-item>
   <view>我是tab1</view>
  </swiper-item>
  <swiper-item>
   <view>我是tab2</view>
  </swiper-item>
  <swiper-item>
   <view>我是tab3</view>
  </swiper-item>
 </swiper>
</view>

3.swiperTab.wxss

.page {
 margin-left: 10rpx;
 margin-right: 10rpx;
}
 
.swiper-tab {
 display: flex;
 flex-direction: row;
 line-height: 80rpx;
 border-bottom: 2rpx solid #777;
}
 
.tab-item {
 width: 33.3%;
 text-align: center;
 font-size: 15px;
 color: #777;
}
 
.swiper {
 height: 1100px;
 background: #dfdfdf;
}
 
.on {
 color: blue;
 border-bottom: 5rpx solid blue;
}

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

Javascript 相关文章推荐
js 通用订单代码
Dec 23 Javascript
php利用curl获取远程图片实现方法
Oct 26 Javascript
AngularJS向后端ASP.NET API控制器上传文件
Feb 03 Javascript
JS封装的自动创建表格的实现代码
Jun 15 Javascript
原生js实现class的添加和删除简单代码
Jul 12 Javascript
简单谈谈Javascript函数中的arguments
Feb 09 Javascript
vue无限轮播插件代码实例
May 10 Javascript
vue cli3.0 引入eslint 结合vscode使用
May 27 Javascript
JS实现在线ps功能详解
Jul 31 Javascript
微信小程序 高德地图路线规划实现过程详解
Aug 05 Javascript
Vue中多元素过渡特效的解决方案
Feb 05 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
Feb 27 Javascript
详解几十行代码实现一个vue的状态管理
Jan 28 #Javascript
vue.js仿hover效果的实现方法示例
Jan 28 #Javascript
vue-for循环嵌套操作示例
Jan 28 #Javascript
使用pm2自动化部署node项目的方法步骤
Jan 28 #Javascript
jQuery访问json文件中数据的方法示例
Jan 28 #jQuery
JS实现的点击按钮图片上下滚动效果示例
Jan 28 #Javascript
vue-cli3 项目从搭建优化到docker部署的方法
Jan 28 #Javascript
You might like
php/js获取客户端mac地址的实现代码
2013/07/08 PHP
codeigniter教程之上传视频并使用ffmpeg转flv示例
2014/02/13 PHP
php中将一段数据存到一个txt文件中并显示其内容
2014/08/15 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
一个不错的应用,用于提交获取文章内容,不推荐用
2007/03/03 Javascript
JS的递增/递减运算符和带操作的赋值运算符的等价式
2007/12/08 Javascript
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
Zero Clipboard js+swf实现的复制功能使用方法
2010/03/07 Javascript
js原型链原理看图说明
2012/07/07 Javascript
用JavaScript修改CSS属性的代码
2013/05/06 Javascript
node.js实现逐行读取文件内容的代码
2014/06/27 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
2014/12/13 Javascript
jQuery实现友好的轮播图片特效
2015/01/12 Javascript
基于JavaScript实现简单的随机抽奖小程序
2016/01/05 Javascript
浅谈jquery点击label触发2次的问题
2016/06/12 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
遍历json获得数据的几种方法小结
2017/01/21 Javascript
原生js简单实现放大镜特效
2017/05/16 Javascript
基于webpack4+vue-cli3项目实现换肤功能
2019/07/17 Javascript
layui的面包屑或者表单不显示的解决方法
2019/09/05 Javascript
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
Python实现的快速排序算法详解
2017/08/01 Python
python中sklearn的pipeline模块实例详解
2020/05/21 Python
浅谈keras保存模型中的save()和save_weights()区别
2020/05/21 Python
澳大利亚最好的在线时尚精品店:Princess Polly
2018/01/03 全球购物
大专应届生个人简历的自我评价
2013/10/15 职场文书
应届生个人求职信模板
2013/11/26 职场文书
自我评价个人范文
2013/12/16 职场文书
宗教学大学生职业生涯规划范文
2014/02/08 职场文书
分家协议书
2014/04/21 职场文书
授权收款委托书范本
2014/10/10 职场文书
保安2014年终工作总结
2014/12/06 职场文书
领导欢迎词范文
2015/01/26 职场文书
酒店财务部岗位职责
2015/04/14 职场文书
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python
详细介绍Java中的CyclicBarrier
2022/04/13 Java/Android