React+Taro开发小程序实现左滑喜欢右滑不喜欢效果

郭元民 發表於 2020-5-15 16:30:00

React+Taro开发小程序实现左滑喜欢右滑不喜欢效果

序言：
      年后入职了一家新公司，与前同事交接完之后，发现公司有一个四端的项目（iOS，Android，H5，小程序），iOS和安卓都实现了左滑右滑的效果，而h5和小程序端没实现，询问得知前同事因网上没找到对应的插件相关博客也比较少，加上公司任务比较紧，所以没做就搁置下来了。
      利用闲暇时间，于是乎在网上也搜索了一下，发现相关博客确实很少，但是有人提到可以用小程序可拖动组件movable-view来实现，自己尝试来一下发现可行，于是来写这篇博客记录一下，希望能帮助到后面需要用到这个功能的人！
 
第一种实现方式：
先上效果图：展示了左滑，右滑，点击喜欢按钮，不喜欢按钮分别的效果；
<img src="https://img2020.cnblogs.com/blog/1244003/202009/1244003-20200930104944763-1663967157.gif">
 
主要技术：Taro+Taro UI+React（如果你是小程序原生或者uniapp+vue写法都差不多，可以通用）
可拖动组件文档地址：
Taro:     https://taro-docs.jd.com/taro/docs/components/viewContainer/movable-view.html
微信小程序：    https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html
 
思路：
一，我们首先把movable-area和movable-view标签写出来；
<div class="cnblogs_code">
<pre><movable-area>
<movable-view>
 ......
</movable-view>
</movable-area></pre>
</div>
二，我们可以看到文档里面有一个onChange方法，即拖动过程中触发的事件；
<div class="cnblogs_code">
<pre><movable-area>
<movable-view onChange ={this. onChange.bind(this)}>
 ......
</movable-view>
</movable-area>

// 触发方法，打印参数
onChange(e) {
console.log('参数',e);
}</pre>
</div>
我们可以看到打印出了，拖动的位置和产生移动的原因等；
三，我们接着加入开始onTouchstart，移动onTouchmove，结束onTouchcancel，onTouchend三个事件方法；
<div class="cnblogs_code">
<pre><MovableView
key={item.id}
onTouchcancel={this.onCancel}
onTouchend={this.onCancel}
onTouchstart={this.onTouchStart}
onTouchmove={this.onTouchMove}
x={this.state.x}// 横坐标位置
y={this.state.y}// 纵坐标位置
direction='all'// 移动方向都可以
outOfBounds// 可超过可移动区域
className='shop-imgbox'
>
<--中间加入图片之类的滑动内容-->
</MovableView>
 </pre>
</div>
初始数据如下：
<div class="cnblogs_code">
<pre>state = {
x: '16',
y: '16',
like: false,
unlike: false,
shopList: [
 {
 img: 'https://edgefix-image.edgecom.top/ABD846F6672997A7F76CD38E8A57F954.jpg',
 },
 {
 img: 'https://edgefix-image.edgecom.top/F6E5801C304CC76DA63C02C9FB38B8F4.jpg',
 },
 {
 img: 'https://edgefix-image.edgecom.top/D518952AD1DD61B2D32556E20CC527C4.jpg',
 },
 {
 img: 'https://edgefix-image.edgecom.top/1D187E28B349679908A44BBE81F3D3CA.jpg',
 },
 {
 img: 'https://edgefix-image.edgecom.top/1129A411AC9CF5F81187CBED181B6F57.jpg',
 }
]
} </pre>
</div>
三个方法我们可以取到移动后改变的位置，来改变喜欢与不喜欢的状态css，以及实现卡片滑动的效果：
1. 触摸触发的时候，我们获取到刚刚开始触摸卡片的x，y的位置坐标；
2. 在触摸滑动时，我们通过滑动后的位置-滑动前的位置，来判断距离多少来改变喜欢和不喜欢的值；
3. 当手离开时，触发取消事件，我们需要把状态数据改为原始值，即回到最初的状态；
<div class="cnblogs_code">
<pre>// 触摸触发 
onTouchStart(e) {
console.log('222',e.touches.pageX);
this.setState({
 x: e.touches[0].pageX,
 y: e.touches[0].pageY,
});
}
// 触摸移动 
onTouchMove(e) {
console.log('333',e.touches.pageX);
let dx = e.touches.pageX - this.state.x;
if (dx > 50) {
 this.setState({
 like: true,
 unlike: false,
 });
} else if (dx < -50) {
 this.setState({
 like: false,
 unlike: true,
 });
} else {
 this.setState({
 like: false,
 unlike: false,
 });
}
}
// 取消 
onCancel(e) {
console.log('444',e.changedTouches.pageX);
this.setState({
 x: '16',
 y: '16',
 like: false,
 unlike: false, 
});
} </pre>
</div>
当我们写到这里，我们去拖动我们的卡片时，你会发现确实可以拖动，并且取消的时候会回到原点，但是同样你也会发现一个问题，就是你拖动的时候，五张卡片都被触发来移动的效果，出现了触点混乱的问题，查找问题发现卡片共用了x，y，因此我们可以给每张卡片设置独立的参数；
四，给每张卡片独立的参数并且设置卡片倾斜度效果；
1.设置倾斜度效果
<div class="cnblogs_code">
<pre>style={{transform:'rotate('+this.state.tiltAngle+'deg)'}}</pre>
</div>
然后我们通过卡片移动位置计算出一个你决定合适的倾斜角度；
<div class="cnblogs_code">
<pre>// 拖动后相差距离进行换算角度
let dxangle = (e.touches.pageX - this.state.startX) * 45 / 500;</pre>
</div>
2.设置独立的参数
方法携带索引，我们取到对应的卡片index，来改变对应卡片的数据；
<div class="cnblogs_code">
<pre><MovableView
key={item.id}
onTouchcancel={this.onCancel.bind(this,index)}
onTouchend={this.onCancel.bind(this,index)}
onTouchstart={this.onTouchStart.bind(this,index)}
onTouchmove={this.onTouchMove.bind(this,index)}
x={this.state.x}
y={this.state.y}
direction='all'
outOfBounds
className='shop-imgbox'
>
</MovableView></pre>
</div>
同时，我们需要改变初始参数的形式为数组，我们通过索引改变对应卡片的值；
<div class="cnblogs_code">
<pre>state = {
// 开始位置
startX: '',
// 开始位置-最终位置距离
placeX: '',
// 倾斜角度
tiltAngle: ['0','0','0','0','0'],
// 坐标
x: ['16','16','16','16','16'],
y: ['16','16','16','16','16'],
// 是否喜欢状态
like: [false,false,false,false,false],
unlike: [false,false,false,false,false],
// 推荐商品数组
 shopList: [
 {
 id: 1,
 img: 'https://edgefix-image.edgecom.top/ABD846F6672997A7F76CD38E8A57F954.jpg',
 },
 {
 id: 2,
 img: 'https://edgefix-image.edgecom.top/F6E5801C304CC76DA63C02C9FB38B8F4.jpg',
 },
 {
 id: 3,
 img: 'https://edgefix-image.edgecom.top/D518952AD1DD61B2D32556E20CC527C4.jpg',
 },
 {
 id: 4,
 img: 'https://edgefix-image.edgecom.top/1D187E28B349679908A44BBE81F3D3CA.jpg',
 },
 {
 id: 5,
 img: 'https://edgefix-image.edgecom.top/1129A411AC9CF5F81187CBED181B6F57.jpg',
 }
]
}</pre>
</div>
方法我们就举一个例子，比如onTouchStart方法，我们遍历卡片数组，通过判断索引来得到是那张卡片，从而来改变对应值
<div class="cnblogs_code">
<pre>// 触摸触发
onTouchStart(index,e) {
console.log('1111',index,e.touches.pageX,e.touches.pageY);
// 重定义数组
var againX = [];
var againY = [];
// 遍历，判断拖动的该数组的位置
for (var i=0; i<this.state.shopList.length; i++){
 if (i == index) {
 againX = e.touches.pageX;
 againY = e.touches.pageY;
 } else {
 againX = '16';
 againY = '16';
 }
}
// 赋值
this.setState({
 startX: e.touches[0].pageX,
 x: againX,
 y: againY,
});
}</pre>
</div>
这样，我们运行代码，发现拖动第一张卡片不会影响到后面卡片的位置了，
同时，我们现在拖动卡片删除的是数组，在实际项目中，我们在触发删除数组的地方接入接口，调用喜欢，不喜欢改变数据参数，从而也能改变数组的长度；
五，完整代码；
下面我将贴出完整的代码供大家参考
html文件：
<div class="cnblogs_code">
<pre>import Taro, { Component } from '@tarojs/taro';
import { View, Image, Button, Text, MovableArea, MovableView } from '@tarojs/components';
import { observer, inject } from '@tarojs/mobx';
import { AtButton, AtFloatLayout} from 'taro-ui';
import userStore from '../../store/user.store';

import './stroll.scss';

@inject('userStore')
@observer
class Stroll extends Component {
config = {
navigationBarTitleText: '逛',
}

state = {
// 开始位置
startX: '',
// 开始位置-最终位置距离
placeX: '',
// 倾斜角度
tiltAngle: ['0','0','0','0','0'],
// 坐标
x: ['16','16','16','16','16'],
y: ['16','16','16','16','16'],
// 是否喜欢状态
like: ,
unlike: ,
// 推荐商品数组
shopList: [
 {
 id: 1,
 img: 'https://edgefix-image.edgecom.top/ABD846F6672997A7F76CD38E8A57F954.jpg',
 },
 {
 id: 2,
 img: 'https://edgefix-image.edgecom.top/F6E5801C304CC76DA63C02C9FB38B8F4.jpg',
 },
 {
 id: 3,
 img: 'https://edgefix-image.edgecom.top/D518952AD1DD61B2D32556E20CC527C4.jpg',
 },
 {
 id: 4,
 img: 'https://edgefix-image.edgecom.top/1D187E28B349679908A44BBE81F3D3CA.jpg',
 },
 {
 id: 5,
 img: 'https://edgefix-image.edgecom.top/1129A411AC9CF5F81187CBED181B6F57.jpg',
 }
]
}

componentWillMount () { }

componentWillReact () { }

componentDidMount () {
}

// 触摸触发
onTouchStart(index,e) {
console.log('1111',index,e.touches.pageX,e.touches.pageY);
// 重定义数组
var againX = [];
var againY = [];
// 遍历，判断拖动的该数组的位置
for (var i=0; i<this.state.shopList.length; i++){
 if (i == index) {
 againX = e.touches.pageX;
 againY = e.touches.pageY;
 } else {
 againX = '16';
 againY = '16';
 }
}
// 赋值
this.setState({
 startX: e.touches.pageX,
 x: againX,
 y: againY,
});
}
// 触摸离开
onTouchMove(index,e) {
console.log('2222',index,e.touches.pageX,e.touches.pageY);
// 重定义数组
var tiltAngleT = [];
var againX = [];
var againY = [];
// 拖动后相差距离
let dxplace = e.touches.pageX - this.state.startX;
// 拖动后相差距离进行换算角度
let dxangle = (e.touches.pageX - this.state.startX) * 45 / 500;
console.log(dxangle);
// 遍历，判断拖动的该数组的位置
for (var i=0; i<this.state.shopList.length; i++){
 if (i == index && dxplace > 50) {
 tiltAngleT = dxangle,
 againX = true;
 againY = false;
 } else if (i == index && dxplace <= -50) {
 tiltAngleT = dxangle,
 againX = false;
 againY = true;
 } else if (i == index && dxplace < 50 && dxplace > -50) {
 tiltAngleT = dxangle,
 againX = false;
 againY = false;
 } else {
 tiltAngleT = '0',
 againX = false;
 againY = false;
 }
}
// 赋值
this.setState({
 placeX: dxplace,
 tiltAngle: tiltAngleT,
 like: againX,
 unlike: againY,
});
}
// 取消
onCancel(index,e) {
console.log('3333',index,e.changedTouches.pageX,e.changedTouches.pageY);
// 赋值
this.setState({
 tiltAngle: ['0','0','0','0','0'],
 x: ['16','16','16','16','16'],
 y: ['16','16','16','16','16'],
 like: ,
 unlike: ,
});
// 如果偏移已经达到则清除第一张图片
if (this.state.placeX > 50 || this.state.placeX < -50) {
 this.setState({
 shopList: this.state.shopList.splice(1,4),
 });
}
}
// 不喜欢按钮点击
dislikebtn() {
// 改变按钮的状态以及图片位置及显示
this.setState({
 tiltAngle: ['-18','0','0','0','0'],
 x: ['-30','16','16','16','16'],
 y: ['267','16','16','16','16'],
 unlike: ,
}, () => {
 setTimeout( () => {
 this.setState({
 tiltAngle: ['0','0','0','0','0'],
 x: ['16','16','16','16','16'],
 y: ['16','16','16','16','16'],
 unlike: ,
 shopList: this.state.shopList.splice(1,4),
 });
 },100);
});
}
// 喜欢按钮点击
likebtn() {
// 改变按钮的状态以及图片位置及显示
this.setState({
 tiltAngle: ['18','0','0','0','0'],
 x: ['284','16','16','16','16'],
 y: ['267','16','16','16','16'],
 like: ,
}, () => {
 setTimeout( () => {
 this.setState({
 tiltAngle: ['0','0','0','0','0'],
 x: ['16','16','16','16','16'],
 y: ['16','16','16','16','16'],
 like: ,
 shopList: this.state.shopList.splice(1,4),
 });
 },100);
});
}

componentWillUnmount () { }

componentDidShow () {
}

componentDidHide () { }

render() {
return (
 <View className='stroll-tab'>
 <View className='stroll-text'>
 <Text className='text-tip1'>搭配师每天为你推荐5件单品</Text>
 <View className='text-tip2'>
 <Text className='t1'>右滑喜欢</Text>
 <Image src={require('./img/ic_like.png')} className='icon-image'></Image>
 <Text className='t1'>，左滑不喜欢</Text>
 <Image src={require('./img/ic_dislike.png')} className='icon-image'></Image>
 </View>
 </View>
 {
 this.state.shopList.length != 0&&
 <MovableArea className='stroll-shop'>
 {
 this.state.shopList&&this.state.shopList.map((item,index) => {
 return(
 <MovableView
 key={item.id}
 onTouchcancel={this.onCancel.bind(this,index)}
 onTouchend={this.onCancel.bind(this,index)}
 onTouchstart={this.onTouchStart.bind(this,index)}
 onTouchmove={this.onTouchMove.bind(this,index)}
 x={this.state.x}
 y={this.state.y}
 direction='all'
 outOfBounds
 className='shop-imgbox'
 >
 <View className='images-box' style={{transform:'rotate('+this.state.tiltAngle+'deg)'}}>
 <Image src={item.img} className='images'></Image>
 {
 this.state.like==true&&
 <Image src={require('./img/text_like.png')} className='imagelike'></Image>
 }
 {
 this.state.unlike==true&&
 <Image src={require('./img/text_dislike.png')} className='imageunlike'></Image>
 }
 </View>
 </MovableView>
 );})
 }
 </MovableArea>
 }
 {
 this.state.shopList.length === 0&&
 <View className='noshop-card'>
 <Image src={require('./img/noshop.png')} className='noshop-image'></Image>
 </View>
 }
 <View className='stroll-fotter'>
 {
 this.state.shopList.length != 0&&
 <View className='fot-twoimg'>
 {
 this.state.unlike==false&&
 <Image src={require('./img/dislike_default.png')} className='dislike-image' onClick={this.dislikebtn.bind(this)}></Image>
 }
 {
 this.state.unlike==true&&
 <Image src={require('./img/dislike_click.png')} className='dislike-image'></Image>
 }
 {
 this.state.like==false&&
 <Image src={require('./img/like_default.png')} className='like-image' onClick={this.likebtn.bind(this)}></Image>
 }
 {
 this.state.like==true&&
 <Image src={require('./img/like_click.png')} className='like-image'></Image>
 }
 </View>
 }
 <Text className='fot-text'>查看我喜欢的</Text>
 </View>
 </View>
);
}
}

export default Stroll;</pre>
</div>
css文件：
<div class="cnblogs_code">
<pre>page {
height: 100%;
background: #F6F6F6;
}

.stroll-tab {
width: 100%;
min-height: 100vh;
background: #F6F6F6;
.stroll-text {
width: 100%;
margin-top: 40px;
display: flex;
flex-direction: column;
align-items: center;
.text-tip1 {
 font-size: 28px;
 color: #333333;
}
.text-tip2 {
 display: flex;
 flex-direction: row;
 align-items: center;
 .t1 {
 font-size: 28px;
 color: #333333;
 }
 .icon-image {
 width:20px;
 height:20px;
 }
}
}
.stroll-shop {
width: 100%;
height: 700px;
margin-top: 40px;
.shop-imgbox {
 height: 600px;
 border-radius: 24px;
 .images-box {
 width: 100%;
 height: 520px;
 border-radius: 24px;
 box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.1);
 background-color: #fff;
 position: relative;
 .images {
 width: 606px;
 height: 480px;
 position: absolute;
 left: 40px;
 top: 20px;
 }
 .imagelike {
 width: 96px;
 height: 48px;
 position: absolute;
 right: 40px;
 top: 20px;
 }
 .imageunlike {
 width: 148px;
 height: 48px;
 position: absolute;
 left: 40px;
 top: 20px;
 }
 }
}
.shop-imgbox:nth-child(1) {
 width: 686px;
 z-index: 50;
}
.shop-imgbox:nth-child(2) {
 width: 676px;
 z-index: 40;
 margin: 15px 0px 0px 5px;
}
.shop-imgbox:nth-child(3) {
 width: 666px;
 z-index: 30;
 margin: 30px 0px 0px 10px;
}
.shop-imgbox:nth-child(4) {
 width: 656px;
 z-index: 20;
 margin: 0px 0px 0px 15px;
}
.shop-imgbox:nth-child(5) {
 width: 646px;
 z-index: 10;
 margin: 0px 0px 0px 20px;
}
}
.noshop-card {
width: 100%;
margin-top: 40px;
padding: 0px 16px;
.noshop-image {
 width: 100%;
 height: 806px;
}
}
.stroll-fotter {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
.fot-twoimg {
 display: flex;
 flex-direction: row;
 align-items: center;
 .dislike-image {
 width: 120px;
 height: 120px;
 }
 .like-image {
 width: 120px;
 height: 120px;
 margin-left: 48px;
 }
}
.fot-text {
 color: #368BE5;
 font-size: 28px;
 margin-top: 40px;
 margin-bottom: 50px;
}
}
}</pre>
</div>
好了，小程序左滑右滑效果就说到这里了，如果大家有更好的办法请在下方留言，如果有什么不懂的可以在下面提问，有时间我会一一回复的，谢谢了！
 
第二种实现方式：
更优解决方法
GIF效果如下：
<img src="https://img2020.cnblogs.com/blog/1244003/202009/1244003-20200930104835837-212924747.gif">
附加：由于MovableView目前只支持小程序，并且图片无法完全滑出页面，h5不太适用，接下来提供第二种方法，效果比第一种方法更好，直接贴源码
<div class="cnblogs_code">
<pre>import Taro, { Component } from '@tarojs/taro';
import { View, Image, Button, Text } from '@tarojs/components';
import { observer, inject } from '@tarojs/mobx';
import { AtButton, AtFloatLayout} from 'taro-ui';
import { userRecommend, userFavorite, userFavoHistory } from '../../api/index';
import userStore from '../../store/user.store';

import './stroll.scss';

@inject('userStore')
@observer
class Stroll extends Component {
config = {
navigationBarTitleText: '逛',
disableScroll: true,
}

state = {
// 列表参数
lastId: '',
count: 20,
// 推荐商品数组
cardshow: false,
shopList: [{skuId:'',skuPicture:''}],
// 历史浏览条数
browseCount: '',
recommendCount: '',
// 按钮显示状态
dislikeshow: true,
likeshow: true,
// 提示弹窗状态
popupshow: false,
popupstate: 0,
// basicdata数据包含组件基本数据
startx: '', // 记录起始位置
starty: '', // 记录起始位置
endx: '', // 记录终点位置
endy: '', // 记录终点位置
currentPage: 0, // 默认首图的序列
// temporaryData数据包含组件临时数据
poswidth: 0, // 记录位移
posheight: 0, // 记录位移
dxangle: 0, // 拖拽角度
tracking: false, // 是否在滑动，防止多次操作，影响体验
animation: false, // 首图是否启用动画效果，默认为否
opacity: 1, // 记录首图透明度
}

componentWillMount () { }

componentWillReact () { }

componentDidShow () {
// 用户推荐列表
this.recommendList();
// 判断用户是否是第一次进入该页面,储存一个判断值
if (Taro.getStorageSync('stepState') === '') {
 this.setState({
 popupshow: true,
 popupstate: 1,
 });
}
}

// 推荐列表接口
async recommendList() {
// 第一次进来需要调用加载图
if (this.state.cardshow === false) {
 Taro.showLoading();
}
const = await userRecommend({
 lastId: this.state.lastId,
 count:this.state.count,
});
Taro.hideLoading();
if (err) {
 return;
}
if (!err&&res&&res.data) {
 this.setState({
 // 显示状态
 cardshow: true,
 currentPage: 0,
 // 历史浏览条数
 browseCount: res.data.browseCount,
 recommendCount: res.data.recommendCount,
 // 图片数组
 shopList: res.data.record,
 });
}
}

// 进入页面执行
componentDidMount() {
//登录并且没有选择性别
setTimeout(() => {
 if(this.props.userStore.hasLogin&&!this.props.userStore.hasChoiceSex){
 Taro.navigateTo({
 url:'/sub-pages/gender/gender',
 });
 }
},1500);
}

componentWillUnmount () {}

componentDidHide () {
console.log('11111',this.state.currentPage,this.state.shopList);
this.setState({
 // 数组计算
 shopList: this.state.shopList.splice(this.state.currentPage,100),
},() => {
 this.setState({
 // 序列清零
 currentPage: 0,
 },() => {
 console.log('2222',this.state.currentPage,this.state.shopList);
 });
});
}

// 首页样式切换
transformIndex (index,color) {
// console.log('transformIndex', index);
// 处理3D效果
if (index === this.state.currentPage) {
 let style = {};
 style['transform'] = 'translate3D(' + this.state.poswidth + 'px' + ',' + this.state.posheight + 'px' + ',0px)'+ 'rotate(' + this.state.dxangle + 'deg)';
 style['opacity'] = this.state.opacity;
 style['zIndex'] = 10;
 style['box-shadow'] = '0px 1px 20px 0px rgba(0,0,0,0.1)';
 style['background'] = color;
 if (this.state.animation) {
 style['transitionTimingFunction'] = 'ease';
 style['transitionDuration'] = 400 + 'ms';
 }
 // console.log('style1', style);
 return style;
}
}

// 非首页样式切换
transform (index,color) {
// console.log('transform', index);
if (index > this.state.currentPage) {
 let style = {};
 let visible = 3;
 let perIndex = index - this.state.currentPage;
 // visible可见数量前滑块的样式
 if (index <= this.state.currentPage + visible) {
 style['opacity'] = '1';
 style['transform'] = 'translate3D(0,0,' + -1 * perIndex * 10 + 'px' + ')';
 style['zIndex'] = visible - index + this.state.currentPage;
 style['transitionTimingFunction'] = 'ease';
 style['transitionDuration'] = 400 + 'ms';
 style['box-shadow'] = '0px 1px 20px 0px rgba(0,0,0,0.1)';
 style['background'] = color;
 } else {
 style['zIndex'] = '-1';
 style['transform'] = 'translate3D(0,0,' + -1 * visible * 10 + 'px' + ')';
 style['background'] = color;
 }
 // console.log('==========', index, this.state.currentPage);
 // console.log('style2', style);
 return style;
} else {
 let style = {};
 style['opacity'] = '0';
 style['transitionDuration'] = '0ms';
 // console.log('+++++++++++', index, this.state.currentPage);
 // console.log('style3', style);
 return style;
}
}

//触摸开始
touchstart (e) {
e.preventDefault();
// console.log('touchstart', e);
// 是否在滑动
if (this.state.tracking) {
 return;
}
// 是否为touch
if (e.type === 'touchstart') {
 if (e.touches.length > 1) {
 // console.log('触摸开始-----------------------touches.length > 1');
 this.setState({
 tracking: false,
 });
 return;
 } else {
 // console.log('触摸开始-----------------------startxstarty');
 // 记录起始位置
 this.setState({
 startx: e.changedTouches.clientX,
 starty: e.changedTouches.clientY,
 });
 this.setState({
 endx: e.changedTouches.clientX,
 endy: e.changedTouches.clientY,
 });
 }
}
this.setState({
 tracking: true,
 animation: false,
});
// console.log('1011');
}

// 触摸移动
touchmove (e) {
e.preventDefault();
// console.log('touchmove', e);
// 记录滑动位置
if (this.state.tracking && !this.state.animation) {
 // console.log('触摸移动-----------------------');
 if (e.type === 'touchmove') {
 // console.log('触摸移动-----------------------endxendy');
 this.setState({
 endx: e.changedTouches.clientX,
 endy: e.changedTouches.clientY,
 });
 }
 // 计算滑动值与偏移角度
 this.setState({
 poswidth: this.state.endx - this.state.startx,
 posheight: this.state.endy - this.state.starty,
 dxangle: (this.state.endx - this.state.startx)/10,
 });
 // 判断移动的距离改变按钮状态
 if (this.state.poswidth < -100) {
 this.setState({
 dislikeshow: false,
 });
 } else if (this.state.poswidth > 100) {
 this.setState({
 likeshow: false,
 });
 } else {
 this.setState({
 dislikeshow: true,
 likeshow: true,
 });
 }
}
}

touchend (id,type,e) {
e.preventDefault();
// console.log('touchend', e);
// 是否在滑动，动画
this.setState({
 tracking: false,
 animation: true
});
// 滑动结束，触发判断
// 简单判断滑动宽度超出100像素时触发滑出
if (Math.abs(this.state.poswidth) >= 100) {
 // console.log('滑动宽度超出100像素时触发滑出-----------------------');
 // 最终位移简单设定为x轴200像素的偏移
 let ratio = Math.abs(this.state.posheight / this.state.poswidth);
 this.setState({
 poswidth: this.state.poswidth >= 0 ? this.state.poswidth + 500 : this.state.poswidth - 500,
 posheight: this.state.posheight >= 0 ? Math.abs(this.state.poswidth * ratio) : -Math.abs(this.state.poswidth * ratio),
 opacity: 0,
 }, () => {
 setTimeout( () => {
 this.setState({
 // 删除第一张图片和重置样式
 currentPage: this.state.currentPage+1,
 poswidth: 0,
 posheight: 0,
 dxangle: 0,
 opacity: 1,
 animation: false,
 // 按钮状态
 dislikeshow: true,
 likeshow: true,
 // index显示
 browseCount: this.state.browseCount+1,
 },() => {
 if (this.state.currentPage === this.state.shopList.length) {
 this.setState({
 // 重置样式
 shopList: [],
 currentPage: 0,
 });
 }
 });
 },400);
 });
 // 调用接口
 if (this.state.poswidth >= 0) {
 // 喜欢接口
 this.rightLike(id,type);
 } else {
 // 不喜欢接口
 this.leftNoLike(id,type);
 }
// 不满足条件则滑入
} else {
 // console.log('滑回来-----------------------');
 this.setState({
 poswidth: 0,
 posheight: 0,
 dxangle: 0,
 });
}
}

// 不喜欢按钮
dislikebtn() {
// console.log('不喜欢');
// 不喜欢接口
this.leftNoLike(this.state.shopList.skuId,this.state.shopList.productSourceType);
this.setState({
 // 按钮状态
 dislikeshow: false,
 // 图片位移效果
 poswidth: -500,
 posheight: 100,
 dxangle: -20,
 opacity: 0,
 animation: true,
}, () => {
 setTimeout( () => {
 this.setState({
 // 删除第一张图片和重置样式
 currentPage: this.state.currentPage+1,
 poswidth: 0,
 posheight: 0,
 dxangle: 0,
 opacity: 1,
 animation: false,
 // 按钮状态
 dislikeshow: true,
 // index显示
 browseCount: this.state.browseCount+1,
 },() => {
 if (this.state.currentPage === this.state.shopList.length) {
 this.setState({
 // 重置样式
 shopList: [],
 currentPage: 0,
 });
 }
 });
 },400);
});
}

// 喜欢按钮
likebtn() {
console.log('喜欢');
// 喜欢接口
this.rightLike(this.state.shopList.skuId,this.state.shopList.productSourceType);
this.setState({
 // 按钮状态
 likeshow: false,
 // 图片位移效果
 poswidth: 500,
 posheight: 100,
 dxangle: 20,
 opacity: 0,
 animation: true,
}, () => {
 setTimeout( () => {
 this.setState({
 // 删除第一张图片和重置样式
 currentPage: this.state.currentPage+1,
 poswidth: 0,
 posheight: 0,
 dxangle: 0,
 opacity: 1,
 animation: false,
 // 按钮状态
 likeshow: true,
 // index显示
 browseCount: this.state.browseCount+1,
 },() => {
 if (this.state.currentPage === this.state.shopList.length) {
 this.setState({
 // 重置样式
 shopList: [],
 currentPage: 0,
 });
 }
 });
 },400);
});
}

// 喜欢接口
async rightLike(id,type) {
const = await userFavorite({
 skuId: id,
 favoriteStatus: 'LIKE',
 productSourceType: type,
});
}

// 不喜欢接口
async leftNoLike(id,type) {
const = await userFavorite({
 skuId: id,
 favoriteStatus: 'NOT_LIKE',
 productSourceType: type,
});
}

// 查看我喜欢的
lookMyLike() {
Taro.navigateTo({
 url:'/stroll-pages/stroll-likelist/stroll-likelist'
});
}

// 下一步
stepone() {
this.setState({
 popupstate: 2,
});
}
steptwo() {
this.setState({
 popupstate: 3,
});
}
stepthree() {
this.setState({
 popupshow: false,
});
// 改变是否第一次进入页面状态
Taro.setStorageSync('stepState', '1');
}

render() {
let cardList = this.state.shopList;
return (
 <View className='stroll-tab'>
 <View className='stroll-text'>
 <Text className='text-tip1'>慧搭脑每天为你精推荐{this.state.recommendCount}件单品</Text>
 <View className='text-tip2'>
 <Text className='t1'>左滑无感</Text>
 <Image src={require('./img/text_dislike.svg')} className='icon-image'></Image>
 <Text className='t1'>，右滑喜欢</Text>
 <Image src={require('./img/text_like.svg')} className='icon-image'></Image>
 </View>
 </View>
 {
 this.state.cardshow && cardList.length !== 0 &&
 <View className='stack'>
 {
 cardList && cardList.map((item, index) => {
 return(
 <View key={item.id} className='stack-item'
 style={this.transformIndex(index,item.picMainColor)||this.transform(index,item.picMainColor)}
 onTouchStart={this.touchstart.bind(this)}
 onTouchMove={this.touchmove.bind(this)}
 onTouchEnd={this.touchend.bind(this, item.skuId, item.productSourceType)}
 >
 <View className='item-data'>
 <Image className='imgs' mode='aspectFit' src={item.skuPicture}></Image>
 </View>
 </View>
 );
 })
 }
 <View className='card-num'>{this.state.browseCount+1}/{this.state.recommendCount}</View>
 <View className='card-btn'>
 {
 this.state.dislikeshow ?
 (<Image src={require('./img/dislike_default.png')} className='dislike-image' onClick={this.dislikebtn.bind(this)}></Image>):
 (<Image src={require('./img/dislike_light.png')} className='dislike-image'></Image>)
 }
 {
 this.state.likeshow ?
 (<Image src={require('./img/like_default.png')} className='like-image'onClick={this.likebtn.bind(this)}></Image>):
 (<Image src={require('./img/like_light.png')} className='like-image'></Image>)
 }
 </View>
 </View>
 }
 {
 this.state.cardshow && cardList.length === 0&&
 <View className='noshop-card'>
 <Image src='https://edgefix-image.edgecom.top/403EC3F8835C5521A500F04F35E3ADF7.png' className='noshop-image' mode='widthFix'></Image>
 </View>
 }
 <View className='fotter-box'>
 <Text className='fot-text' onClick={this.lookMyLike.bind(this)}>查看我喜欢的</Text>
 </View>
 {
 this.state.popupshow&&
 <View className='popup-box'>
 {
 this.state.popupstate === 1 &&
 <Image src='https://edgefix-image.edgecom.top/F8BEDD2B180FE71C05F7B6E461ECB759.png' className='stepimage1' onClick={this.stepone.bind(this)}></Image>
 }
 {
 this.state.popupstate === 2 &&
 <Image src='https://edgefix-image.edgecom.top/387AF72683F8598EACA618F1B95A0C23.png' className='stepimage2' onClick={this.steptwo.bind(this)}></Image>
 }
 {
 this.state.popupstate === 3 &&
 <Image src='https://edgefix-image.edgecom.top/90C93EEE270440031187CFDC917DF9AC.png' className='stepimage3' onClick={this.stepthree.bind(this)}></Image>
 }
 </View>
 }
 </View>
);
}
}

export default Stroll;</pre>
</div>
<div class="cnblogs_code">
<pre>page {
height: 100%;
background: #F6F6F6;
}

.stroll-tab {
width: 100%;
height: 100vh;
background: #F6F6F6;
position: relative;
overflow-x: hidden;
overflow-y: hidden;
.stroll-text {
width: 100%;
padding-top: 40px;
padding-bottom: 20px;
display: flex;
flex-direction: column;
align-items: center;
.text-tip1 {
 font-size: 28px;
 color: #333333;
}
.text-tip2 {
 display: flex;
 flex-direction: row;
 align-items: center;
 .t1 {
 font-size: 28px;
 color: #333333;
 }
 .icon-image {
 width:20px;
 height:20px;
 margin-left: 4px;
 }
}
}
.stack {
width: 100%;
height: 72.072072vh;
position: relative;
perspective: 1000px; //子元素视距
perspective-origin: 50% 150%; //子元素透视位置
-webkit-perspective: 1000px;
-webkit-perspective-origin: 50% 150%;
margin: 0;
padding: 0;
.stack-item{
 background: #fff;
 width: 686px;
 height: 72.072072vh;
 border-radius: 24px;
 overflow: hidden;
 position: absolute;
 left: 32px;
 top: 0px;
 .item-data {
 position: relative;
 width: 100%;
 height: 100%;
 .imgs {
 position: absolute;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 100%;
 display: block;
 pointer-events: none;
 }
 }
}
.card-num {
 position: absolute;
 right: 64px;
 top: 40px;
 width: 144px;
 height: 64px;
 background: rgba(0,0,0,0.3);
 border-radius: 32px;
 z-index: 100;
 font-size: 32px;
 color: #FFFFFF;
 text-align: center;
 line-height: 64px;
}
.card-btn {
 position: absolute;
 left: 0px;
 bottom: 48px;
 z-index: 20;
 width: 100%;
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: center;
 .dislike-image {
 width: 120px;
 height: 120px;
 border-radius: 50%;
 box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.05);
 }
 .like-image {
 width: 120px;
 height: 120px;
 margin-left: 48px;
 border-radius: 50%;
 box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.05);
 }
}
}
.noshop-card {
width: 100%;
padding: 0px 16px;
.noshop-image {
 width: 100%;
}
}
.fotter-box {
width: 100%;
text-align: center;
position: absolute;
bottom: 20px;
left: 0px;
.fot-text {
 color: #368BE5;
 font-size: 28px;
 padding: 10px 20px;
}
}
.popup-box {
width: 100%;
height: 100vh;
position: absolute;
left: 0;
top: 0;
background:rgba(0,0,0,0.5);
.stepimage1 {
 width: 100%;
 height: 344px;
 margin-top: 36.036036vh;
}
.stepimage2 {
 width: 100%;
 height: 300px;
 margin-top: 68.468468vh;
}
.stepimage3 {
 width: 100%;
 height: 300px;
 margin-top: 68.468468vh;
}
}
}</pre>
</div>
不论什么框架，代码都是相通的，看上方源码了解方法和逻辑就可以都适用了。
  
来源：https://www.cnblogs.com/hejun26/p/12895088.html

頁: [1]

琼殿技术论坛's Archiver

React+Taro开发小程序实现左滑喜欢右滑不喜欢效果