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


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 相关文章推荐
JavaScript原型继承之基础机制分析
Aug 26 Javascript
javascript实现日历控件(年月日关闭按钮)
Dec 12 Javascript
javascipt:filter过滤介绍及使用
Sep 10 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
Jul 27 Javascript
Spring mvc 接收json对象
Dec 10 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
Aug 02 Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 Javascript
详解Vue使用命令行搭建单页面应用
May 24 Javascript
利用ES6实现单例模式及其应用详解
Dec 09 Javascript
Vue.js的复用组件开发流程完整记录
Nov 29 Javascript
原来JS还可以这样拆箱转换详解
Feb 01 Javascript
记录vue项目中遇到的一点小问题
May 14 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
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
PHP7下协程的实现方法详解
2017/12/17 PHP
PHP队列场景以及实现代码实例详解
2021/02/26 PHP
创建一个复制UBB软件信息的链接或按钮的js代码
2008/01/06 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
2015/03/03 Javascript
js代码实现无缝滚动(文字和图片)
2015/08/20 Javascript
javascript跨域请求包装函数与用法示例
2016/11/03 Javascript
微信小程序 页面跳转事件绑定的实例详解
2017/09/20 Javascript
Vue中Axios从远程/后台读取数据
2019/01/21 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
2019/05/01 Javascript
Vue+tracking.js 实现前端人脸检测功能
2020/04/16 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
js实现右键弹出自定义菜单
2020/09/08 Javascript
pyqt4教程之messagebox使用示例分享
2014/03/07 Python
python计算文本文件行数的方法
2015/07/06 Python
浅谈python3.6的tkinter运行问题
2019/02/22 Python
Python中的 is 和 == 以及字符串驻留机制详解
2019/06/28 Python
关于python导入模块import与常见的模块详解
2019/08/28 Python
python实现按首字母分类查找功能
2019/10/31 Python
python实现的多任务版udp聊天器功能案例
2019/11/13 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
Python3爬虫中pyspider的安装步骤
2020/07/29 Python
Python常用外部指令执行代码实例
2020/11/05 Python
英国折扣高尔夫商店:Discount Golf Store
2019/11/19 全球购物
意大利奢侈品牌在线精品店:Jole.it
2020/11/23 全球购物
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
学生实习介绍信
2014/01/15 职场文书
自荐信需注意事项
2014/01/25 职场文书
保卫钓鱼岛口号
2014/06/20 职场文书
党员目标管理责任书
2014/07/25 职场文书
2014年宣传思想工作总结
2014/12/10 职场文书
教导处教学工作总结
2015/08/12 职场文书
校园音乐节目广播稿
2015/08/19 职场文书
Nginx配置根据url参数重定向
2022/04/11 Servers