用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

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

纸飞机 2018-3-8 09:37

作者:ruicoding,来自原文地址 之前Android开发时,顶部导航用到viewPage,微信里想要达到同样的效果,可用swiper来实现;先看效果图上代码: 1.swiperTab.jsPage({ data: { // tab切换 cu ...

作者: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. onLoad: function (options) {
  24. // 生命周期函数--监听页面加载
  25. },
  26. onReady: function () {
  27. // 生命周期函数--监听页面初次渲染完成
  28. },
  29. onShow: function () {
  30. // 生命周期函数--监听页面显示
  31. },
  32. onHide: function () {
  33. // 生命周期函数--监听页面隐藏
  34. },
  35. onUnload: function () {
  36. // 生命周期函数--监听页面卸载
  37. },
  38. onPullDownRefresh: function () {
  39. // 页面相关事件处理函数--监听用户下拉动作
  40. },
  41. onReachBottom: function () {
  42. // 页面上拉触底事件的处理函数
  43. },
  44. onShareAppMessage: function () {
  45. // 用户点击右上角分享
  46. return {
  47. title: 'title', // 分享标题
  48. desc: 'desc', // 分享描述
  49. path: 'path' // 分享路径
  50. }
  51. }
  52. })

2.swiperTab.wxml

  1. class="page">
  2. class="swiper-tab">
  3. class="tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">Tab1
  4. class="tab-item {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">Tab2
  5. class="tab-item {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">Tab3
  6. class="swiper" current="{{currentTab}}" duration="200" bindchange="swiperChange">
  7. 我是tab1
  8. 我是tab2
  9. 我是tab3

3.swiperTab.wxss

  1. .page {
  2. margin-left: 10rpx;
  3. margin-right: 10rpx;
  4. }
  5. .swiper-tab {
  6. display: flex;
  7. flex-direction: row;
  8. line-height: 80rpx;
  9. border-bottom: 2rpx solid #777;
  10. }
  11. .tab-item {
  12. width: 33.3%;
  13. text-align: center;
  14. font-size: 15px;
  15. color: #777;
  16. }
  17. .swiper {
  18. height: 1100px;
  19. background: #dfdfdf;
  20. }
  21. .on {
  22. color: blue;
  23. border-bottom: 5rpx solid blue;
  24. }
鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏