微信小程序实现手指拖动选项排序


Posted in Javascript onApril 22, 2020

本文实例为大家分享了微信小程序实现手指拖动选项排序的具体代码,供大家参考,具体内容如下

效果:

微信小程序实现手指拖动选项排序

wxml:

<view>
 <view class="dileititle">手指移动选项排序</view>
 <view style="width:740rpx;height:80vh;overflow-y:auto;padding:0 90rpx;margin:auto;" id="movebox">
 <block wx:for="{{list}}" wx:key="index">
 <view catchtouchmove="listitemmove" catchtouchend="listitemmove" data-index="{{index}}" class="flex1 dileiitemlist" id="movelist{{index}}" style="left:0;right:0;{{nowmoveindex==index?('position:absolute;top:'+movetop+'px;height:'+itemheight+'px;'):''}}">
 <view class="{{moveoutindex==index?'changemovenow':''}}" style="height:0;transition: height 0.2s;"></view>
 <view class="ranknum">{{index+1}}</view>
 <view class="flex1" style="border-radius:10rpx;width:440rpx;position:relative;color:#fff;">
 <view style="flex:1;text-align: center;margin-right: 20rpx;padding: 20rpx 20rpx;background:#8eb1f7;border-radius:10rpx;">{{item.member.nickname}}</view>
 </view>
 </view>
 </block>
 </view>
</view>
<button class='tijiao' catchtap="lastsubmit">确定</button>

js:

let app = getApp()
app.unitgameinfo = {"members":[{"member":{"nickname":"小程序照片合成","job":"ckext"},},{"member":{"nickname":"高球丸子"},},{"member":{"nickname":"DRobertdsf","job":"黄金"},},{"member":{"nickname":"erer","job":"ckext"},},{"member":{"nickname":"just do it","job":"黄金"},},{"member":{"nickname":"888"},}],};
Page({
 data: {
 },
 onLoad: function (options) {
 var info = app.unitgameinfo,list;
 list = info.members;
 this.setData({options,info,list});
 this.getwxmlcode("#movebox",(resp)=>{
 this.setData({movebox:resp})
 setTimeout(()=>{this.getwxmlcode("#movelist0",(res)=>{
 this.setData({movelist0:res})
 var jiange = res.top-resp.top;
 var yiban = res.bottom - res.top + jiange;
 this.setData({
  itemheight:res.bottom - res.top,
  jiange:yiban, //两条中间到另一条的距离
  jianqu:resp.top-(res.bottom - res.top)/2, //位置要减去距离
 })
 })},300)
 })
 
 },
 getwxmlcode(str,cal){
 const query1 = wx.createSelectorQuery()
 query1.select(str).boundingClientRect()
 query1.selectViewport().scrollOffset()
 query1.exec((res) => {
 if(cal) cal(res[0])
 })
 },
 listitemmove(e){
 // console.log(e)
 if(e.type=="touchmove"){
 var movetop = e.touches[0].pageY-this.data.itemheight;
 var moveoutindex = parseInt((movetop-this.data.jianqu)/this.data.jiange);
 if(e.currentTarget.dataset.index<=moveoutindex) moveoutindex++;
 this.moveoutindex = moveoutindex;
 this.setData({nowmoveindex:e.currentTarget.dataset.index,movetop,moveoutindex})
 }else{
 let index = e.currentTarget.dataset.index,score = this.data.list;
 let data = {...score[index]};
 score.splice(index,1);
 if(index<=this.moveoutindex-1) this.moveoutindex--;
 score.splice(this.moveoutindex,0,data);
 this.setData({list:score,moveoutindex:-1,nowmoveindex:-1});
 }
 },
 onShow: function(){
 },
 lastsubmit(){
 console.log(this.data.list)
 },
 
})

wxss:

page{background-color: #fff;font-size:30rpx;text-align: center;color: #2952a5;}
.tijiao{
 color: #fff;font-size: 30rpx;line-height: 2.8;
 margin: 20rpx auto 20rpx;width:80vw;position: fixed;bottom: 50rpx;left: 10vw;
 background-color: #2952a5;border-radius:50rpx;
}
.dileiitemlist{justify-content: center;padding-top:30rpx;flex-wrap: wrap;}
.dileititle{font-size: 32rpx;line-height: 100rpx;}
.ranknum{width:60rpx;height: 60rpx;line-height: 60rpx;text-align: center;border-radius:50%;border:1rpx solid #2952a5;margin-right:30rpx;}
.changemovenow{width:100%;height:60px!important;}
.flex1{display:flex;align-items:center;}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
控制打印时页眉角的代码
Feb 08 Javascript
JavaScript 动态创建VML的方法
Oct 14 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
Dec 17 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
May 08 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 Javascript
深入浅析JavaScript中的Function类型
Jul 09 Javascript
JavaScript表单焦点自动切换代码
Jul 24 Javascript
jQuery控制控件文本的长度的操作方法
Dec 05 Javascript
基于jQuery实现火焰灯效果导航菜单
Jan 04 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
Jan 16 Javascript
修改Vue打包后的默认文件名操作
Aug 12 Javascript
微信小程序实现购物车功能
Nov 18 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
Apr 22 #Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
Apr 22 #Javascript
Vue computed 计算属性代码实例
Apr 22 #Javascript
js 解析 JSON 数据简单示例
Apr 21 #Javascript
react 原生实现头像滚动播放的示例
Apr 21 #Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
Apr 21 #Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
Apr 21 #Javascript
You might like
Protoss热键控制
2020/03/14 星际争霸
PHPLog php 程序调试追踪工具
2009/09/09 PHP
PHP中的float类型使用说明
2010/07/27 PHP
php中计算程序运行时间的类代码
2012/11/03 PHP
PHP实现视频文件上传完整实例
2014/08/28 PHP
php分享朋友圈的实现代码
2019/02/18 PHP
Laravel 5.5 异常处理 &amp; 错误日志的解决
2019/10/17 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
javascript 类方法定义还是有点区别
2009/04/15 Javascript
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
2013/12/16 Javascript
javascript确认框的三种使用方法
2013/12/17 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
2014/02/11 Javascript
父页面显示遮罩层弹出半透明状态的dialog
2014/03/04 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
windows下安装nodejs及框架express
2015/08/07 NodeJs
jquery获取select选中值的方法分析
2015/12/22 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
深入讲解Python编程中的字符串
2015/10/14 Python
Python基于FTP模块实现ftp文件上传操作示例
2018/04/23 Python
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
django1.11.1 models 数据库同步方法
2018/05/30 Python
python实现顺时针打印矩阵
2019/03/02 Python
Python实现随机取一个矩阵数组的某几行
2019/11/26 Python
详解HTML5中ol标签的用法
2015/09/08 HTML / CSS
Myprotein俄罗斯官网:欧洲第一运动营养品牌
2019/05/05 全球购物
JavaScript实现前端网页版倒计时
2021/03/24 Javascript
工厂门卫岗位职责
2013/11/25 职场文书
宠物店的创业计划书范文
2014/01/11 职场文书
施工安全标语
2014/06/07 职场文书
在职员工证明书
2014/09/19 职场文书