小程序模板网

微信小程序开发之『顶部导航』特效

作者:ruicoding,来自原文地址 
之前Android开发时,顶部导航用到viewPage,微信小程序里想要达到同样的效果,可用swiper来实现;

先看效果图

上代码: 
1.swiperTab.js

 

  1. Page({
  2. data: {
  3. // tab切换
  4. currentTab: 0,
  5. },
  6. swichNav: function (e) {
  7. console.log(e);
  8. var that = this;
  9. if (this.data.currentTab === e.target.dataset.current) {
  10. return false;
  11. } else {
  12. that.setData({
  13. currentTab: e.target.dataset.current,
  14. })
  15. }
  16. },
  17. swiperChange: function (e) {
  18. console.log(e);
  19. this.setData({
  20. currentTab: e.detail.current,
  21. })
  22.  
  23. },
  24. onLoad: function (options) {
  25. // 生命周期函数--监听页面加载
  26. },
  27. onReady: function () {
  28. // 生命周期函数--监听页面初次渲染完成
  29. },
  30. onShow: function () {
  31. // 生命周期函数--监听页面显示
  32. },
  33. onHide: function () {
  34. // 生命周期函数--监听页面隐藏
  35. },
  36. onUnload: function () {
  37. // 生命周期函数--监听页面卸载
  38. },
  39. onPullDownRefresh: function () {
  40. // 页面相关事件处理函数--监听用户下拉动作
  41. },
  42. onReachBottom: function () {
  43. // 页面上拉触底事件的处理函数
  44. },
  45. onShareAppMessage: function () {
  46. // 用户点击右上角分享
  47. return {
  48. title: 'title', // 分享标题
  49. desc: 'desc', // 分享描述
  50. path: 'path' // 分享路径
  51. }
  52. }
  53. })

2.swiperTab.wxml

 

  1. <view class="page">
  2.  
  3. <!--顶部导航栏-->
  4. <view class="swiper-tab">
  5. <view class="tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">Tab1</view>
  6. <view class="tab-item {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">Tab2</view>
  7. <view class="tab-item {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">Tab3</view>
  8. </view>
  9.  
  10. <!--内容主体-->
  11. <swiper class="swiper" current="{{currentTab}}" duration="200" bindchange="swiperChange">
  12. <swiper-item>
  13. <view>我是tab1</view>
  14. </swiper-item>
  15. <swiper-item>
  16. <view>我是tab2</view>
  17. </swiper-item>
  18. <swiper-item>
  19. <view>我是tab3</view>
  20. </swiper-item>
  21. </swiper>
  22. </view>

3.swiperTab.wxss

 

  1. .page {
  2. margin-left: 10rpx;
  3. margin-right: 10rpx;
  4. }
  5.  
  6. .swiper-tab {
  7. display: flex;
  8. flex-direction: row;
  9. line-height: 80rpx;
  10. border-bottom: 2rpx solid #777;
  11. }
  12.  
  13. .tab-item {
  14. width: 33.3%;
  15. text-align: center;
  16. font-size: 15px;
  17. color: #777;
  18. }
  19.  
  20. .swiper {
  21. height: 1100px;
  22. background: #dfdfdf;
  23. }
  24.  
  25. .on {
  26. color: blue;
  27. border-bottom: 5rpx solid blue;
  28. }


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23399.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询