当前位置: 开发笔记 > 前端 > 正文

TaroUI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码

作者：安静哒发呆 | 来源：互联网 | 2022-03-21 15:35

这篇文章主要介绍了TaroUI开发小程序实现左滑喜欢右滑不喜欢效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

Taro 就是可以用 React 语法写小程序的框架，拥有多端转换能力，一套代码可编译为微信小程序、百度小程序、支付宝小程序、H5、RN等

摘要：

年后入职了一家新公司，与前同事交接完之后，发现公司有一个四端的项目（iOS，Android，H5，小程序），iOS和安卓都实现了左滑右滑的效果，而h5和小程序端没实现，询问得知前同事因网上没找到对应的插件，相关博客也特别少，所以没做就搁置下来了。

趁这段时间相对来说比较富裕，于是乎在网上也搜索了一下，发现确实很少，但是有人提到可以用小程序可拖动组件movable-view来实现，自己尝试来一下发现可行，于是来写这篇博客记录一下，希望能帮助到后面需要用到这个功能的人！

先上效果图：

主要技术：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标签写出来；


 
 ......

二，我们可以看到文档里面有一个onChange方法，即拖动过程中触发的事件；


 
 ......
 


// 触发方法，打印参数
onChange(e) {
 console.log('参数',e);
}

我们可以看到打印出了，拖动的位置和产生移动的原因等；

三，我们接着加入开始onTouchstart，移动onTouchmove，结束onTouchcancel，onTouchend三个事件方法；

 
<--中间加入图片之类的滑动内容-->

初始数据如下：

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', 
 } 
 ] 
 }

三个方法我们可以取到移动后改变的位置，来改变喜欢与不喜欢的状态css，以及实现卡片滑动的效果：

1.触摸触发的时候，我们获取到刚刚开始触摸卡片的x，y的位置坐标；

2.在触摸滑动时，我们通过滑动后的位置-滑动前的位置，来判断距离多少来改变喜欢和不喜欢的值；

3.当手离开时，触发取消事件，我们需要把状态数据改为原始值，即回到最初的状态；

// 触摸触发 
 onTouchStart(e) { 
 console.log('222',e.touches[0].pageX); 
 this.setState({ 
 x: e.touches[0].pageX, 
 y: e.touches[0].pageY, 
 }); 
 } 
 // 触摸移动 
 onTouchMove(e) { 
 console.log('333',e.touches[0].pageX); 
 let dx = e.touches[0].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[0].pageX); 
 this.setState({ 
 x: '16', 
 y: '16', 
 like: false, 
 unlike: false, 
 }); 
 }

当我们写到这里，我们去拖动我们的卡片时，你会发现确实可以拖动，并且取消的时候会回到原点，但是同样你也会发现一个问题，就是你拖动的时候，五张卡片都被触发来移动的效果，出现了触点混乱的问题，查找问题发现卡片共用了x，y，因此我们可以给每张卡片设置独立的参数；

四，给每张卡片独立的参数并且设置卡片倾斜度效果；

1.设置倾斜度效果

rotate('+this.state.tiltAngle[index]+'deg)'}}

然后我们通过卡片移动位置计算出一个你决定合适的倾斜角度；

// 拖动后相差距离进行换算角度
let dxangle = (e.touches[0].pageX - this.state.startX) * 45 / 500;

2.设置独立的参数

方法携带索引，我们取到对应的卡片index，来改变对应卡片的数据；

同时，我们需要改变初始参数的形式为数组，我们通过索引改变对应卡片的值；

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',
 }
 ]
 }

方法我们就举一个例子，比如onTouchStart方法，我们遍历卡片数组，通过判断索引来得到是那张卡片，从而来改变对应值

// 触摸触发
 onTouchStart(index,e) {
 console.log('1111',index,e.touches[0].pageX,e.touches[0].pageY);
 // 重定义数组
 var againX = [];
 var againY = [];
 // 遍历，判断拖动的该数组的位置
 for (var i=0; i

这样，我们运行代码，发现拖动第一张卡片不会影响到后面卡片的位置了，

同时，我们现在拖动卡片删除的是数组，在实际项目中，我们在触发删除数组的地方接入接口，调用喜欢，不喜欢改变数据参数，从而也能改变数组的长度；

五，完整代码；

下面我将贴出完整的代码供大家参考

html文件：

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: [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',
 }
 ]
 }
 componentWillMount () { }
 componentWillReact () { }
 componentDidMount () {
 }
 // 触摸触发
 onTouchStart(index,e) {
 console.log('1111',index,e.touches[0].pageX,e.touches[0].pageY);
 // 重定义数组
 var againX = [];
 var againY = [];
 // 遍历，判断拖动的该数组的位置
 for (var i=0; i 50) {
 tiltAngleT[i] = dxangle,
 againX[i] = true;
 againY[i] = false;
 } else if (i == index && dxplace <= -50) {
 tiltAngleT[i] = dxangle,
 againX[i] = false;
 againY[i] = true;
 } else if (i == index && dxplace <50 && dxplace > -50) {
 tiltAngleT[i] = dxangle,
 againX[i] = false;
 againY[i] = false;
 } else {
 tiltAngleT[i] = '0',
 againX[i] = false;
 againY[i] = false;
 }
 }
 // 赋值
 this.setState({
 placeX: dxplace,
 tiltAngle: tiltAngleT,
 like: againX,
 unlike: againY,
 });
 }
 // 取消
 onCancel(index,e) {
 console.log('3333',index,e.changedTouches[0].pageX,e.changedTouches[0].pageY);
 // 赋值
 this.setState({
 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],
 });
 // 如果偏移已经达到则清除第一张图片
 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: [true,false,false,false,false],
 }, () => {
 setTimeout( () => {
 this.setState({
  tiltAngle: ['0','0','0','0','0'],
  x: ['16','16','16','16','16'],
  y: ['16','16','16','16','16'],
  unlike: [false,false,false,false,false],
  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: [true,false,false,false,false],
 }, () => {
 setTimeout( () => {
 this.setState({
  tiltAngle: ['0','0','0','0','0'],
  x: ['16','16','16','16','16'],
  y: ['16','16','16','16','16'],
  like: [false,false,false,false,false],
  shopList: this.state.shopList.splice(1,4),
 });
 },100);
 });
 }
 componentWillUnmount () { }
 componentDidShow () {
 }
 componentDidHide () { }
 render() {
 return (
 
 
  搭配师每天为你推荐5件单品
  
  右滑喜欢
  
  ，左滑不喜欢
  
  
 
 {
  this.state.shopList.length != 0&&
  
  {
  this.state.shopList&&this.state.shopList.map((item,index) => {
  return(
  
   
   
   {
   this.state.like[index]==true&&
   
   }
   {
   this.state.unlike[index]==true&&
   
   }
   
  
  );})
  }
  
 }
 {
  this.state.shopList.length === 0&&
  
  
  
 }
 
  {
  this.state.shopList.length != 0&&
  
  {
  this.state.unlike[0]==false&&
  
  }
  {
  this.state.unlike[0]==true&&
  
  }
  {
  this.state.like[0]==false&&
  
  }
  {
  this.state.like[0]==true&&
  
  }
  
  }
  查看我喜欢的
 
 
 );
 }
}
export default Stroll;

css文件：

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;
 }
 }
}

总结

到此这篇关于Taro UI开发小程序实现左滑喜欢右滑不喜欢效果的文章就介绍到这了,更多相关小程序实现左滑喜欢右滑不喜欢内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

推荐阅读

css
程序员如何优雅应对35岁职业转型？这里有深度解析

本文探讨了程序员在职业生涯中如何通过不断学习和技能提升，优雅地应对35岁左右的职业转型挑战。我们将深入分析当前热门技术趋势，并提供实用的学习路径。 ... [详细]

蜡笔小新 2024-12-20 18:26:03
js
深入理解Cookie与Session会话管理

本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息，以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制，解释其原理及应用场景。 ... [详细]

蜡笔小新 2024-12-27 18:20:43
js
PHP编程语言及其在股市中的应用

本文将深入探讨PHP编程语言的基本概念，并解释PHP概念股的含义。通过详细解析，帮助读者理解PHP在Web开发和股票市场中的重要性。 ... [详细]

蜡笔小新 2024-12-25 15:02:45
js
嵌入式开发环境搭建与文件传输指南

本文详细介绍了如何为嵌入式应用开发搭建必要的软硬件环境，并提供了通过串口和网线两种方式将文件传输到开发板的具体步骤。适合Linux开发初学者参考。 ... [详细]

蜡笔小新 2024-12-22 13:38:48
js
深入理解小程序中的Picker组件

Picker组件是一种从屏幕底部弹出的滚动选择器，支持多种选择模式，包括普通选择器、多列选择器、时间选择器、日期选择器和省市区选择器。本文将详细介绍Picker的各种属性及其应用场景。 ... [详细]

蜡笔小新 2024-12-19 13:14:53
js
Python爬虫实战：豆瓣电影Top250数据抓取

本文详细介绍了如何使用Python编写爬虫程序，从豆瓣电影Top250页面抓取电影信息。文章涵盖了从基础的网页请求到处理反爬虫机制，再到多页数据抓取的全过程，并提供了完整的代码示例。 ... [详细]

蜡笔小新 2024-12-27 16:55:07
js
360SRC安全应急响应：从漏洞提交到修复的全过程

本文详细介绍了360SRC平台处理一起关键安全事件的过程，涵盖从漏洞提交、验证、排查到最终修复的各个环节。通过这一案例，展示了360在安全应急响应方面的专业能力和严谨态度。 ... [详细]

蜡笔小新 2024-12-27 11:10:05
webkit
自己用过的一些比较有用的css3新属性【HTML】

web前端|html教程自己用过的一些比较用的css3新属性web前端-html教程css3刚推出不久，虽然大多数的css3属性在很多流行的浏览器中不支持，但我个人觉得还是要尽量开 ... [详细]

蜡笔小新 2024-12-24 19:26:54
js
使用JS、HTML5和C3创建自定义弹出窗口

本文介绍如何结合JavaScript、HTML5和C3.js来实现一个功能丰富的自定义弹出窗口。通过具体的代码示例，详细讲解了实现过程中的关键步骤和技术要点。 ... [详细]

蜡笔小新 2024-12-20 21:22:27
js
2016年10月25日数学考试：斐波那契数列与矩阵快速幂的应用

本次考试于2016年10月25日上午7:50至11:15举行，主要涉及数学专题，特别是斐波那契数列的性质及其在编程中的应用。本文将详细解析考试中的题目，并提供解题思路和代码实现。 ... [详细]

蜡笔小新 2024-12-25 13:08:21
js
脑机接口：连接未来的桥梁

脑机接口（BCI）技术正逐步将科幻变为现实，从帮助听障人士恢复听力到使瘫痪者重新站立，甚至可能将多年的学习过程压缩至瞬间。本文探讨了这一前沿技术的现状、挑战及其未来前景。 ... [详细]

蜡笔小新 2024-12-24 23:49:49
上传
深入解析TCP/IP五层协议

本文详细介绍了TCP/IP五层协议模型，包括物理层、数据链路层、网络层、传输层和应用层。每层的功能及其相互关系将被逐一解释，帮助读者理解互联网通信的原理。此外，还特别讨论了UDP和TCP协议的特点以及三次握手、四次挥手的过程。 ... [详细]

蜡笔小新 2024-12-24 14:02:48
上传
Redis 架构解析：单节点、主从复制、哨兵模式与集群部署

在项目中使用 Redis 时，了解其不同架构模式（如单节点、主从复制、哨兵模式和集群）对于确保系统的高可用性和扩展性至关重要。本文将详细探讨这些模式的特点和应用场景。 ... [详细]

蜡笔小新 2024-12-20 13:34:22
json
Python面试题精粹

本文档汇总了Python编程的基础与高级面试题目，涵盖语言特性、数据结构、算法以及Web开发等多个方面，旨在帮助开发者全面掌握Python核心知识。 ... [详细]

蜡笔小新 2024-12-19 20:26:25
view
Java安装与运行指南及学习建议

本文详细介绍了Java的安装、配置、运行流程以及有效的学习方法，旨在帮助初学者快速上手Java编程。 ... [详细]

蜡笔小新 2024-12-19 13:41:15

安静哒发呆

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章