之前在网上搜索拖拽列表的实现时,发现了有好多的方法都是基于像素位置的计算实现的,这种方法要求列表元素的大小以及列表的位置有着非常严格的要求,修改和拓展起来非常的麻烦。于是我自己动手实现了一个基于页面元素定位的实现,这种方法只需要每行的高度,拓展和应用到自己的小程序里非常的简单。

 
实现效果

JS

Page({

  /**
* 页面的初始数据
*/
data: {
optionList: [], movableViewInfo: {
y: 0,
showClass: 'none',
data: {}
}, pageInfo: {
rowHeight: 47,
scrollHeight: 85, startIndex: null,
scrollY: true,
readyPlaceIndex: null,
startY: 0,
selectedIndex: null,
}
}, dragStart: function (event) {
var startIndex = event.target.dataset.index
console.log('获取到的元素为', this.data.optionList[startIndex])
// 初始化页面数据
var pageInfo = this.data.pageInfo
pageInfo.startY = event.touches[0].clientY
pageInfo.readyPlaceIndex = startIndex
pageInfo.selectedIndex = startIndex
pageInfo.scrollY = false
pageInfo.startIndex = startIndex this.setData({
'movableViewInfo.y': pageInfo.startY - (pageInfo.rowHeight / 2)
})
// 初始化拖动控件数据
var movableViewInfo = this.data.movableViewInfo
movableViewInfo.data = this.data.optionList[startIndex]
movableViewInfo.showClass = "inline" this.setData({
movableViewInfo: movableViewInfo,
pageInfo: pageInfo
})
}, dragMove: function (event) {
var optionList = this.data.optionList
var pageInfo = this.data.pageInfo
// 计算拖拽距离
var movableViewInfo = this.data.movableViewInfo
var movedDistance = event.touches[0].clientY - pageInfo.startY
movableViewInfo.y = pageInfo.startY - (pageInfo.rowHeight / 2) + movedDistance
console.log('移动的距离为', movedDistance) // 修改预计放置位置
var movedIndex = parseInt(movedDistance / pageInfo.rowHeight)
var readyPlaceIndex = pageInfo.startIndex + movedIndex
if (readyPlaceIndex < 0 ) {
readyPlaceIndex = 0
}
else if (readyPlaceIndex >= optionList.length){
readyPlaceIndex = optionList.length - 1
} if (readyPlaceIndex != pageInfo.selectedIndex ) {
var selectedData = optionList[pageInfo.selectedIndex] optionList.splice(pageInfo.selectedIndex, 1)
optionList.splice(readyPlaceIndex, 0, selectedData)
pageInfo.selectedIndex = readyPlaceIndex
}
// 移动movableView
pageInfo.readyPlaceIndex = readyPlaceIndex
// console.log('移动到了索引', readyPlaceIndex, '选项为', optionList[readyPlaceIndex]) this.setData({
movableViewInfo: movableViewInfo,
optionList: optionList,
pageInfo: pageInfo
})
}, dragEnd: function (event) {
// 重置页面数据
var pageInfo = this.data.pageInfo
pageInfo.readyPlaceIndex = null
pageInfo.startY = null
pageInfo.selectedIndex = null
pageInfo.startIndex = null
pageInfo.scrollY = true
// 隐藏movableView
var movableViewInfo = this.data.movableViewInfo
movableViewInfo.showClass = 'none' this.setData({
pageInfo: pageInfo,
movableViewInfo: movableViewInfo
})
}, /**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var optionList = [
"段落1 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
"段落2 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
"段落3 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
"段落4 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
"段落5 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
"段落6 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
"段落7 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
"段落8 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
"段落9 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容"
] this.setData({
optionList: optionList
})
}, })

WXML

<view class='zhuti'>
<view class='row title-row' style='height: {{pageInfo.rowHeight}}px;'>
<view class="col1">信息</view>
<view class="col2">详情</view>
<view class="col3">排序</view>
</view> <movable-area class='movable-area'
style='display:{{movableViewInfo.showClass}}; height:{{pageInfo.scrollHeight}}%;'>
<movable-view class='row list-row movable-row'
out-of-bounds='true'
damping='999'
style='height:{{pageInfo.rowHeight}}px;'
direction="vertical"
y="{{movableViewInfo.y}}">
<view class='col1 content' >{{movableViewInfo.data}}</view>
<view class="col2" >
<icon type='info' color='Gray' size='22' />
</view>
<view class="col3" >
<icon type='download' color='Gray' size='25' />
</view>
</movable-view>
</movable-area> <scroll-view scroll-y='{{pageInfo.scrollY}}' style='height: {{pageInfo.scrollHeight}}%'>
<block wx:for='{{optionList}}'>
<view class='row list-row {{pageInfo.readyPlaceIndex == index ? "ready-place" : ""}}' style='height: {{pageInfo.rowHeight}}px;'>
<view class='col1 content' >{{item}}</view>
<view class="col2" >
<icon type='info' color='Gray' size='22'
data-index='{{index}}'
bindtap='showDetail'
/>
</view>
<view class="col3" >
<icon type='download' color='Gray' size='25'
data-index='{{index}}'
bindtouchstart='dragStart'
bindtouchmove='dragMove'
bindtouchend='dragEnd'
/>
</view>
</view>
</block>
</scroll-view>
</view>

WXSS

page {
height: 100%;
width: 100%;
} .zhuti {
height: 100%;
width: 100%; position: relative;
} .row {
height: 47px;
width: 100%; display: flex;
justify-content: space-around;
align-items: center;
} .title-row {
border-bottom: 1px solid #888888; color: #888888;
} .list-row {
padding: 8px 0px;
border-bottom: 1px solid #D9D9D9;
background-color: white;
} .movable-area {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
} .movable-row {
box-shadow: #D9D9D9 0px 0px 20px;
} .col1 {
width: 60%;
}
.col2 {
width: 10%;
}
.col3 {
width: 10%;
} .ready-place {
background-color: #CCCCCC
} .content {
font-size: 17px; white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

 

作者:HoPGoldy
链接:https://www.jianshu.com/p/d965c80fe901
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

实现拖拽列表-微信小程序的更多相关文章

  1. 使用movable-view制作可拖拽的微信小程序弹出层效果。

    仿了潮汐睡眠小程序的代码.[如果有侵权联系删除 最近做的项目有个弹出层效果,类似音乐播放器那种.按照普通的做了一般感觉交互不是很优雅,设计妹子把潮汐睡眠的弹层给我看了看,感觉做的挺好,于是乘着有空仿照 ...

  2. 微信小程序导航:官方工具+精品教程+DEMO集合(1月7更新)

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug ...

  3. 微信小程序教程汇总

    目前市面上在内测期间出来的一些实战类教程还是很不错的,主要还是去快速学习小程序开发的整体流程,一个组件一个组件的讲的很可能微信小程序一升级,这个组件就变了,事实本就如此,谁让现在是内测呢.我们不怕,下 ...

  4. 微信小程序 教程及示例

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有,转载请联系作者获得授权.微信小程序正式公测, ...

  5. 微信小程序资料集合

    一:官方地址集合: 1:官方工具:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1476434678461 2: ...

  6. 近期热门微信小程序demo源码下载汇总

    近期微信小程序demo源码下载汇总,乃小程序学习分析必备素材!点击标题即可下载: 即速应用首发!原创!电商商场Demo 优质微信小程序推荐 -秀人美女图 图片下载.滑动翻页 微信小程序 - 新词 GE ...

  7. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  8. 微信小程序开发学习资料

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  9. 微信小程序 -- 基于 movable-view 实现拖拽排序

    微信小程序 -- 基于 movable-view 实现拖拽排序 项目基于colorui样式组件 ColorUI组件库 (color-ui.com) 1.实现效果 2. 设计思路 movable-vie ...

随机推荐

  1. 基于django的个人博客网站建立(四)

    基于django的个人博客网站建立(四) 前言 网站效果可点击这里访问 今天主要添加了留言与评论在后台的管理和主页文章的分页显示,文章类别的具体展示以及之前预留链接的补充 主要内容 其实今天的内容和前 ...

  2. R-5 相关分析-卡方分析

    本节内容: 1:相关分析 2:卡方分析 一.相关分析 相关系数: 皮尔逊相关系数:一般用来计算两个连续型变量的相关系数. 肯德尔相关系数:一个连续一个分类(最好是定序变量) 斯皮尔曼相关系数:2个变量 ...

  3. HDU - 5952 Counting Cliques

    Counting Cliques HDU - 5952 OJ-ID: hdu-5952 author:Caution_X date of submission:20191110 tags:dfs,gr ...

  4. Gradle如何在任务失败后继续构建

    如果我们运行Gradle构建并且其中一项任务失败,则整个构建将立即停止.因此,我们可以快速反馈构建状态.如果我们不想这样做,并且希望Gradle执行所有任务,即使某些任务可能失败了,我们也可以使用命令 ...

  5. SVN 回滚提交的代码

    有的时候,代码提交错了,我们可以通过SVN回滚到指定的版本,然后在提交回滚后的代码,即为撤销提交. 回滚代码 重新提交刚才回滚后的代码

  6. HttpClientExtensions去了哪里

    使用HttpClient实现http请求是非常常见的方式,有一个HttpClient的拓展类HttpClientExtensions提供了更多的拓展方法,包括但不限于 PostAsJsonAsync ...

  7. Java反射03 : 获取Class的注解、修饰符、父类、接口、字段、构造器和方法

    java.lang.Class类提供了获取类的各种信息对象的静态方法. 本文转载自:https://blog.csdn.net/hanchao5272/article/details/79363921 ...

  8. ABP入门教程14 - 更新多语言

    点这里进入ABP入门教程目录 设置语种 新增语种 数据库操作 打开多语言表AbpLanguages,添加一条记录. 程序操作 在基础设施层(即JD.CRS.EntityFrameworkCore)的\ ...

  9. (办公)mysql索引

    举个例子:20多w的数据,查询语句,什么都没有查到,既没有走到主键索引,普通索引,什么都没走,走的就非常慢. 下面要加索引,并了解mysql索引的作用,以及如何使用他们索引. 介绍MysqlMySQL ...

  10. postman---postman导出python脚本

    前面一直写关于postman的一些文章,大家现在都应该简单了解,其实postman还有许多的功能,这个要大家一点点的挖掘出来了,安静在给大家分享一个关于postman导出python脚本 Postma ...