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


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 相关文章推荐
javascript Firefox与IE 替换节点的方法
Feb 24 Javascript
javascript客户端解决方案 缓存提供程序
Jul 14 Javascript
非常好用的JsonToString 方法 简单实例
Jul 18 Javascript
JavaScript加强之自定义callback示例
Sep 21 Javascript
用javascript读取xml文件读取节点数据
Aug 12 Javascript
JavaScript实现将UPC转换成ISBN的方法
May 26 Javascript
JavaScript中rem布局在react中的应用
Dec 09 Javascript
VC调用javascript的几种方法(推荐)
Aug 09 Javascript
angular.JS实现网页禁用调试、复制和剪切
Mar 31 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
Nov 18 Javascript
基于Vue制作组织架构树组件
Dec 06 Javascript
最后说说Vue2 SSR 的 Cookies 问题
May 25 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 ADODB使用方法集锦
2008/03/25 PHP
thinkPHP实现多字段模糊匹配查询的方法
2016/12/01 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
PHP PDOStatement::bindParam讲解
2019/01/30 PHP
PHP设计模式(六)桥连模式Bridge实例详解【结构型】
2020/05/02 PHP
javascript 面向对象 function类
2010/05/13 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
js取值中form.all和不加all的区别介绍
2014/01/20 Javascript
浅谈Javascript 数组与字典
2015/01/29 Javascript
如何利用JSHint减少JavaScript的错误
2016/08/23 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
详解Nodejs内存治理
2018/05/13 NodeJs
基于JavaScript获取base64图片大小
2019/10/18 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
2019/11/26 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
详解React路由传参方法汇总记录
2020/11/29 Javascript
python 字符串格式化代码
2013/03/17 Python
Python的内存泄漏及gc模块的使用分析
2014/07/16 Python
浅析python打包工具distutils、setuptools
2018/04/20 Python
解决python3 网络请求路径包含中文的问题
2018/05/10 Python
Python通过paramiko远程下载Linux服务器上的文件实例
2018/12/27 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
pytorch 实现删除tensor中的指定行列
2020/01/13 Python
VS2019+python3.7+opencv4.1+tensorflow1.13配置详解
2020/04/16 Python
PIP和conda 更换国内安装源的方法步骤
2020/09/21 Python
sublime3之内网安装python插件Anaconda的流程
2020/11/10 Python
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
女儿十岁生日答谢词
2014/01/27 职场文书
机电一体化求职信
2014/03/10 职场文书
保险公司早会主持词
2014/03/22 职场文书
小学运动会班级口号
2014/06/09 职场文书
2014年项目经理工作总结
2014/11/24 职场文书
警告通知
2015/04/25 职场文书
2016年小学党支部创先争优活动总结
2016/04/05 职场文书
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL