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

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

首先创建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: function (e) {
 
    startX = e.touches[0].pageX; // 获取触摸时的原点
 
    moveFlag = true;
 
  },
  // 触摸移动事件
  touchMove: function (e) {
    endX = e.touches[0].pageX; // 获取触摸时的原点
    if (moveFlag) {
      if (endX - startX > 50) {
        console.log("move right");
        this.move2right();
        moveFlag = false;
      }
      if (startX - endX > 50) {
        console.log("move left");
        this.move2left();
        moveFlag = false;
      }
    }
  },
  // 触摸结束事件
  touchEnd: function (e) {
    moveFlag = true; // 回复滑动事件
  },
  clicktab1:function(e){
    this.move2right();
   this.setData({
     currentab:0
   })
console.log('详情')
  },
  clicktab2:function(e){
    this.move2left();  
    this.setData({
      currentab:1
    })
    console.log('售后')
  },
  //向左滑动操作
  move2left() {
    var that = this;
    if (this.data.page == 2) { 
      return
    }
    var animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
      delay: 100
    });
    animation.opacity(0.2).translate(-500, 0).step()
    this.setData({ 
      ani1: animation.export() 
    })
    setTimeout(function () {
      that.setData({
        page: 2, 
        ani2: '',
        currentab:1
      });
    }, 300) 
  },
 
  //向右滑动操作
  move2right() {
    var that = this;
    if (this.data.page == 1) {
      return
    }
    var animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
      delay: 100
    });
    animation.opacity(0.2).translate(500, 0).step()
    this.setData({
      ani2: animation.export()
    })
    setTimeout(function () {
      that.setData({
        page: 1,
        ani1: '',
        currentab:0
      });
    }, 300)
  },
  phone1(){
    wx.makePhoneCall({
      phoneNumber: '12343' //虚假号码仅为测试使用
    })
  },
  phone2(){
    wx.makePhoneCall({
      phoneNumber: '2321313' //虚假号码仅为测试使用
    })
  }
  })

css样式

/* 详情 与 售后 */
.container1 {
  width: 100%;
  /* height: 100%; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}
 
.container2 {
 width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

/* 订餐须知 */
.order-notice{
  text-align: center;
  width: 100%;
  background-color:#96cd40;
  height: 30%;
}
.order-notice0{
  font-size: 30rpx;
  margin-top: 3%;
}
.order-one{
  /* border: 2rpx solid black; */
  width: 90%;
  height: 60%;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.order-notice1{
  font-size: 25rpx;
  margin-top: 3%;
}
.order-notice2{
  font-size: 25rpx;
  margin-top: 3%;
}
.order-notice3{
  font-size: 25rpx;
  margin-top: 3%;
}