微信小程序实现自定义顶部导航栏(选项卡),固定导航栏和可滑动导航栏

微信小程序实现自定义顶部导航栏(选项卡),固定导航栏和可滑动导航栏


顶部导航栏的需求实现:

  • 顶部导航栏由列表渲染,通过tabclick点击事件改变activeIndex变量的当前值,从而控制weui-navbar-item的切换。

  • wxml获取activeIndex的当前值,通过view组件的hidden="{{activeIndex!=x}}"属性选择性隐藏其余activeIndex下的页面,只显示当前activeIndex下的页面,当然也可以适当修改wxml灵活选择不同的页面显示或隐藏。

固定导航栏和可滑动导航栏区别在于:

  • 效果上:可滑动导航栏承载的页面数量远超过固定导航栏,不仅可以滑动导航栏,而且点击边缘处的native-item时会自动使native-item处于页面中;

  • 原理上:tabClick点击事件只是单单改变activeIndex的当前值,switchNav点击事件除此之外同时改变navScrollLeft的大小以实时改变scroll-view组件的scroll-left属性,达成切换页面时的动画效果。

固定导航栏

效果示意图:
固定导航栏预览效果
代码:
wxml

<view class="page">
	<view class="page__bd">
		<view class="weui-tab">
			<view class="weui-navbar">
				<block wx:for="{{tabs}}" wx:key="*this">
					<view id="{{index}}" class="weui-navbar-item {{activeIndex == index ? 'weui-navbar-item-on' : ''}}" bindtap="tabClick">
						<view class="weui-navbar__title">{{item}}</view>
					</view>
				</block>
			</view>
			<view class="weui-tab__panel">
				<!--1个页面 -->
				<view class="weui-tab_content" hidden="{{activeIndex != 0}}">
					1
				</view>
				<!--2个页面 -->
				<view class="weui-tab_content" hidden="{{activeIndex != 1}}">
					2
				</view>
				<!--3个页面 -->
				<view class="weui-tab_content" hidden="{{activeIndex != 2}}">
					3
				</view>
				<!--4个页面 -->
				<view class="weui-tab_content" hidden="{{activeIndex != 3}}">
					4
				</view>
				<!--5个页面 -->
				<view class="weui-tab_content" hidden="{{activeIndex != 4}}">
					5
				</view>
			</view>
		</view>
  </view>
</view>

js

var sliderWidth = 96; // 需要设置slider的宽度,用于计算中间位置
const app = getApp()
Page({
  data: {
    tabs: ["标题A", "标题B", "标题C", "标题D", "标题E"],
    activeIndex: 0,
    sliderOffset: 0,
    sliderLeft: 0
  },
  onLoad: function (options) {
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2,
          sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex
        });
      }
    });
    that.setData({
      activeIndex: options.activeIndexData
    })
  },
  tabClick: function (e) {
    this.setData({
      sliderOffset: e.currentTarget.offsetLeft,
      activeIndex: e.currentTarget.id
    })
  }
})

wxss

page,
.page,
.page__bd {
  height: 100%;
}
.page__bd {
  padding-bottom: 0;
}
.weui-tab_content {
  padding-top: 60px;
  text-align: center;
  font-size: 32rpx;
}
.weui-navbar {
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 500;
  width: 100%;
  height: 95rpx;
  flex-direction: row;
  text-align: center;
  color: #A8A8A8;
  font-size: 32rpx;
  box-sizing: border-box;
  background-color: #FFF;
  border-bottom: 1rpx solid #DFDFDF;
}
.weui-navbar-item {
  flex: 1;
  padding: 26rpx 0px;
}
.weui-navbar-item-on {
  transition: all 0.3s;
  border-bottom: 10rpx solid #478ff3;
  color: #478ff3;
}

可滑动导航栏

效果示意图:
可滑动导航栏预览图
代码:
wxml

<view class="page">
	<!-- tab导航栏 -->
	<scroll-view scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">
		<block wx:for="{{navData}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx">
			<view class="nav-item {{currentTab == idx ?'active':''}}" data-current="{{idx}}" bindtap="switchNav">
				<text>{{navItem}}</text>
			</view>
		</block>
	</scroll-view>
	<!-- 页面内容 -->
	<view class="weui-tab__panel">
		<!--1个页面 -->
		<view class="weui-tab_content" hidden="{{currentTab != 0}}">
			1
		</view>
		<!--2个页面 -->
		<view class="weui-tab_content" hidden="{{currentTab != 1}}">
			2
		</view>
		<!--3个页面 -->
		<view class="weui-tab_content" hidden="{{currentTab != 2}}">
			3
		</view>
		<!--4个页面 -->
		<view class="weui-tab_content" hidden="{{currentTab != 3}}">
			4
		</view>
		<!--5个页面 -->
		<view class="weui-tab_content" hidden="{{currentTab != 4}}">
			5
		</view>
		<!--6个页面 -->
		<view class="weui-tab_content" hidden="{{currentTab != 5}}">
			6
		</view>
		<!--7个页面 -->
		<view class="weui-tab_content" hidden="{{currentTab != 6}}">
			7
		</view>
		<!--8个页面 -->
		<view class="weui-tab_content" hidden="{{currentTab != 7}}">
			8
		</view>
	</view>
</view>

js

var sliderWidth = 96; // 需要设置slider的宽度,用于计算中间位置
const app = getApp()
Page({
  data: {
    navData: ["标题A", "标题B", "标题C", "标题D", "标题E", "标题F", "标题G", "标题H"],
    currentTab: 0,
    navScrollLeft: 0,
  },
  onLoad() {
    wx.getSystemInfo({
      success: (res) => {
        this.setData({
          pixelRatio: res.pixelRatio,
          windowHeight: res.windowHeight,
          windowWidth: res.windowWidth
        })
      },
    })
  },
  switchNav(event) {
    var cur = event.currentTarget.dataset.current;
    //每个tab选项宽度占1/5
    var singleNavWidth = this.data.windowWidth / 5;
    //tab选项居中                            
    this.setData({
      navScrollLeft: (cur - 2) * singleNavWidth
    })
    if (this.data.currentTab == cur) {
      return false;
    } else {
      this.setData({
        currentTab: cur
      })
    }
  }
})

wxss

.weui-tab_content {
  padding-top: 100rpx;
  text-align: center;
  font-size: 32rpx;
}
.nav {
  height: 86rpx;
  text-align: center;
  color: #A8A8A8;
  font-size: 4vw;
  background-color: #FFF;
  border-bottom: 1rpx solid #DFDFDF;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  line-height: 80rpx;
  white-space: nowrap;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}
.nav-item {
  width: 22%;
  display: inline-block;
  text-align: center;
}
.nav-item.active {
  transition: all 0.3s;
  border-bottom: 10rpx solid #478ff3;
  color: #478ff3;
}
  • 20
    点赞
  • 163
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
微信小程序中,自定义底部导航栏的代码如下: ```html <view class="tab-bar"> <view class="tab-item" wx:for="{{tabs}}" wx:key="{{item.id}}" bindtap="switchTab" data-id="{{item.id}}"> <image class="tab-icon" src="{{item.icon}}" /> <text class="tab-title">{{item.title}}</text> </view> </view> ``` 在上面的代码中,我们使用了一个 `view` 标签作为底部导航栏的容器,并在其中使用了一个 `wx:for` 循环渲染每个导航项。每个导航项都是一个 `view` 标签,并包含了一个图标和一个标题。我们还为每个导航项绑定了一个 `bindtap` 事件,用于在用户点击导航项时切换页面。 接下来,我们需要在页面的 `js` 文件中定义导航项的数据和切换页面的逻辑: ```javascript Page({ data: { tabs: [ { id: 0, title: '首页', icon: '/images/home.png', url: '/pages/index/index' }, { id: 1, title: '消息', icon: '/images/message.png', url: '/pages/message/message' }, { id: 2, title: '我的', icon: '/images/me.png', url: '/pages/me/me' } ], activeTab: 0 }, switchTab: function(e) { const id = e.currentTarget.dataset.id const tab = this.data.tabs.find(item => item.id === id) if (tab) { wx.switchTab({ url: tab.url }) this.setData({ activeTab: id }) } } }) ``` 在上面的代码中,我们使用了一个 `data` 对象来保存导航项的数据和当前选中的导航项。在 `switchTab` 方法中,我们通过点击事件获取到用户点击的导航项的 `id`,然后在导航项数组中查找对应的导航项,并使用 `wx.switchTab` 方法切换到对应的页面。最后,我们使用 `setData` 方法更新当前选中的导航项的 `id`。 最后,我们还需要在 `wxss` 文件中定义导航栏的样式: ```css .tab-bar { display: flex; flex-direction: row; justify-content: space-around; align-items: center; height: 100rpx; background-color: #fff; box-shadow: 0 -1px 5px #ddd; } .tab-item { display: flex; flex-direction: column; align-items: center; } .tab-icon { width: 50rpx; height: 50rpx; } .tab-title { font-size: 24rpx; margin-top: 10rpx; } ``` 在上面的代码中,我们使用了 `flex` 布局来将导航项平均分配到底部导航栏中,并设置了一些基本的样式,如高度、背景色、阴影等。我们还为导航项的图标和标题设置了一些样式,如大小、间距、字体大小等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值