实现拖拽列表-微信小程序
之前在网上搜索拖拽列表的实现时,发现了有好多的方法都是基于像素位置的计算实现的,这种方法要求列表元素的大小以及列表的位置有着非常严格的要求,修改和拓展起来非常的麻烦。于是我自己动手实现了一个基于页面元素定位的实现,这种方法只需要每行的高度,拓展和应用到自己的小程序里非常的简单。
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
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
实现拖拽列表-微信小程序的更多相关文章
- 使用movable-view制作可拖拽的微信小程序弹出层效果。
仿了潮汐睡眠小程序的代码.[如果有侵权联系删除 最近做的项目有个弹出层效果,类似音乐播放器那种.按照普通的做了一般感觉交互不是很优雅,设计妹子把潮汐睡眠的弹层给我看了看,感觉做的挺好,于是乘着有空仿照 ...
- 微信小程序导航:官方工具+精品教程+DEMO集合(1月7更新)
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug ...
- 微信小程序教程汇总
目前市面上在内测期间出来的一些实战类教程还是很不错的,主要还是去快速学习小程序开发的整体流程,一个组件一个组件的讲的很可能微信小程序一升级,这个组件就变了,事实本就如此,谁让现在是内测呢.我们不怕,下 ...
- 微信小程序 教程及示例
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有,转载请联系作者获得授权.微信小程序正式公测, ...
- 微信小程序资料集合
一:官方地址集合: 1:官方工具:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1476434678461 2: ...
- 近期热门微信小程序demo源码下载汇总
近期微信小程序demo源码下载汇总,乃小程序学习分析必备素材!点击标题即可下载: 即速应用首发!原创!电商商场Demo 优质微信小程序推荐 -秀人美女图 图片下载.滑动翻页 微信小程序 - 新词 GE ...
- 微信小程序踩坑集合
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
- 微信小程序开发学习资料
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- 微信小程序 -- 基于 movable-view 实现拖拽排序
微信小程序 -- 基于 movable-view 实现拖拽排序 项目基于colorui样式组件 ColorUI组件库 (color-ui.com) 1.实现效果 2. 设计思路 movable-vie ...
随机推荐
- 【tf.keras】tensorflow datasets,tfds
一些最常用的数据集如 MNIST.Fashion MNIST.cifar10/100 在 tf.keras.datasets 中就能找到,但对于其它也常用的数据集如 SVHN.Caltech101,t ...
- 数据库语言-SQL
SQL语言的功能概述 DDL语句引导词:Create(建立),Alter(修改),Drop(撤销) DML语句引导词:Insert,Delete,Update,Select DCL语句引导词:Gran ...
- 洛谷 UVA10226 Hardwood Species
洛谷 UVA10226 Hardwood Species 洛谷评测传送门 题目描述 PDF 输入格式 输出格式 输入输出样例 输入 #1复制 输出 #1复制 题目翻译: 给定若干字符串,输出格式为:( ...
- Ubuntu16.04VIM无法补全错误记录
先记录一下YouCompleteMe的安装过程. 按照教程进行安装 1. 安装 vundle # vundle是vim的包管理器,十分好用 cv@cv: ~$ git clone https://gi ...
- spring-db-事务
--都是之前各位大佬总结好的,我只是肤浅的汇总一下,结合我犯得错误,适合像我一样的萌新看 第一:@Transcation 引入的注解 package org.springframework.trans ...
- 上传图片到七牛云(服务端 node.js sdk)
大体思路 前端要上传图片到七牛云,需要有一个token进行授权操作,而获取这个上传的upload token(以下简称upToken),在服务端需要一定的身份校验,比如说:只有登录的vip用户才能拿到 ...
- GO 全面解析 json tag 篇
在处理json格式字符串的时候,经常会看到声明struct结构的时候,属性的右侧还有反引号括起来的内容.形如: type User struct { UserId int `json:"us ...
- LiveData使用
### Andorid LiveData 使用 [[_TOC_]] #### Lifycycle 使用1.继承FragmentActivity 实现LifecycleOwner接口2.声明一个Life ...
- 安装HomeBrew 失败的解决方案(Error: Fetching /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core failed!)
在安装HomeBrew(或者安装成功 执行相关指令)时遇到错误提示: Error: Failure while executing: git clone https://github.com/Home ...
- MySQL学习——管理用户权限
MySQL学习——管理用户权限 摘要:本文主要学习了使用DCL语句管理用户权限的方法. 了解用户权限 什么是用户 用户,指的就是操作和使用MySQL数据库的人.使用MySQL数据库需要用户先通过用户名 ...