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


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 相关文章推荐
超链接的禁用属性Disabled使用示例
Jul 31 Javascript
javascript二维数组转置实例
Jan 22 Javascript
jQuery前端分页示例分享
Feb 10 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
Mar 18 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
Jul 28 Javascript
js中常用的Tab切换效果(推荐)
Aug 30 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
Sep 05 Javascript
jQuery子元素过滤选择器用法示例
Sep 09 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
JS FormData上传文件的设置方法
Jul 05 Javascript
vue axios基于常见业务场景的二次封装的实现
Sep 21 Javascript
JavaScript常用工具函数库汇总
Sep 17 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小技巧 把数组的键和值交换形成了新的数组,查找值取得键
2011/06/02 PHP
PHP、Nginx、Apache中禁止网页被iframe引用的方法
2020/10/01 PHP
php选择排序法实现数组排序实例分析
2015/02/16 PHP
php阿拉伯数字转中文人民币大写
2015/12/21 PHP
PHP Static延迟静态绑定用法分析
2016/03/16 PHP
php中序列化与反序列化详解
2017/02/13 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
关于js注册事件的常用方法
2013/04/03 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
BootStrap3学习笔记(一)之网格系统
2016/05/20 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
纯JavaScript实现实时反馈系统时间
2017/10/26 Javascript
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
React BootStrap用户体验框架快速上手
2018/03/06 Javascript
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
创建Vue项目以及引入Iview的方法示例
2018/12/03 Javascript
vue-router路由模式详解(小结)
2019/08/26 Javascript
JavaScript find()方法及返回数据实例
2020/04/30 Javascript
总结Python编程中三条常用的技巧
2015/05/11 Python
Python中pandas dataframe删除一行或一列:drop函数详解
2018/07/03 Python
详解Python利用random生成一个列表内的随机数
2019/08/21 Python
为什么说python适合写爬虫
2020/06/11 Python
Opencv常见图像格式Data Type及代码实例
2020/11/02 Python
用python对excel进行操作(读,写,修改)
2020/12/25 Python
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
UGG英国官方网站:UGG UK
2018/02/08 全球购物
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
Perfume’s Club中文官网:西班牙美妆在线零售品牌
2020/08/24 全球购物
应届生学校辅导员求职信
2013/11/07 职场文书
饮料业务员岗位职责
2013/12/15 职场文书
大学班级干部的自我评价分享
2014/02/10 职场文书
餐厅执行经理岗位职责范本
2014/02/26 职场文书
品质主管岗位职责
2014/03/16 职场文书
冬季作息时间调整通知
2015/04/24 职场文书
学校党支部公开承诺书
2015/04/30 职场文书