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


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 相关文章推荐
jquery 实现的全选和反选
Apr 15 Javascript
jQuery 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
Jquery 动态循环输出表格具体方法
Nov 23 Javascript
jquery选择器大全 全面详解jquery选择器
Mar 06 Javascript
jQuery中:first-child选择器用法实例
Dec 31 Javascript
jQuery实现的简单提示信息插件
Dec 08 Javascript
浅谈jQuery效果函数
Sep 16 Javascript
json定义及jquery操作json的方法
Oct 03 Javascript
详解使用Node.js 将txt文件转为Excel文件
Jul 05 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
Aug 19 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
Aug 12 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
Nov 07 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
PHILIPS D1835/D1875的电路分析与打理
2021/03/02 无线电
深入php var_dump()函数的详解
2013/06/05 PHP
CI框架的安全性分析
2016/05/18 PHP
PHP中类的继承和用法实例分析
2016/05/24 PHP
PHP并发查询MySQL的实例代码
2017/08/09 PHP
PHP实现将base64编码字符串转换成图片示例
2018/06/22 PHP
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
一些常用的JS功能函数(2009-06-04更新)
2009/06/04 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
2013/08/12 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
2014/01/11 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
javascript中callee与caller的区别分析
2015/04/20 Javascript
基于JavaScript代码实现微信扫一扫下载APP
2015/12/30 Javascript
AngularJS学习笔记之依赖注入详解
2016/05/16 Javascript
Three.js基础部分学习
2017/01/08 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
详解Vue.js v-for不支持IE9的解决方法
2018/12/29 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
[49:08]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.27
2020/12/01 DOTA
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
基于循环神经网络(RNN)实现影评情感分类
2018/03/26 Python
python多个模块py文件的数据共享实例
2019/01/11 Python
pip install 使用国内镜像的方法示例
2020/04/03 Python
Python pip使用超时问题解决方案
2020/08/03 Python
python 如何引入协程和原理分析
2020/11/30 Python
CSS3 calc()会计算属性详解
2018/02/27 HTML / CSS
String是最基本的数据类型吗?
2013/06/13 面试题
优秀学生干部先进事迹材料
2014/05/26 职场文书
2015年小学英语教师工作总结
2015/05/12 职场文书
退休教师欢送会致辞
2015/07/31 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书
给原生html中添加水印遮罩层的实现示例
2021/04/02 Javascript
解读Vue组件注册方式
2021/05/15 Vue.js