微信小程序实现标签栏

标签栏实现功能：

页面向下滑动，标签栏吸顶。
点击标签项，标签项呈现选中态，并切换到对应的面板。
在面板中进行滑动，可切换标签项和面板。

<!-- tabs.wxml -->
<wxs module="touch" src="./touch.wxs"></wxs><view class="tabs"><view class="tab-navs"><view class="tab-nav" wx:for="{{tabs}}" wx:key="index"><!-- 通过对比 index 与当前点击的标签项的下标来实现选中态 --><view class="tab-label {{currentTabIndex === index ? 'active-tab-label' : ''}}" data-index="{{index}}" bindtap="handleTabChange">{{item}}</view><view class="tab-divider" wx:if="{{currentTabIndex === index}}"></view></view></view><!-- 滑动切换面板 --><view class="tab-panel" bindtouchstart="{{touch.handleTouchstart}}" bindtouchend="{{touch.handleTouchend}}"></view>
</view>

// tabs.js
Page({data: {tabs: ['全部', '待付款', '待发货', '待收货', '售后'],currentTabIndex: 0, // 记录当前点击的标签项的下标},// 点击标签项切换到对应的面板// 快速点击标签项，可能会导致面板中渲染出来的请求数据错乱。原因是：事件和网络请求都是异步的，快速触发事件无法保证它的执行顺序和触发顺序一致，而且，也无法保证网络请求返回数据的顺序和触发顺序一致。因此使用节流函数防止频繁触发调用（节流函数此处不做具体实现，可查看事件稀释一文）。handleTabChange: throttle(function(e) {const {index} = e.target.datasetconst {currentTabIndex} = this.dataif (index === currentTabIndex) returnthis.setData({currentTabIndex: index})}, 500),// 逻辑层和视图层的通信以及页面的重新渲染，性能开销极大。因此，不直接在 js 中监听滑动事件，而是使用 WXS 函数用来响应小程序事件，让事件在视图层响应，从而减少通信的次数和页面的重新渲染达到性能的优化。// 根据滑动方向切换面板handleTouch(values) {const {direction} = valuesconst {tabs, currentTabIndex} = this.dataconst target = currentTabIndex + direction// 越界判断if (target < 0 || target > tabs.length - 1) returnthis.setData({currentTabIndex: target})}
})

// touch.wxs
var touchStart
function handleTouchstart(e) {// 记录触摸开始的 X 轴的位置touchStart = e.changedTouches[0].clientX
}function handleTouchend(e) {// 记录触摸结束的 X 轴的位置var touchEnd = e.changedTouches[0].clientX// 负数表示手指向左滑动，正数表示手指向右滑动var distance = touchEnd - touchStart// 定义滑动方向。-1：页面后退（向右滑动）；0：不动；1：页面前进（向左滑动）var direction = 0// 设置一个阈值，超出才切换面板var threshold = 30if (distance < -threshold) {direction = 1} else if (distance > threshold) {direction = -1}if (direction !== 0) {// 调用引用该 wxs 的组件的方法，传递滑动方向e.instance.callMethod('handleTouch', {direction: direction})}
}module.exports = {handleTouchstart: handleTouchstart,handleTouchend: handleTouchend,
}

/* tabs.wxss */
.tabs {width: 100%;// 不能设置父元素的 height 为 100%，否则当页面滑动到一定高度之后 sticky 属性会失效。标签项不再吸顶被顶走。// 原因：和粘性定位的原理有关，在实现吸附效果时，会根据父元素的大小来进行定位。如果设置父元素高度为 100%，那么就会按照这个高度来定位，但是页面中的数据是分页加载的，父元素的高度会越来越高，那么初始计算出的定位就是错误的。// 解决方法：设置 min-heightmin-height: 100%;display: flex;flex-direction: column;
}.tab-navs {display: flex;// 设置粘性定位position: sticky;top: 0;z-index: 99999;
}.tab-nav {flex: 1;display: flex;flex-direction: column;align-items: center;padding: 20rpx 0;
}.tab-label {color: #333333;white-space: nowrap;
}.active-tab-label {color: #FF4A2F;
}.tab-divider {width: 40rpx;height: 5rpx;background-color: #FF4A2F;margin-top: 10rpx;
}.tab-panel {flex: 1;
}

微信小程序实现标签栏相关推荐

微信小程序标签栏tabBar
微信小程序主页面大部分都定义了底部标签栏,定义一个标签栏只需要在app.json里做声明即可,代码如下: "tabBar": { "color": &q ...
微信小程序研发问题梳理:翻页:下拉:缓存:canvas:富文本:分享
微信小程序研发问题梳理最近鼓捣小程序的时候,着实遇到了一些问题,尽管有些再翻看文档几遍,就能找到答案,但还是要发挥下烂笔头的功效,顺便梳理下. 问题列表登录流程小程序标签页地址无法跳转问题页面 ...
微信小程序——章节自测七
1[单选题] 在微信小程序中的app.json文件中通过( )对象进行配置页面底部的标签栏. A. pages B. window C. tabBar D. sitemapLocation 答案:C ...
微信小程序章节自测--6-7-8-9-有解析
目录第6章自测第7章自测第8章自测第9章自测第6章自测 1[单选题] 下面不属于scroll-view组件属性的是(). A. scroll-x B. scroll-top C. binds ...
微信小程序实现锚点跳转
微信小程序实现锚点跳转 1.先上效果图,看看是不是你想要的. 2.主要用到的微信小程序的scroll-view 组件实现该效果.核心主要是使用scroll-into-view属性跳转对应的标签页和标签 ...
微信小程序系列3——页面跳转详解
前言首先,微信页面跳转的是一个页面栈进栈出栈的过程,也可以简单的理解对页面跳转的操作就是一个栈的操作. 微信小程序主要一下两类样式的跳转(JS.WXML控件): JS控制的跳转: navigat ...
自学微信小程序开发第四天-研究弹性盒子(FlexBox)的伸缩布局，微信小程序的CSS使用实例
@TOC 组件都了解的差不多了,下面就是页面整体布局设计了.在HTML中,使用的是DIV + CSS的布局方式,也可以用在小程序里.不过因为移动端的分辨率不统一,使得布局的自适应十分重要.所以研究一下 ...
基于微信小程序的军迷社区交易系统的设计与实现
基于微信小程序的军迷社区交易系统的设计与实现摘要随着数字媒体和军民融合的深入发展,军迷基数增长,军事类的网络平台的发展也如火如荼,这就需要深入挖掘军迷社群潜力,通过网络社群来增加群体黏性.因此可 ...
微信小程序常用知识点
微信小程序 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dEpb5tol-1600061439777)(C:\Users\86183\AppData\Roaming\ ...

微信小程序实现标签栏

微信小程序实现标签栏相关推荐

最新文章

热门文章