Advertisement

微信小程序采用左右滑动与点击以实现页面切换

阅读量:

主要实现商品详情页下面左滑右滑来切换 详情与售后页面

在这里插入图片描述

首先需要设置两个view标签,用于承载两个页面的内容,并加入两个if条件判断语句,以确保仅显示其中一个页面。同时,添加bindtouchstart事件用于监听手指触摸动作的开始,touchmove事件用于检测手指在屏幕上的移动,以及touchend事件用于识别手指触摸动作的结束,从而实现对页面切换过程的监控。接下来,构建一个动画实例animation,并通过调用该实例的相关方法来定义动画效果。最终,借助动画实例所提供的export方法将动画数据导出,并将其传递至组件的animation属性中。

复制代码
     <view class='swipertab'>
      <view class="tabitem {{currentab==0 ? 'active' : ''}}" data-current="0" bindtap='clicktab1'>详情</view>
      <view class="tabitem {{currentab==1 ? 'active' : ''}}" data-c

全部评论 (0)

还没有任何评论哟~