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


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 相关文章推荐
用jQuery中的ajax分页实现代码
Sep 20 Javascript
滚动图片效果 jquery实现回旋滚动效果
Jan 08 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
Feb 04 Javascript
一个JavaScript操作元素定位元素的实例
Oct 29 Javascript
AngularJS基础学习笔记之表达式
May 10 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
Apr 12 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
Jun 13 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
Oct 31 Javascript
vue slot 在子组件中显示父组件传递的模板
Mar 02 Javascript
ES6 如何改变JS内置行为的代理与反射
Feb 11 Javascript
Javascript如何递归遍历本地文件夹
Aug 06 Javascript
JavaScript 如何计算文本的行数的实现
Sep 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
phplot生成图片类用法详解
2015/01/06 PHP
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
PHP实现递归复制整个文件夹的类实例
2015/08/03 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
php格式文件打开的四种方法
2018/02/24 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
2019/10/16 PHP
改善用户体验的五款jQuery插件分享
2011/05/22 Javascript
基于jquery的代码显示区域自动拉长效果
2011/12/07 Javascript
原生JS实现加入收藏夹的代码
2013/10/24 Javascript
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
jQuery实现contains方法不区分大小写的方法
2015/02/13 Javascript
JavaScript生成的动态下雨背景效果实现方法
2015/02/25 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
Bootstrap CSS组件之导航(nav)
2016/12/17 Javascript
vue component组件使用方法详解
2017/07/14 Javascript
Vue2.0用户权限控制解决方案
2017/11/29 Javascript
vue头部导航动态点击处理方法
2018/11/02 Javascript
vue element-ui读取pdf文件的方法
2019/11/26 Javascript
swiper自定义分页器的样式
2020/09/14 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
[42:25]EG vs Spirit Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
python操作xlsx文件的包openpyxl实例
2018/05/03 Python
python安装pywin32clipboard的操作方法
2019/01/24 Python
python 获取微信好友列表的方法(微信web)
2019/02/21 Python
Python面向对象程序设计类的多态用法详解
2019/04/12 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
python 实现朴素贝叶斯算法的示例
2020/09/30 Python
餐饮业员工工作决心书
2014/03/11 职场文书
员工入职担保书范文
2014/04/01 职场文书
幼儿园中班下学期评语
2014/04/18 职场文书
授权委托书样本
2014/09/25 职场文书
解决Windows Server2012 R2 无法安装 .NET Framework 3.5
2022/04/29 Servers