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

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

首先创建2个view标签来装载2个页面的内容 增加2个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-current="1" bindtap='clicktab2'>售后</view>
    </view>


 <view class="container1" wx:if="{
   {page == 1}}" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" animation="{
   {ani1}}">
我是第一个页面
  </view>

 <view class="container2" wx:if="{
   {page == 2}}" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" animation="{
   {ani2}}">
我是第二个页面
  </view>

在js里面添加对应方法

const app = getApp();
var startX, endX;  //首先创建2个变量 来记录触摸时的原点
var moveFlag = true;// 判断执行滑动事件

Page({
   
  /**
   * 页面的初始数据
   */
  data: {
   
    page : 1,
    ani1: '',
    ani2: ''

  },
/**
   * 详情与售后左滑右滑事件
   */
   
  touchStart:<