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


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 相关文章推荐
Prototype使用指南之enumerable.js
Jan 10 Javascript
文本框的字数限制功能jquery插件
Nov 24 Javascript
jquery ajax 调用失败的原因示例介绍
Sep 27 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 Javascript
JS控制文本域只读或可写属性的方法
Jun 24 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
Jul 15 Javascript
基于jQuery实现中英文切换导航条效果
Sep 18 Javascript
js css自定义分页效果
Feb 24 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
JS如何实现手机端输入验证码效果
May 13 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
Oct 31 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
php allow_url_include的应用和解释
2010/04/22 PHP
Win下如何安装PHP的APC拓展
2013/08/07 PHP
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
PHP记录和读取JSON格式日志文件
2016/07/07 PHP
php函数mkdir实现递归创建层级目录
2016/10/27 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
PHP程序员学习使用Swoole的理由
2018/06/24 PHP
Javascript 判断 object 的特定类转载
2007/02/01 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
2013/04/27 Javascript
21个JavaScript事件(Events)属性汇总
2014/12/02 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
jQuery实现文件上传进度条特效
2015/08/12 Javascript
jquery对象与DOM对象转化
2017/02/08 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
vue.js element-ui tree树形控件改iview的方法
2018/03/29 Javascript
vue调试工具vue-devtools安装及使用方法
2018/11/07 Javascript
Jquery获取radio选中值实例总结
2019/01/17 jQuery
vue无限轮播插件代码实例
2019/05/10 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
2019/08/27 Javascript
Node 代理访问的实现
2019/09/19 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
2021/02/11 Vue.js
[01:05:36]VP vs TNC Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
深入源码解析Python中的对象与类型
2015/12/11 Python
在windows下快速搭建web.py开发框架方法
2016/04/22 Python
python算法题 链表反转详解
2019/07/02 Python
python实现共轭梯度法
2019/07/03 Python
PyCharm 无法 import pandas 程序卡住的解决方式
2020/03/09 Python
Python字符串及文本模式方法详解
2020/09/10 Python
Scrapy-Redis之RedisSpider与RedisCrawlSpider详解
2020/11/18 Python
HTML5 3D书本翻页动画的实现示例
2019/08/28 HTML / CSS
北美最大的零售退货翻新商:VIP Outlet
2019/11/21 全球购物
老师自我鉴定范文
2013/12/25 职场文书
校外活动方案
2014/08/28 职场文书
2014年生产部工作总结
2014/12/17 职场文书
python 统计代码耗时的几种方法分享
2021/04/02 Python
Python实战之大鱼吃小鱼游戏的实现
2022/04/01 Python