微信小程序滚动居中导航选项卡

微信小程序头部导航经常会用到选项卡，一个会自动居中的选项卡的体验会比普通的选项卡要好很多。

效果示意图：

被选中的tab会始终居中显示。

利用微信小程序自带的组件scroll-view的scroll-left就很容易实现这个效果。

wxml代码：

<!-- 遮罩层 --><image wx:if="{{showMaskScroll}}" class='mask-scroll' src='../../static/images/slidemunu-r.png'></image><scroll-view scroll-x="true" class="nav {{showScroll ? 'showScroll' : ''}} " scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}" scroll-into-view="{{toView}}" bindscrolltoupper="stopTimer" bindscroll="stopNewTimer"><block wx:for="{{navData}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx"><view id="navItem{{idx}}" class="nav-item navItem{{idx}} {{currentTab == idx ?'active':''}}" data-current="{{idx}}" data-id="{{navItem.id}}" data-url="{{navItem.cat_url}}" data-name="{{navItem.cat_name}}" bindtap="switchNav" style="margin-right:{{idx==navData.length-1?'60rpx':'0rpx'}};">{{navItem.cat_name}}<image class='hot' src='../../static/images/icon/icon_hot.png' wx:if="{{navItem.is_recommend == 1}}"></image></view></block><view class='slideLine' style="width:{{slideWidth}}px;left:{{sliedeLeft}}px;"></view></scroll-view>

遮罩层是右边提示可以滑动的一个遮罩图。

wxss代码：

/* 顶部导航条 */.nav {height: 100rpx;width: 630rpx;position: relative;box-sizing: border-box;overflow: hidden;font-size: 0;line-height: 100rpx;white-space: nowrap;opacity: 0;transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}.nav.showScroll {opacity: 1;
}.slideLine {height: 8rpx;/* width: 24px; */position: absolute;top: 94rpx;/* top: 0; */background: #e64340;transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}.nav-item {/* padding: 0 5px; */margin: 0 5px;position: relative;display: inline;/* height: 100rpx; */text-align: center;font-size: 14px;color: #666;border-bottom: none;/* background: green; */transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}.nav-item .hot{width: 19rpx;height: 19rpx;position: absolute;right: -5rpx;top: -5rpx;
}.nav-item.active {color: #e64340;/* height: 94rpx; *//* border-bottom: 8rpx solid #e64340; */
}.page-top {width: 100%;position: relative;background: white;
}.page-top.top {position: fixed;top: 0;left: 0;z-index: 99999;
}.search {position: absolute;right: 30rpx;top: 20rpx;width: 60rpx;height: 60rpx;z-index: 999999;
}.mask-scroll {position: absolute;right: 120rpx;top: 0;width: 45rpx;height: 100rpx;z-index: 999999;
}

js代码：

data: {slideWidth: 38, // 导航滑块长度sliedeLeft: 5,  // 导航滑块距离showMaskScroll: true,  // 是否显示顶部遮罩},
switchNav(event) {let that = this;let listLength = that.data.navData.length;let cur = home.getDataSet(event, 'current');let id = home.getDataSet(event, 'id');let name = home.getDataSet(event, 'name');let onheadactive = event.currentTarget.offsetLeft; // 元素距离左侧的位置let winweight = this.data.windowWidth; // 设备宽度let domWidth = ''; // 元素的宽度let query = wx.createSelectorQuery();query.select('.navItem' + cur).boundingClientRect(function (rect) {domWidth = rect.width;let distance = onheadactive - winweight / 2 + domWidth / 2;let sliedeLeft = onheadactive;if (sliedeLeft <= 0) {sliedeLeft = 0;}console.log('navScrollLeft', distance)//tab选项居中                            that.setData({navScrollLeft: distance,slideWidth: domWidth,sliedeLeft,currentIndex: 0})}).exec();// 最后一个元素隐藏遮罩层if (cur + 1 >= listLength) {that.setData({showMaskScroll: false})} else {that.setData({showMaskScroll: true})}},

微信小程序滚动居中导航选项卡相关推荐

微信小程序之顶部导航栏（选项卡）实例 —— 微信小程序实战系列（1）
需求:顶部导航栏效果图: wxml:  <view class="navbar"><text wx:for="{{na ...
微信小程序滚动播放内容
目录微信小程序创建项目配置底部导航栏微信小程序滚动播放内容微信小程序功能中心模块开发微信小程序个人中心页面开发微信小程序获取电话号码微信小程序显示列表数据微信小程序显示分页列表微信小程 ...
微信小程序，自定义导航栏组件
微信小程序,自定义导航栏组件,可兼容iPhone 11及以上留海屏显示,关于参数获取设置参照微信小程序-收藏_羽筠的博客-CSDN博客可定义设置的内容如下: 文字及返回箭头颜色背景图片(优先级高于 ...
微信小程序界面从右边滑出_微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动，右侧滑动)...
本文实例讲述了微信小程序MUI侧滑导航菜单.分享给大家供大家参考,具体如下: 实现的目标--YDUI的Popup组件点击列表图标--左侧的菜单栏显示--点击关闭按钮或者右侧的遮罩层--左侧菜单栏关闭 ...
微信小程序-自定义底部导航
代码地址如下: http://www.demodashi.com/demo/14258.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序自定义顶部导航栏标题 navigationStyle
微信小程序自定义顶部导航栏标题单页面自定义导航栏修改需要自定义的页面,的页面配置.json文件全部页面自定义导航修改公共页面配置app.json 单页面自定义导航栏修改需要自定义的页面,的 ...
微信小程序制作顶部导航栏
1问题描述使用微信小程序开发者工具制作顶部导航栏. 2算法描述首先就是对微信小程序开发者工具的配置,官网搜索后进入,选择稳定版,Windows64位下载. 然后点开开发者工具,选择小程序,点击图片 ...
微信小程序——沉浸式导航栏实现
微信小程序--沉浸式导航栏实现微信小程序中导航栏一般来说是默认的展示标题等等,可以做的样式改变仅仅能通过配置一些官方提供的属性来实现.除此之外小程序还提供了navigationStyle这个属性可以 ...
微信小程序的自定义导航栏
微信小程序的导航栏主要分为两个部分:状态栏和标题栏. 关于微信小程序的自定义导航栏也就是通过微信小程序官方提供的API接口来算出状态栏和标题栏的高度. 注意获取到的数值单位都是px. 首先要开启自定义 ...

微信小程序滚动居中导航选项卡

微信小程序滚动居中导航选项卡相关推荐

最新文章

热门文章