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


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 相关文章推荐
popdiv
Jul 14 Javascript
this[] 指的是什么内容 讨论
Mar 24 Javascript
扩展javascript的Date方法实现代码(prototype)
Nov 20 Javascript
Jquery实现由下向上展开效果的例子
Dec 08 Javascript
Javascript中的getUTCHours()方法使用详解
Jun 10 Javascript
jquery解析XML及获取XML节点名称的实现代码
May 18 Javascript
js实现五星评价功能
Mar 08 Javascript
基于js 本地存储(详解)
Aug 16 Javascript
详解vue.js下引入百度地图jsApi的两种方法
Jul 27 Javascript
Angular6 用户自定义标签开发的实现方法
Jan 08 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
微信小程序中使用 async/await的方法实例分析
May 06 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/09/01 PHP
使用php实现截取指定长度
2013/08/06 PHP
php的hash算法介绍
2014/02/13 PHP
PHP获取当前页面URL函数实例
2014/10/22 PHP
php中fgetcsv()函数用法实例
2014/11/28 PHP
PHPExcel在linux环境下导出报500错误的解决方法
2017/01/26 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
PHP+Session防止表单重复提交的解决方法
2018/04/09 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
jQuery 页面载入进度条实现代码
2009/02/08 Javascript
说明你的Javascript技术很烂的五个原因
2011/04/26 Javascript
JS来动态的修改url实现对url的增删查改
2014/09/05 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
2015/05/06 Javascript
javascript每日必学之条件分支
2016/02/17 Javascript
Jquery实现$.fn.extend和$.extend函数
2016/04/14 Javascript
js封装tab标签页实例分享
2016/12/19 Javascript
bootstrap fileinput 插件使用项目总结(经验)
2017/02/22 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
javascript 数组精简技巧小结
2020/02/26 Javascript
python numpy数组的索引和切片的操作方法
2018/10/20 Python
python实现整数的二进制循环移位
2019/03/08 Python
python 用 xlwings 库 生成图表的操作方法
2019/12/22 Python
python小程序之4名牌手洗牌发牌问题解析
2020/05/15 Python
Python利用Faiss库实现ANN近邻搜索的方法详解
2020/08/03 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
HTML5图片预览实例分享
2014/06/04 HTML / CSS
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
文科毕业生自荐书范文
2014/04/17 职场文书
求职教师自荐书
2014/06/19 职场文书
2015年安全保卫工作总结
2015/05/14 职场文书
CSS3新特性详解(五):多列columns column-count和flex布局
2021/04/30 HTML / CSS
anaconda python3.8安装后降级
2021/06/11 Python