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


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 相关文章推荐
dropdownlist之间的互相联动实现(显示与隐藏)
Nov 24 Javascript
JavaScript Cookie 直接浏览网站分网址
Dec 08 Javascript
多种方法实现JS动态添加事件
Nov 01 Javascript
jQuery Form 页面表单提交的小例子
Nov 15 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
Oct 08 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
Jun 24 Javascript
详解AngularJs中$resource和restfu服务端数据交互
Sep 21 Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 Javascript
详解JS异步加载的三种方式
Mar 07 Javascript
Vue vm.$attrs使用场景详解
Mar 08 Javascript
javascript运行机制之执行顺序理解
Aug 03 Javascript
vue用elementui写form表单时,在label里添加空格操作
Aug 13 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
在windows iis5下安装php4.0+mysql之我见
2006/10/09 PHP
php获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
PHP快速生成各种信息提示框的方法
2016/02/03 PHP
IE6图片加载的一个BUG解决方法
2010/07/13 Javascript
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
2011/06/28 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
js opener的使用详解
2014/01/11 Javascript
使用jquery解析XML的方法
2014/09/05 Javascript
html的DOM中document对象images集合用法实例
2015/01/21 Javascript
分享一些常用的jQuery动画事件和动画函数
2015/11/27 Javascript
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
理解Javascript图片预加载
2016/02/23 Javascript
全面了解JavaScript对象进阶
2016/07/19 Javascript
React实现双向绑定示例代码
2016/09/19 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
jQuery Validate 数组 全部验证问题
2017/01/12 Javascript
原生JavaScript实现AJAX、JSONP
2017/02/07 Javascript
js+canvas实现动态吃豆人效果
2017/03/22 Javascript
jquery请求servlet实现ajax异步请求的示例
2017/06/03 jQuery
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
详解React中的组件通信问题
2017/07/31 Javascript
express框架下使用session的方法
2019/07/31 Javascript
JavaScript实现随机五位数验证码
2019/09/27 Javascript
微信小程序如何实现radio单选框单击打勾和取消
2020/01/21 Javascript
[44:15]国士无双DOTA2 6.82版本详解(上)
2014/09/28 DOTA
Python操作Access数据库基本步骤分析
2016/09/19 Python
pandas修改DataFrame列名的方法
2018/04/08 Python
python利用插值法对折线进行平滑曲线处理
2018/12/25 Python
Python Request类源码实现方法及原理解析
2020/08/17 Python
俄罗斯童装网上商店:BebaKids
2020/06/06 全球购物
应届毕业生专业个人求职自荐信格式
2013/11/20 职场文书
十岁生日家长答谢词
2014/01/17 职场文书
医院护士见习期自我鉴定
2014/09/15 职场文书
《狼王梦》读后感:可怜天下父母心
2019/11/01 职场文书
python scipy 稀疏矩阵的使用说明
2021/05/26 Python