介绍
这篇文章主要为大家展示了芋头UI框架开发小程序如何实现左滑喜欢右滑不喜欢效果,内容简而易懂,希望大家可以学习一下,学习完之后肯定会有收获的,下面让小编带大家一起来看看吧。
芋头就是可以用反应语法写小程序的框架,拥有多端转换能力,一套代码可编译为微信小程序,百度小程序,支付宝小程序,H5, RN等
年后入职了一家新公司,与前同事交接完之后,发现公司有一个四端的项目(iOS、Android、H5、小程序),iOS和安卓都实现了左滑右滑的效果,而一直和小程序端没实现,询问得知前同事因网上没找到对应的插件,相关博客也特别少,所以没做就搁置下来了。
趁这段时间相对来说比较富裕,于是乎在网上也搜索了一下,发现确实很少,但是有人提到可以用小程序可拖动组件movable-view来实现,自己尝试来一下发现可行,于是来写这篇博客记录一下,希望能帮助到后面需要用到这个功能的人!
主要技术:芋头+芋头UI +反应(如果你是小程序原生或者uniapp + vue写法都差不多,可以通用)
可拖动组件文档地址:
芋头:https://taro-docs.jd.com/taro/docs/components/viewContainer/movable-view.html
微信小程序:https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html
一,我们首先把活动区和movable-view标签写出来,
& lt; movable-area>
& lt; movable-view>
……
& lt;/movable-view>
& lt;/movable-area> 二,我们可以看到文档里面有一个onChange方法,即拖动过程中触发的事件;
& lt; movable-area>
& lt; movable-view> & lt; MovableView
关键={item.id}>状态={
x: & # 39; 16 & # 39;
y: & # 39; 16 & # 39;
如:假的,
不同:假的,
shopList:(
{
img: & # 39; https://edgefix-image.edgecom.top/ABD846F6672997A7F76CD38E8A57F954.jpg& # 39;
},
{
img: & # 39; https://edgefix-image.edgecom.top/F6E5801C304CC76DA63C02C9FB38B8F4.jpg& # 39;
},
{
img: & # 39; https://edgefix-image.edgecom.top/D518952AD1DD61B2D32556E20CC527C4.jpg& # 39;
},
{
img: & # 39; https://edgefix-image.edgecom.top/1D187E28B349679908A44BBE81F3D3CA.jpg& # 39;
},
{
img: & # 39; https://edgefix-image.edgecom.top/1129A411AC9CF5F81187CBED181B6F57.jpg& # 39;
}
]
} 三个方法我们可以取到移动后改变的位置,来改变喜欢与不喜欢的状态css,以及实现卡片滑动的效果:
1。触摸触发的时候,我们获取到刚刚开始触摸卡片的x, y的位置坐标;
2。在触摸滑动时,我们通过滑动后的位置,滑动前的位置,来判断距离多少来改变喜欢和不喜欢的值;
3。当手离开时,触发取消事件,我们需要把状态数据改为原始值,即回到最初的状态;
//触摸触发>风格={{变换:& # 39;旋转(& # 39;+ this.state.tiltAngle(指数)+ & # 39;度)& # 39;}} 然后我们通过卡片移动位置计算出一个你决定合适的倾斜角度;
//拖动后相差距离进行换算角度
让dxangle=(e.touches [0]。pageX - this.state.startX) * 45/500;
2。设置独立的参数
方法携带索引,我们取到对应的卡片指数,来改变对应卡片的数据,
& lt; MovableView
关键={item.id}>状态={//开始位置
startX: & # 39; & # 39;//开始位置,最终位置距离
placeX: & # 39; & # 39;//倾斜角度
tiltAngle: [& # 39; 0 & # 39; & # 39; 0 & # 39;, & # 39; 0 & # 39;, & # 39; 0 & # 39;, & # 39; 0 & # 39;],//坐标
x: [& # 39; 16 & # 39; & # 39; 16 & # 39;, & # 39; 16 & # 39;, & # 39; 16 & # 39;, & # 39; 16 & # 39;],
y: [& # 39; 16 & # 39; & # 39; 16 & # 39;, & # 39; 16 & # 39;, & # 39; 16 & # 39;, & # 39; 16 & # 39;],//是否喜欢状态
像:假的,假的,假的,假的,假的),
不同:[假的,假的,假的,假的,假的),//推荐商品数组
shopList:(
{
id: 1、
img: & # 39; https://edgefix-image.edgecom.top/ABD846F6672997A7F76CD38E8A57F954.jpg& # 39;
},
{
id: 2
img: & # 39; https://edgefix-image.edgecom.top/F6E5801C304CC76DA63C02C9FB38B8F4.jpg& # 39;
},
{
id: 3,
img: & # 39; https://edgefix-image.edgecom.top/D518952AD1DD61B2D32556E20CC527C4.jpg& # 39;
},
{
id: 4
img: & # 39; https://edgefix-image.edgecom.top/1D187E28B349679908A44BBE81F3D3CA.jpg& # 39;
},
{
id: 5
img: & # 39; https://edgefix-image.edgecom.top/1129A411AC9CF5F81187CBED181B6F57.jpg& # 39;
}
]
}
