当前位置：移动技术网 > IT编程>开发语言>JavaScript > Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码

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

2020年06月23日 | 移动技术网IT编程 | 我要评论

河南中医学院新校区,奇剑狂法师txt,内江个人二手房网

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

摘要：

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

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

先上效果图：

主要技术：taro+taro ui+react（如果你是小程序原生或者uniapp+vue写法都差不多，可以通用）

可拖动组件文档地址：

taro:https://taro-docs.jd.com/taro/docs/components/viewcontainer/movable-view.html

微信小程序：

思路：

一，我们首先把movable-area和movable-view标签写出来；

<movable-area>
 <movable-view>
 ......
 </movable-view>
</movable-area>

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

<movable-area>
 <movable-view onchange ={this. onchange.bind(this)}>
 ......
 </movable-view>
</movable-area>

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

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

三，我们接着加入开始ontouchstart，移动ontouchmove，结束ontouchcancel，ontouchend三个事件方法；

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

初始数据如下：

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.设置倾斜度效果

style={{transform:'rotate('+this.state.tiltangle[index]+'deg)'}}

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

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

2.设置独立的参数

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

<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[index]} 
 y={this.state.y[index]} 
 direction='all' 
 outofbounds 
 classname='shop-imgbox'
>
</movableview>

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

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<this.state.shoplist.length; i++){
 if (i == index) {
 againx[i] = e.touches[0].pagex;
 againy[i] = e.touches[0].pagey;
 } else {
 againx[i] = '16';
 againy[i] = '16';
 }
 }
 // 赋值
 this.setstate({
 startx: e.touches[0].pagex,
 x: againx,
 y: againy,
 });
 }

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

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

五，完整代码；

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

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<this.state.shoplist.length; i++){
 if (i == index) {
 againx[i] = e.touches[0].pagex;
 againy[i] = e.touches[0].pagey;
 } else {
 againx[i] = '16';
 againy[i] = '16';
 }
 }
 // 赋值
 this.setstate({
 startx: e.touches[0].pagex,
 x: againx,
 y: againy,
 });
 }
 // 触摸离开
 ontouchmove(index,e) {
 console.log('2222',index,e.touches[0].pagex,e.touches[0].pagey);
 // 重定义数组
 var tiltanglet = [];
 var againx = [];
 var againy = [];
 // 拖动后相差距离
 let dxplace = e.touches[0].pagex - this.state.startx;
 // 拖动后相差距离进行换算角度
 let dxangle = (e.touches[0].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[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 (
 <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[index]} 
   y={this.state.y[index]} 
   direction='all' 
   outofbounds 
   classname='shop-imgbox'
  >
   <view classname='images-box' style={{transform:'rotate('+this.state.tiltangle[index]+'deg)'}}>
   <image src={item.img} classname='images'></image>
   {
   this.state.like[index]==true&&
   <image src={require('./img/text_like.png')} classname='imagelike'></image>
   }
   {
   this.state.unlike[index]==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[0]==false&&
  <image src={require('./img/dislike_default.png')} classname='dislike-image' onclick={this.dislikebtn.bind(this)}></image>
  }
  {
  this.state.unlike[0]==true&&
  <image src={require('./img/dislike_click.png')} classname='dislike-image'></image>
  }
  {
  this.state.like[0]==false&&
  <image src={require('./img/like_default.png')} classname='like-image' onclick={this.likebtn.bind(this)}></image>
  }
  {
  this.state.like[0]==true&&
  <image src={require('./img/like_click.png')} classname='like-image'></image>
  }
  </view>
  }
  <text classname='fot-text'>查看我喜欢的</text>
 </view>
 </view>
 );
 }
}
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开发小程序实现左滑喜欢右滑不喜欢效果的文章就介绍到这了,更多相关小程序实现左滑喜欢右滑不喜欢内容请搜索移动技术网以前的文章或继续浏览下面的相关文章希望大家以后多多支持移动技术网！

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！点击进行留言回复

微信小程序开发打开另一个小程序的实现方法

微信小程序打开另一个小程序，有两种方法：1.超链接；2.点击按钮。全局配置：跳转到其他小程序，需要在当前小程序全局配置中配置需要跳转的小程序列表,代码如下：ap... [阅读全文]
Javascript实现简易天数计算器

本文实例为大家分享了javascript实现简易天数计算器的具体代码，供大家参考，具体内容如下效果图：功能：1. 支持选择日期； 2. 自动计算闰年； 3. ... [阅读全文]
怎么理解wx.navigateTo的events参数使用详情

遇到一个这样的业务需求, 用户点击提现按钮, 跳转到提现处理结果页面, 为了避免提现请求被重复提交, 所以需要在用户点击了提交按钮以后就把按钮锁起来不给用户提交... [阅读全文]
微信小程序手动添加收货地址省市区联动

本文实例为大家分享了微信小程序手动添加收货地址省市区联动的具体代码，供大家参考，具体内容如下先看效果图html部分用小程序的piceker-view 嵌入页面的... [阅读全文]
微信jssdk踩坑之签名错误invalid signature

最近做公众号网页开发，使用微信 jssdk 页面签名时 ios 中一直报错，这才刚开始就被这只拦路虎拦住了，报错如下：然而 android 和开发者工具中好得很... [阅读全文]
基于js实现数组相邻元素上移下移

实现效果：即需要实现当前元素与相邻元素交换位置，当上移时，则是当前元素与上一元素调换位置；当下移时，则是当前元素与下一元素调换位置。实现代码：js://点击上移... [阅读全文]
JS使用for in有序获取对象数据

需要遍历对象，将key value分为两个数组，可以使用forin，但是获取到的对象中的属性及属性值排列是无序的，目的是要按顺序取出对象中的key和value值... [阅读全文]
单线程JavaScript实现异步过程详解

前两天硬着头皮在部门内部做了一次技术分享，主题如题。索性整理成文章留个纪念！要了解异步实现，首先我们得先了解：同步 & 异步同步：会逐行执行代码，会对后... [阅读全文]
JS加载解析Markdown文档过程详解

网上有很多网站会通过.md文档来做页面内容，很好奇，这是怎么做的？出于好奇，建了一个test.md文件：# hello world! asdfa asd *斜体... [阅读全文]
基于JS实现table导出Excel并保留样式

浏览器环境：谷歌浏览器1.在导出excel的时候，保存table的样式，有2种方法，①是在table的行内写style样式，②是在模板里面添加样式2.第一种方式... [阅读全文]

网友评论


验证码：

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

2020年06月23日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论