微信小程序实现滑动tab标签页

最新推荐文章于 2024-07-22 01:47:16 发布

Archimelan

最新推荐文章于 2024-07-22 01:47:16 发布

阅读量4.3k

点赞数

分类专栏： WXMP 文章标签： tab 标签页滑动微信小程序

本文链接：https://blog.csdn.net/Archimelan/article/details/78373470

版权

通过在微信小程序中对外层view设置触摸开始和结束事件，判断滑动方向来切换tab标签页。利用样式变换（如translate）实现在滑动过程中内容的平滑移动，并动态调整active标签的样式，达到流畅的用户体验。

摘要由CSDN通过智能技术生成

外层的view添加2个事件，一个是触摸开始，一个触摸结束，在事件里可以根据target的坐标判断是否发生左右滑动，以此改变页面及标签的转变。发生改变时，标签动态改变active样式，内容则用translate实现左右平移。

WXML:

 <view class="page" bind:touchstart="pageTouchStartHandler" bind:touchend="pageTouchEndHandler" >
  <button  class="tab-menu {
  {class1}}" bindtap="showTab1">tab1</button>
  <button  class="tab-menu {
  {class2}}" bindtap="showTab2">tab2</button>
  <view class="view-container" style='{
  {viewTranslate}}'>
    <view class="tab-view" style="background:red">view1</view>
    <view class="tab-view" style="background:blue">view2</view>
  </view>
</view>

WXSS: