主要实现商品详情页下面左滑右滑来切换 详情与售后页面
首先创建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%;}
