小程序 左滑喜欢右滑讨厌的实现
引文
发现自己好几天没更新了,今天有点空,还是做一点小整理&&记录吧。前几天,JK问我要之前做短视频的代码,收到代码后,他发出还是以前我们几个的代码质量高的感慨,才发现去年我也做了类似的事情,在android上。参考这篇文章
背景
背景是在小程序上做一个简化版的“探探”,什么是“探探”呢?大概是这样的效果。
思路
看了一下小程序的api,发现能支持到,先说思路吧。
微信提供了一个 movable-area
movable-view
-> 官方文档,他支持可移动的view -> 效果
所以上下左右滑动是支持的。注意到原形图中有倾斜,可以这样做
<view style='transform:rotate({{dx}}deg);'></view>
那么这个dx怎么得到呢,看文档提供了一个bindchange
的方法
bindchange
EventHandle
完成一次拖动后触发的事件,event.detail = {x: x, y: y, source: source},其中source表示产生移动的原因,值可为touch(拖动)、touch-out-of-bounds(超出移动范围)、out-of-bounds(超出移动范围后的回弹)、friction(惯性)和空字符串(setData)
不过支持的版本有点高,1.9.90才有,如果是bindchange,可以这样算dx
<movable-area><movable-view ...bindchange="onChange"></movable-view>
</movable-area>
onChange: function (event) {var dx = (event.detail.x - this.data.x)this.setData({ dx: dx })
}
看版本覆盖率,还有一些用户没覆盖到,向下兼容可以用另外一种写法
<movable-area ><movable-view ...catchtouchcancel="onCancel"catchtouchend="onCancel"catchtouchstart="onTouchStart"catchtouchmove="onTouchMove"></movable-view>
</movable-area>
data: {originX: 0 ,...
},
onTouchStart:function(e){this.setData({ originX: e.touches[0].pageX })
},
onTouchMove:function(e){var dx = (e.touches[0].pageX - this.data.originX) * 45 / this.data.widththis.setData({dx: dx,unlike: dx < -5,like: dx > 5})
},
onCancel: function (e) {if (this.data.like) {this.triggerEvent('like', { uid: this.data.user.uid }, {})} else if (this.data.unlike) {this.triggerEvent('unlike', { uid: this.data.user.uid }, {})}this.setData({ x: this.data.x, dx:0 })
},
然后在手指松开的时候,触发喜欢
和讨厌
的操作.到这里基本的方案就讲完了。有一些实现的问题,这里也分享下吧~
常见问题
1,缓存多少张?如何避免上下层触点混乱?
毕竟是webview,所以我只是缓存了两张而已,每一张是一层。
在wx:for中,顺便设置了layer的z-index。代码大概是这样的
<block wx:for="{{queue}}" wx:for-index="index"wx:for-item="item" wx:key="seq"><custom-widget
wx:if="{{index>=queue.length-2}}"target="{{item}}"refer="{{referSize}}"bindlike="onlike"bindunlike="onunlike"layer="{{index}}"></ustom-widget>
</block>
ustom-widget.wxml
<view style="z-index:{{layer}};">...
</view>
2,初始状态是居中,居中的x,y怎么算?
x,y要先知道根view的高宽,我用wx.getSystemInfo
-> systeminfo的接口拿了,但是在我的pixel的手机上,高度错了,发现是screenHeight没减掉虚拟按键栏的高度。
最后是这样拿的
page.wxml
<view id="root">...
</view>
page.js
Page({onReady: function () {var query = wx.createSelectorQuery();query.select('#root').boundingClientRect();query.exec((res) => {console.log("width:" + res[0].width)console.log("height:" + res[0].height)})}
})
3,看到小程序里面的x,y的单位是px,和我们用的的rpx如何换算?
在我的这篇博客中有提到H5的单位,小程序也不例外.是怎么算的呢?
看文档尺寸单位
rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素.
则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
所以iphone的宽度是320rpx,所以iphone5就是
iphone5
1px = 2.34rpx
320*2.34 = 750iphone6 p
1px = 1.81rpx
414*1.81 = 750
简单说,就是rpx就是以750为基准的单位了,那么到实际设备中,可以这样换算
var screenWidth; //第二问中获得的屏幕宽度
function px2rpx(px){return px*screenWidth/750;
}
小程序 左滑喜欢右滑讨厌的实现相关推荐
- 顺畅操作:教你微信小程序左滑实现更多功能
前言 当你在使用微信小程序时,是否曾经遇到过左滑操作是如此的顺畅,让你想起了 iPhone 上的滑动操作?左滑操作在微信小程序中已经成为了一个常见的交互方式,它能够帮助用户快速地执行某些操作,提高了用 ...
- 【探花交友DAY 08】左滑不喜欢右滑喜欢以及附近的人
1. 探花功能 1.1 功能分析 探花功能是将推荐的好友随机的通过卡片的形式展现出来,用户可以选择左滑.右滑操作,左滑:"不喜欢",右滑:"喜欢".功能和现在市 ...
- php微信小程序向下滑动,微信小程序功能实现:上滑加载下拉刷新
本篇文章给大家带来的内容是关于微信小程序功能实现:上滑加载下拉刷新,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 之前谈到文章列表的数据加载,是一次性全部加载,这样是不友好的.这章介 ...
- js判断手指的上滑,下滑,左滑,右滑,事件监听
2019独角兽企业重金招聘Python工程师标准>>> 原理:1:当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和staerY: 2:当触发touchmo ...
- 移动端html右滑空白,移动端之touch事件_上滑、下滑、左滑和右滑
开发app的前端框架有哪些 移动 原理:第一,当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY:第二,当触发touchmove事件时,在获取此时手指的横坐 ...
- 微信小程序居中、居右、居底和横向、纵向布局,文字在图片中间,网格布局
微信小程序居中.居右.横纵布局 1.水平垂直居中(相对父类控件) 方式一:水平垂直居中 父类控件: display: flex;align-items: center;//子控件垂直居中justify ...
- 微信小程序 界面从右边滑出_微信小程序--左滑右滑的乐趣
左滑 右滑 你不再是一个人 无论你是一个程序猿还是一个程序媛,每天干的事除了coding还是coding,代码不能解决的问题(什么问题自己心里还没点abcd数嘛),探探能帮你解决.最近网上特流行一款交 ...
- 微信小程序左滑删除效果的实现完整源码附效果图
效果图: 功能描述,小程序列表左滑删除功能的实现完整源代码实现: <view wx:for='{{friends}}' wx:key="" wx:if='{{groupTyp ...
- 微信小程序左滑删除(Slideview)
WEUI: https://wechat-miniprogram.github.io/weui/docs/slideview.html 小程序tree左滑编辑: json {"compone ...
最新文章
- c++类的构造函数详解
- java中处理字符编码(网页与数据库)(转)
- Spring bean加载多个配置文件
- 每天一道LeetCode-----找到所有被某个字符包围的另一个字符
- Android开发之百度地图经纬度转换地址(以及获取详细地址的方法自测成功)
- Ubuntu16.04安装nginx
- SpringBoot—Entity父子类表@Inheritance和@MappedSuperclass
- 软件测试人员应具备的素质
- 分贝、声功率级、声强级和声压级
- php跳转图片_HTML点击图片跳转到新页面怎么实现?(示例)
- Python2.7打包的exe文件反编译成py文件
- 寻找“安全圈锦鲤” | 4万粉丝,独宠你一人(倒计时2天)
- pyside2安装后打开designer.exe文件提示丢失 MSVCP140.dll的处理方法
- Navicat Premium 15导入excel表格
- fer2013的csv文件转换为ImageNet格式(以图片格式保存在各自类别的文件夹中)
- zabbix Trapper 监控项配置
- H5响应式网站制作那些事
- 微信小程序开发之文件上传下载应用场景(附Demo源码)
- matlab函数——shading函数
- ubuntu网络无法连接