合并代码
This commit is contained in:
parent
164c7456b0
commit
52674c2052
|
|
@ -154,6 +154,29 @@ const mine = {
|
|||
method: 'POST',
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 查看用户支付排序
|
||||
* @param {Object} param
|
||||
*/
|
||||
getPaymentOrder(param) {
|
||||
return util.request({
|
||||
url: '/user/paymentOrder/getPaymentOrder',
|
||||
method: 'GET',
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 修改用户支付排序
|
||||
* @param {Object} param
|
||||
*/
|
||||
updatePaymentOrder(param) {
|
||||
return util.request({
|
||||
url: '/user/paymentOrder/updatePaymentOrder',
|
||||
data: param.data,
|
||||
method: 'POST',
|
||||
})
|
||||
},
|
||||
}
|
||||
|
||||
export default mine
|
||||
|
|
@ -170,13 +170,12 @@ const shop = {
|
|||
*/
|
||||
saveProduct(param) {
|
||||
return util.request({
|
||||
url: `/shopify//webProduct/saveProduct`,
|
||||
url: `/shopify/webProduct/uploadProduct`,
|
||||
method: 'POST',
|
||||
data: param.data,
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
|
||||
export default shop
|
||||
|
|
@ -110,7 +110,7 @@ const video = {
|
|||
*/
|
||||
getUserInfo(param) {
|
||||
return util.request({
|
||||
url: `/home/getUserInfo`,
|
||||
url: `/user/home/getUserInfo`,
|
||||
query: param.query,
|
||||
method: 'POST',
|
||||
load: true,
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ const config = {
|
|||
// #endif
|
||||
// #ifndef H5
|
||||
// host: 'http://1641c8e0.r22.cpolar.top',
|
||||
host: 'http://192.168.0.129:8080',
|
||||
host: 'http://192.168.0.189:8080',
|
||||
// #endif
|
||||
// 上传文件二级路径
|
||||
uploadFilePath: "/homecommon/file/preview?fileName=",
|
||||
|
|
|
|||
|
|
@ -725,6 +725,14 @@
|
|||
"navigationBarTitleText" : "商家订单",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/mine/setting/sequence",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "支付顺序",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
|
|
|
|||
|
|
@ -429,7 +429,7 @@
|
|||
// 暂停有效读秒的统计
|
||||
function readSecondPause() {
|
||||
// 暂停唱片
|
||||
proxy.$refs.discRef.pause()
|
||||
proxy.$refs.discRef && proxy.$refs.discRef.pause()
|
||||
clearInterval(readSecond.timer)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -259,12 +259,12 @@
|
|||
<!-- 用户信息 -->
|
||||
<view class="userinfo df aic pr pt20 plr30 pb60">
|
||||
<view class="avatar cir">
|
||||
<image class="wh200 cir" :src="detail.userPortrait" mode="aspectFill" />
|
||||
<image class="wh200 cir" :src="detail.avatar" mode="aspectFill" />
|
||||
</view>
|
||||
|
||||
<view class="user f1 ml20 cfff">
|
||||
<view class="f36 b">{{detail.userNickname}}</view>
|
||||
<view class="f24">账号：{{detail.userAccount}}</view>
|
||||
<view class="f24">账号：{{detail.account}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,77 @@
|
|||
<template>
|
||||
<view class="app">
|
||||
<!-- 提示 -->
|
||||
<view class="title mtb30 mlr30 c333 f32 b">按住图标拖动</view>
|
||||
<!-- 拖拽 -->
|
||||
<HM-dragSorts ref="dragSorts" :list="list" :listHeight="90" />
|
||||
|
||||
<view class="footer plr30 bfff shadow">
|
||||
<view class="btn lg black" @click="handleSubmit">保存</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
onMounted,
|
||||
ref
|
||||
} from 'vue';
|
||||
// api
|
||||
import api from '@/api/index.js'
|
||||
// 工具库
|
||||
import util from '@/common/js/util.js'
|
||||
|
||||
// 列表
|
||||
const list = ref([])
|
||||
|
||||
onMounted(() => {
|
||||
// 获取用户支付顺序
|
||||
getPaymentOrder()
|
||||
})
|
||||
|
||||
// 获取用户支付顺序
|
||||
function getPaymentOrder() {
|
||||
api.mine.getPaymentOrder().then(res => {
|
||||
if (res.code == 200) {
|
||||
// 列表
|
||||
list.value = res.data.map(node => {
|
||||
node.name = {
|
||||
'balance': '余额',
|
||||
'score': '积分',
|
||||
} [node.paymentMethod]
|
||||
return node
|
||||
})
|
||||
return
|
||||
}
|
||||
util.alert({
|
||||
content: res.msg,
|
||||
showCancel: false,
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 提交
|
||||
function handleSubmit() {
|
||||
api.mine.updatePaymentOrder({
|
||||
data: list.value.map(node => node.paymentMethod),
|
||||
}).then(res => {
|
||||
if (res.code == 200) {
|
||||
util.alert('保存成功')
|
||||
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
})
|
||||
return
|
||||
}
|
||||
util.alert({
|
||||
content: res.msg,
|
||||
showCancel: false,
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
//
|
||||
</style>
|
||||
|
|
@ -160,6 +160,11 @@
|
|||
<uni-icons type="right" />
|
||||
</view>
|
||||
|
||||
<view class="line rows" @click="link('/pages/mine/setting/sequence')">
|
||||
<view class="">支付顺序</view>
|
||||
<uni-icons type="right" />
|
||||
</view>
|
||||
|
||||
<view class="line rows">
|
||||
<view class="">登录密码</view>
|
||||
<uni-icons type="right" />
|
||||
|
|
|
|||
|
|
@ -14,18 +14,117 @@
|
|||
import util from '@/common/js/util.js'
|
||||
// 表单
|
||||
const form = reactive({
|
||||
//
|
||||
categoryId: '',
|
||||
sliderImage: [],
|
||||
spec: [],
|
||||
})
|
||||
// 分类
|
||||
const category = reactive([])
|
||||
// 分类下标
|
||||
const categoryIndex = ref('')
|
||||
|
||||
onLoad((options) => {
|
||||
//
|
||||
// 添加商品规格
|
||||
handlePushSpec()
|
||||
// 获取商品分类
|
||||
getCategory()
|
||||
})
|
||||
|
||||
// 获取商品分类
|
||||
function getCategory() {
|
||||
return new Promise((resolve, reject) => {
|
||||
api.shop.getCategory({
|
||||
query: {
|
||||
categoryCode: '0'
|
||||
},
|
||||
}).then(rs => {
|
||||
if (rs.code === 200) {
|
||||
category.push(...rs.data)
|
||||
resolve(category)
|
||||
return
|
||||
}
|
||||
|
||||
util.alert({
|
||||
content: rs.msg,
|
||||
showCancel: false,
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 添加商品规格
|
||||
function handlePushSpec() {
|
||||
form.spec.push({
|
||||
// 图片
|
||||
image: '',
|
||||
// 名称
|
||||
sku: '',
|
||||
// 库存
|
||||
stock: '',
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除规格
|
||||
* @param {Object} index 下标
|
||||
*/
|
||||
function handleRemoveSpec(index) {
|
||||
form.spec.splice(index, 1)
|
||||
}
|
||||
|
||||
// 上传轮播图
|
||||
function uploadImage() {
|
||||
util.upload_image({
|
||||
type: 1,
|
||||
success: rs => {
|
||||
form.sliderImage.push(rs.value)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 上传规格图片
|
||||
function uploadSpecImage(item) {
|
||||
util.upload_image({
|
||||
type: 1,
|
||||
success: rs => {
|
||||
item.image = rs.value
|
||||
console.log('spec',form.spec)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 选择分类
|
||||
* @param {Object} ev
|
||||
*/
|
||||
function handleCate(ev) {
|
||||
let index = ev.detail.value
|
||||
if (index == categoryIndex.value) return
|
||||
categoryIndex.value = index
|
||||
form.categoryId = category[categoryIndex.value].id
|
||||
}
|
||||
|
||||
// 发布商品
|
||||
function handleSubmit() {
|
||||
const data = {
|
||||
...form
|
||||
}
|
||||
|
||||
// 轮播图
|
||||
data.sliderImage = data.sliderImage.join(',')
|
||||
|
||||
//
|
||||
api.shop.saveProduct({
|
||||
data,
|
||||
}).then(rs => {
|
||||
if (rs.code == 200) {
|
||||
return
|
||||
}
|
||||
util.alert({
|
||||
content: rs.content,
|
||||
showCancel: false,
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -36,75 +135,102 @@
|
|||
<view class="main area">
|
||||
<view class="title mtb20">商品图片</view>
|
||||
<view class="imgList mt20">
|
||||
<view class="imgs">
|
||||
<view class="imgs" v-for="(item,index) in form.sliderImage">
|
||||
<image class="wh120 br10" :src="item" mode="aspectFill" />
|
||||
<view class="close">
|
||||
<uni-icons type="clear" color="#f00" size="40rpx" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="imgs" @click="uploadImage">
|
||||
<image class="wh120" src="/static/shop-upload-image.png" mode="aspectFit" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="main area">
|
||||
<view class="line">
|
||||
<view class="title mtb20">商品标题</view>
|
||||
<textarea class="textarea mtb20" placeholder="最多输入60字符（30个汉字）" />
|
||||
<textarea v-model="form.name" class="textarea mtb20" placeholder="最多输入60字符（30个汉字）" />
|
||||
</view>
|
||||
|
||||
<view class="main area">
|
||||
<view class="line rows ptb20">
|
||||
<view class="line ptb20">
|
||||
<picker :range="category" range-key="name" @change="handleCate">
|
||||
<view class="rows">
|
||||
<view class="title w150">类目</view>
|
||||
<view class="col f1">
|
||||
<text class="placeholderStyle">点击选择</text>
|
||||
<text v-if="category[categoryIndex]">{{category[categoryIndex].name}}</text>
|
||||
<text v-else class="placeholderStyle">点击选择</text>
|
||||
</view>
|
||||
<uni-icons type="right" />
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="main area" v-for="(item,index) in form.spec" :key="index">
|
||||
<view class="line rows">
|
||||
<view class="name mtb30 f32">规格{{index + 1}}</view>
|
||||
<view class="" @click="handleRemoveSpec(index)">
|
||||
<uni-icons type="trash" size="40rpx" color="#aaa" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="line rows ptb20">
|
||||
<view class="title w150">名称</view>
|
||||
<view class="col f1">
|
||||
<input type="text" v-model="item.sku" placeholder="输入规格" placeholder-class="placeholderStyle" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="line rows ptb20">
|
||||
<view class="title w150">规格</view>
|
||||
<view class="col f1">
|
||||
<input type="text" placeholder="输入规格" placeholder-class="placeholderStyle" />
|
||||
<view class="title w150">图片</view>
|
||||
<view class="imgList mt20 f1">
|
||||
<view class="imgs" v-if="item.image" @click="uploadSpecImage(item)">
|
||||
<image class="wh120 br20" :src="item.image" mode="aspectFill" />
|
||||
</view>
|
||||
<view class="imgs" v-else @click="uploadSpecImage(item)">
|
||||
<image class="wh120" src="/static/shop-upload-image.png" mode="aspectFit" />
|
||||
</view>
|
||||
|
||||
<view class="line rows ptb20">
|
||||
<view class="title w150">价格</view>
|
||||
<view class="col f1">
|
||||
<input type="text" placeholder="输入价格" placeholder-class="placeholderStyle" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="line rows ptb20">
|
||||
<view class="title w150">库存</view>
|
||||
<view class="col f1">
|
||||
<input type="text" placeholder="输入库存" placeholder-class="placeholderStyle" />
|
||||
<input type="text" v-model="item.stock" placeholder="输入库存" placeholder-class="placeholderStyle" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="main fmid mtb20 mlr20 ptb20 c666 f34 br20 bfff" @click="handlePushSpec">
|
||||
<uni-icons type="plus" size="40rpx" />
|
||||
<view class="ml10">添加规格</view>
|
||||
</view>
|
||||
|
||||
<view class="main area">
|
||||
<view class="line rows ptb20">
|
||||
<view class="title w150">发货时间</view>
|
||||
<view class="title w150">商品价格</view>
|
||||
<view class="col f1">
|
||||
<input type="text" placeholder="输入时间" placeholder-class="placeholderStyle" />
|
||||
<input type="text" v-model="form.price" placeholder="输入价格"
|
||||
placeholder-class="placeholderStyle" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="line rows ptb20">
|
||||
<view class="title w150">所在地</view>
|
||||
<view class="title w150">商品成本价</view>
|
||||
<view class="col f1">
|
||||
<input type="text" placeholder="输入所在地" placeholder-class="placeholderStyle" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="line rows ptb20">
|
||||
<view class="title w150">详细所在地</view>
|
||||
<view class="col f1">
|
||||
<input type="text" placeholder="输入详细所在地" placeholder-class="placeholderStyle" />
|
||||
<input type="text" v-model="form.cost" placeholder="输入价格"
|
||||
placeholder-class="placeholderStyle" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="line rows ptb20">
|
||||
<view class="title w150">出让佣金</view>
|
||||
<view class="col f1">
|
||||
<input type="text" placeholder="输入价格" placeholder-class="placeholderStyle" />
|
||||
<input type="text" v-model="form.commission" placeholder="输入价格"
|
||||
placeholder-class="placeholderStyle" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="main area">
|
||||
<view class="main area" v-if="0">
|
||||
<view class="line rows ptb20">
|
||||
<view class="title w150">代金券</view>
|
||||
<view class="col f1">
|
||||
|
|
@ -113,7 +239,7 @@
|
|||
</view>
|
||||
</view>
|
||||
|
||||
<view class="main area">
|
||||
<view class="main area" v-if="0">
|
||||
<view class="title rows mtb20">
|
||||
<image src="/static/commodity-release-video.png" mode="aspectFit" class="wh45" />
|
||||
<view class="f1 ml20">添加链接到视频</view>
|
||||
|
|
@ -128,7 +254,7 @@
|
|||
<view class="fill" style="height: 210rpx;"></view>
|
||||
|
||||
<view class="footer plr30 bfff shadow">
|
||||
<view class="btn lg primary">立即上架</view>
|
||||
<view class="btn lg primary" @click="handleSubmit">立即上架</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,50 @@
|
|||
## 1.0.6（2023-12-19）
|
||||
* 修复vue3app环境下，拖动丢失行的问题
|
||||
* UVUE版本支持了多行多列，可以去看看[传送门](https://ext.dcloud.net.cn/plugin?id=15953)
|
||||
## 1.0.5（2023-01-09）
|
||||
* 修复拖动后，@onclick返回错误行下标
|
||||
* 增加push()，unshift()，splice()返回值，现在通过这三个函数修改后，会返回修改后的列表数组
|
||||
## 1.0.4（2022-11-17）
|
||||
* 新增push，unshift，splice函数，实现列表的删除插入
|
||||
* 重写了给wxs传递数据的逻辑
|
||||
## 1.0.3（2022-08-19）
|
||||
* [重写] 拖拽排序的算法，提升渲染性能
|
||||
* [修复] 修复删除行，排序出错的问题
|
||||
* [兼容] 触发长按时长属性(longTouchTime)增加兼容微信小程序(微信基础库2.14.2或以上)
|
||||
* <font color=#f00>[废弃] 因为微信循环插槽会无限警告，所以废弃插槽</font>
|
||||
* <font color=#f00>[BUG] vue3下，只支持长按拖拽</font>
|
||||
## 1.0.2（2022-08-19）
|
||||
* <font color=#f00>[重写] 拖拽排序的算法，提升渲染性能</font>
|
||||
* <font color=#f00>[废弃] 因为微信循环插槽会无限警告，所以废弃插槽</font>
|
||||
* [兼容] 触发长按时长属性(longTouchTime)增加兼容微信小程序(微信基础库2.14.2或以上)
|
||||
* <font color=#f00>[BUG] vue3下，只支持长按拖拽</font>
|
||||
## 1.0.1（2022-08-19）
|
||||
* <font color=#f00>[重写] 拖拽排序的算法，提升渲染性能</font>
|
||||
* <font color=#f00>[废弃] 因为微信循环插槽会无限警告，所以废弃插槽</font>
|
||||
* [兼容] 触发长按时长属性(longTouchTime)增加兼容微信小程序(微信基础库2.14.2或以上)
|
||||
* <font color=#f00>[BUG] vue3下，只支持长按拖拽</font>
|
||||
## 1.0.0（2022-08-19）
|
||||
* <font color=#f00>[重写] 拖拽排序的算法，提升渲染性能</font>
|
||||
* <font color=#f00>[废弃] 因为微信循环插槽会无限警告，所以废弃插槽</font>
|
||||
* [兼容] 触发长按时长属性(longTouchTime)增加兼容微信小程序(微信基础库2.14.2或以上)
|
||||
* <font color=#f00>[BUG] vue3下，只支持长按拖拽</font>
|
||||
## 0.2.5（2021-09-09）
|
||||
* 修复 wxs使用了es6语法导致编译到微信小程序出错 感谢 @小小贝 反馈
|
||||
## 0.2.4（2021-09-01）
|
||||
* 修复 iOS在整行拖拽情况下，触感反馈与点击事件冲突的问题 感谢 @粲然 反馈
|
||||
## 0.2.3（2021-08-09）
|
||||
* 修复 修改list导致拖拽报错
|
||||
## 0.2.2（2021-07-06）
|
||||
更新confirm的bug问题，这是我手贱写出的bug。
|
||||
## 0.2.1（2021-07-02）
|
||||
* 修复 数据中传入id导致不触发回调事件的问题 感谢@layu反馈
|
||||
* 优化 拖拽和位置交换动画使用translate3d 感谢@pwiz反馈
|
||||
## 0.2.0（2021-06-23）
|
||||
* 修复 页面滚动后拖拽位置不正确问题
|
||||
* 修复 页面使用多个组件时，组件间互相影响问题
|
||||
* 修复 微信小程序设置列表高度不生效的问题
|
||||
## 0.1.2（2021-02-02）
|
||||
* 修复moveRow取值错误问题 感谢@诗人的咸鱼 反馈
|
||||
## 0.1.1（2021-02-02）
|
||||
* 增加开关触感反馈参数feedbackGeneratorState
|
||||
* 发布uni_modules版本(需HX3.1.0以上)
|
||||
|
|
@ -0,0 +1,834 @@
|
|||
<template>
|
||||
<view class="HM-drag-sort" :style="{'height': ListHeight+'px','background-color': listBackgroundColor}">
|
||||
<!-- 拖拽中显示的行 -->
|
||||
<view class="rowBox-shadow" id="shadowRowBox">
|
||||
<view class="hm-row-shadow move" id="shadowRow">
|
||||
<view class="modules">
|
||||
<!-- 内容 -->
|
||||
<view class="row-content">
|
||||
<view class="row" :style="{'height': rowHeight+'px'}">
|
||||
<image v-if="shadowRow.icon" class="icon" :src="shadowRow.icon"></image>
|
||||
<text class="text">{{shadowRow.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 拖拽图标 -->
|
||||
<view class="drag-content">
|
||||
<view class="drag-icon" :style="{'height': rowHeight+'px'}">
|
||||
<uni-icons type="bars"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 拖拽列表 -->
|
||||
<scroll-view class="color scroll-view" :id="'scrollView_'+guid" :scroll-y="true"
|
||||
:style="{'height': ListHeight+'px'}" :scroll-top="scrollViewTop" @scroll="drag.scroll"
|
||||
:scroll-with-animation="scrollAnimation">
|
||||
<view class="list">
|
||||
<view v-for="(row,index) in dragList" :key="row.HMDrag_id" class="rowBox ani">
|
||||
<!-- 注意,这里的style只有在行首次渲染出来才有效,后面拖动列表,style会被wxs修改,这里的style就不会再生效了 -->
|
||||
<view class="hm-row"
|
||||
:style="{'transform': 'translate3d(0,' + (row.HMDrag_sort-index)*100 + '%,-1px)'}"
|
||||
:data-sort="row.HMDrag_sort" :data-id="row.HMDrag_id" :id="row.HMDrag_id">
|
||||
<view class="modules">
|
||||
<!-- 内容 -->
|
||||
<view class="row-content">
|
||||
<view class="row" @tap="triggerClick(row.HMDrag_sort, row)"
|
||||
:style="{'height': rowHeight+'px'}">
|
||||
<image v-if="row.icon" class="icon" :src="row.icon"></image>
|
||||
<text class="text">{{row.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 拖拽图标 -->
|
||||
<view v-if="row.disabled" class="drag-content">
|
||||
<view class="drag-icon" :style="{'height': rowHeight+'px'}">
|
||||
<uni-icons type="bars"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="drag-content" :data-id="row.HMDrag_id" @touchstart="drag.touchstart"
|
||||
@touchmove="drag.touchmove" @touchend="drag.touchend">
|
||||
<view class="drag-icon" :style="{'height': rowHeight+'px'}">
|
||||
<uni-icons type="bars"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 数据跳板 -->
|
||||
<view id="dataView" style="display: none !important;" :data-guid="guid" :prop="wxsDataStr"
|
||||
:change:prop="drag.receiveData">触发wxs跳板,请勿删除</view>
|
||||
<!-- #ifdef APP-VUE || H5 -->
|
||||
<view style="display: none !important;" :prop="scrollCommand" :change:prop="renderjs.runCommand">
|
||||
触发renderjs跳板,请勿删除</view>
|
||||
<!-- #endif -->
|
||||
|
||||
</view>
|
||||
</template>
|
||||
<script src="./drag.wxs" module="drag" lang="wxs"></script>
|
||||
<script module="renderjs" lang="renderjs">
|
||||
// APP or H5端 renderjs 实现拖拽中的自动滚动列表
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
e: null,
|
||||
ScrollView: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
runCommand(e) {
|
||||
if (e == null) {
|
||||
return
|
||||
}
|
||||
this.e = e;
|
||||
this.getScrollView(document.getElementById('scrollView_' + this.e.guid))
|
||||
window.cancelAnimationFrame(this.AnimationFrameID);
|
||||
this.AnimationFrameID = window.requestAnimationFrame(this.Animation);
|
||||
if (e.command == "stop") {
|
||||
window.cancelAnimationFrame(this.AnimationFrameID);
|
||||
return;
|
||||
}
|
||||
},
|
||||
Animation() {
|
||||
if (this.e.command == "stop") {
|
||||
window.cancelAnimationFrame(this.AnimationFrameID);
|
||||
return;
|
||||
}
|
||||
// 计算最大滚动高度
|
||||
let maxScrollTop = this.e.rowLength * this.e.rowHeight - this.e.ListHeight;
|
||||
if (this.e.command == "up") {
|
||||
this.ScrollView.scrollTop -= 3
|
||||
} else if (this.e.command == "down") {
|
||||
this.ScrollView.scrollTop += 3;
|
||||
}
|
||||
if (this.ScrollView.scrollTop < 0) {
|
||||
this.ScrollView.scrollTop = 0;
|
||||
window.cancelAnimationFrame(this.AnimationFrameID);
|
||||
}
|
||||
if (this.ScrollView.scrollTop > maxScrollTop) {
|
||||
this.ScrollView.scrollTop = maxScrollTop;
|
||||
window.cancelAnimationFrame(this.AnimationFrameID);
|
||||
}
|
||||
this.AnimationFrameID = window.requestAnimationFrame(this.Animation);
|
||||
},
|
||||
getScrollView(DOM) {
|
||||
|
||||
if (this.ScrollView != null) {
|
||||
return this.ScrollView;
|
||||
}
|
||||
let styleStr = DOM.getAttribute('style');
|
||||
|
||||
if (DOM.className == 'uni-scroll-view' && styleStr != null && styleStr.indexOf('overflow') > -1 && styleStr
|
||||
.indexOf(
|
||||
'auto') > -1) {
|
||||
this.ScrollView = DOM;
|
||||
return DOM;
|
||||
} else {
|
||||
this.getScrollView(DOM.firstChild);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
/**
|
||||
* 拖拽排序组件 HM-dragSort
|
||||
* @description 拖拽排序组件 HM-dragSort
|
||||
* @property {ObjectArray} list = [] 列表数据,数据格式[{"name": "花呗","icon": "/static/img/1.png",}]
|
||||
* @property {Boolean} feedbackGenerator = [true|false] 是否拖动触感反馈
|
||||
* @property {Boolean} longTouch = [true|false] 是否长按拖动
|
||||
* @property {Boolean} autoScroll = [true|false] 是否拖拽至边缘自动滚动列表
|
||||
* @property {Number} longTouchTime = [] 选填,触发长按时长,单位:ms,默认350ms,不支持微信小程序
|
||||
* @property {Number} listHeight = 0 选填,可拖动列表整体的高度,单位:px,默认等于窗口高度
|
||||
* @property {Number} rowHeight = 44 选填,行高,单位:px,默认44px
|
||||
* @property {String} listBackgroundColor 选填,列表底色,注意是列表的底色,不是行的底色,默认#FFFFFF
|
||||
* @event {Function} change 行位置发生改变时触发事件 返回值:{index:'原始下标',moveTo:'被拖动到的下标',moveRow:'拖动行数据'}
|
||||
* @event {Function} confirm 拖拽结束且行位置发生了改变触发事件 返回值:{index:'原始下标',moveTo:'被拖动到的下标',moveRow:'拖动行数据',list:'整个列表拖动后的数据'}
|
||||
*/
|
||||
export default {
|
||||
name: 'HM-dragSort',
|
||||
data() {
|
||||
return {
|
||||
guid: "",
|
||||
isAppH5: true, //是否APPH5 无需手动配置
|
||||
shadowRow: {}, // 存放被拖拽行数据
|
||||
// 列表数据
|
||||
dragList: [],
|
||||
ListHeight: this.listHeight, // scroll-view列表高度
|
||||
|
||||
// 控制滑动
|
||||
scrollViewTop: 0, // 滚动条位置
|
||||
scrollCommand: null, //传递renderjs数据
|
||||
isHoldTouch: false, //是否正在拖拽
|
||||
isScrolling: false, //是否正在滚动视图
|
||||
scrollAnimation: false, //滚动动画 在微信端开启
|
||||
scrollTimer: null, //定时器-控制滚动 微信小程序端使用 实现类似requestAnimationFrame效果
|
||||
wxsDataObj: [],
|
||||
wxsDataStr: "[]"
|
||||
}
|
||||
},
|
||||
// #ifdef VUE3
|
||||
emits: ['change', 'confirm'],
|
||||
// #endif
|
||||
props: {
|
||||
//是否开启拖动震动反馈
|
||||
feedbackGenerator: {
|
||||
value: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否开启长按拖动
|
||||
longTouch: {
|
||||
value: Boolean,
|
||||
default: false
|
||||
},
|
||||
autoScroll: {
|
||||
value: Boolean,
|
||||
default: true
|
||||
},
|
||||
longTouchTime: {
|
||||
value: Number,
|
||||
default: 300
|
||||
},
|
||||
// 列表数据
|
||||
list: {
|
||||
value: Array,
|
||||
default: []
|
||||
},
|
||||
// 行高度 默认44行高
|
||||
rowHeight: {
|
||||
value: Number,
|
||||
default: 44
|
||||
},
|
||||
// 组件高度 默认windowHeight满屏
|
||||
listHeight: {
|
||||
value: Number,
|
||||
default: 0
|
||||
},
|
||||
listBackgroundColor: {
|
||||
value: String,
|
||||
default: "#fff"
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
longTouch(val) {
|
||||
// #ifdef VUE3
|
||||
if (!val) {
|
||||
console.error('vue3目前仅支持长按拖拽!');
|
||||
}
|
||||
// #endif
|
||||
|
||||
this.pushWxsData('longTouch', val);
|
||||
},
|
||||
longTouchTime(val) {
|
||||
this.pushWxsData('longTouchTime', val);
|
||||
},
|
||||
feedbackGenerator(val) {
|
||||
this.pushWxsData('feedbackGenerator', val);
|
||||
},
|
||||
autoScroll(val) {
|
||||
this.pushWxsData('autoScroll', val);
|
||||
},
|
||||
list: {
|
||||
handler(val) {
|
||||
this.initList(val); //数据变化重新初始化list
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
},
|
||||
listHeight: {
|
||||
handler(val) {
|
||||
|
||||
this.ListHeight = val;
|
||||
this.pushWxsData('ListHeight', this.ListHeight);
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.guid = this.getGuid();
|
||||
|
||||
const res = uni.getSystemInfoSync();
|
||||
// #ifdef MP-WEIXIN
|
||||
let state = this.compareVersion(res.hostVersion, '2.14.2');
|
||||
if (state < 0) {
|
||||
console.error('当前微信基础库:' + res.hostVersion + ',HM-dragSorts组件仅支持微信基础库2.14.2+,请切换基础库!');
|
||||
}
|
||||
this.scrollAnimation = true;
|
||||
this.isAppH5 = false;
|
||||
// #endif
|
||||
if (this.listHeight == 0) {
|
||||
this.ListHeight = res.windowHeight;
|
||||
// #ifdef VUE3
|
||||
// vue3 要减去导航栏和状态栏高度
|
||||
if (res.windowHeight == res.screenHeight) {
|
||||
this.ListHeight = res.windowHeight - 45 - res.statusBarHeight;
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
this.pushWxsData('isAppH5', this.isAppH5);
|
||||
this.pushWxsData('ListHeight', this.ListHeight);
|
||||
this.pushWxsData('longTouch', this.longTouch);
|
||||
},
|
||||
methods: {
|
||||
getGuid() {
|
||||
function S4() {
|
||||
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
|
||||
}
|
||||
return (S4() + S4() + "_" + S4() + "_" + S4() + "_" + S4() + "_" + S4() + S4() + S4());
|
||||
},
|
||||
|
||||
initList() {
|
||||
let tmpList = JSON.parse(JSON.stringify(this.list));
|
||||
for (let i = 0, len = tmpList.length; i < len; i++) {
|
||||
// 组件内赋予临时id和sort
|
||||
if (!tmpList[i].hasOwnProperty('HMDrag_id')) {
|
||||
tmpList[i].HMDrag_id = 'HMDragId_' + this.getGuid();
|
||||
}
|
||||
tmpList[i].HMDrag_sort = i;
|
||||
}
|
||||
if (this.dragList.length > 0) {
|
||||
setTimeout(() => {
|
||||
this.dragList.splice(0, this.dragList.length, ...tmpList);
|
||||
}, 50)
|
||||
} else {
|
||||
this.dragList = JSON.parse(JSON.stringify(tmpList));
|
||||
}
|
||||
this.pushWxsData('lastInitTime', (new Date()).valueOf());
|
||||
},
|
||||
loadShadowRow(e) {
|
||||
|
||||
this.shadowRow = this.getMoveRow(e.rowSort);
|
||||
},
|
||||
|
||||
//兼容微信小程序震动
|
||||
vibrate() {
|
||||
// #ifdef MP
|
||||
uni.vibrateShort()
|
||||
// #endif
|
||||
},
|
||||
// 控制自动滚动视图
|
||||
pageScroll(e) {
|
||||
// 滚动 up-上滚动 down-下滚动
|
||||
if (e.command == "up" || e.command == "down") {
|
||||
if (!this.isHoldTouch) {
|
||||
this.isHoldTouch = true;
|
||||
this.scrollViewTop = e.scrollTop;
|
||||
}
|
||||
if (this.isScrolling) {
|
||||
return;
|
||||
};
|
||||
this.isScrolling = true;
|
||||
|
||||
if (this.isAppH5) {
|
||||
// APP端和H5端 执行renderjs的滚动
|
||||
e.ListHeight = this.ListHeight;
|
||||
e.rowHeight = this.rowHeight;
|
||||
e.rowLength = this.dragList.length;
|
||||
this.scrollCommand = e;
|
||||
return;
|
||||
}
|
||||
|
||||
// 微信小程序执行以下逻辑
|
||||
this.scrollTimer != null && clearInterval(this.scrollTimer);
|
||||
let maxHeight = this.rowHeight * this.dragList.length + 1 - this.ListHeight;
|
||||
let runTick = true;
|
||||
// 逻辑层传递到视图层需要时间，可能会出现滚动不流畅现象
|
||||
this.scrollTimer = setInterval(() => {
|
||||
if (!runTick) {
|
||||
return;
|
||||
}
|
||||
this.runScroll(e.command, maxHeight);
|
||||
runTick = false;
|
||||
this.$nextTick(function() {
|
||||
runTick = true;
|
||||
})
|
||||
}, 16.6)
|
||||
}
|
||||
// 停止滚动
|
||||
if (e.command == "stop") {
|
||||
// #ifdef APP-PLUS || H5
|
||||
// 停止指定传递到renderjs
|
||||
this.scrollCommand = e;
|
||||
// #endif
|
||||
this.isScrolling && this.stopScroll();
|
||||
}
|
||||
},
|
||||
// 微信端的滚动
|
||||
runScroll(command, maxHeight) {
|
||||
if (command == "up") {
|
||||
this.scrollViewTop -= 5
|
||||
}
|
||||
if (command == "down") {
|
||||
this.scrollViewTop += 5;
|
||||
}
|
||||
if (this.scrollViewTop < 0) {
|
||||
this.scrollViewTop = 0;
|
||||
clearInterval(this.scrollTimer);
|
||||
}
|
||||
if (this.scrollViewTop > maxHeight) {
|
||||
this.scrollViewTop = maxHeight;
|
||||
clearInterval(this.scrollTimer);
|
||||
}
|
||||
},
|
||||
//停止滚动
|
||||
stopScroll() {
|
||||
this.scrollTimer != null && clearInterval(this.scrollTimer);
|
||||
this.isScrolling = false;
|
||||
this.scrollingtop = 0;
|
||||
},
|
||||
//
|
||||
getMoveRow(HMDrag_sort) {
|
||||
for (let i = 0, len = this.dragList.length; i < len; i++) {
|
||||
if (this.dragList[i].HMDrag_sort == HMDrag_sort) {
|
||||
return JSON.parse(JSON.stringify(this.dragList[i]));
|
||||
}
|
||||
}
|
||||
},
|
||||
//
|
||||
triggerClick(index, row) {
|
||||
let tmpRow = JSON.parse(JSON.stringify(row));
|
||||
// 清除临时id和sort
|
||||
delete tmpRow.HMDrag_id;
|
||||
delete tmpRow.HMDrag_sort;
|
||||
this.$emit('onclick', {
|
||||
index: index,
|
||||
row: JSON.parse(JSON.stringify(tmpRow))
|
||||
});
|
||||
},
|
||||
change(e) {
|
||||
e.moveRow = this.getMoveRow(e.index);
|
||||
// 清除组件临时赋予的id
|
||||
delete e.moveRow.HMDrag_id;
|
||||
delete e.moveRow.HMDrag_sort;
|
||||
this.$emit('change', e);
|
||||
},
|
||||
sort(e) {
|
||||
this.stopScroll();
|
||||
this.isHoldTouch = false;
|
||||
let moveRow = this.getMoveRow(e.index);
|
||||
// 检测清除临时id和sort
|
||||
delete moveRow.HMDrag_id;
|
||||
delete moveRow.HMDrag_sort;
|
||||
|
||||
let list = JSON.parse(JSON.stringify(this.dragList));
|
||||
let tmpList = [];
|
||||
for (let i = 0, len = list.length; i < len; i++) {
|
||||
// 检测清除临时id和sort
|
||||
delete list[i].HMDrag_id;
|
||||
delete list[i].HMDrag_sort;
|
||||
let index = e.sortArray[i];
|
||||
this.dragList[i].HMDrag_sort = index;
|
||||
tmpList[index] = list[i];
|
||||
}
|
||||
// 触发组件confirm 并传递数据
|
||||
this.$emit('confirm', {
|
||||
list: tmpList,
|
||||
index: e.index,
|
||||
moveTo: e.offset,
|
||||
moveRow: moveRow
|
||||
});
|
||||
|
||||
},
|
||||
getNowList() {
|
||||
let list = JSON.parse(JSON.stringify(this.dragList));
|
||||
let tmpList = [];
|
||||
for (let i = 0, len = list.length; i < len; i++) {
|
||||
let tmpSotr = list[i].HMDrag_sort;
|
||||
tmpList[tmpSotr] = list[i];
|
||||
// 检测清除临时id和sort
|
||||
delete tmpList[tmpSotr].HMDrag_id;
|
||||
delete tmpList[tmpSotr].HMDrag_sort;
|
||||
}
|
||||
return tmpList;
|
||||
},
|
||||
splice() {
|
||||
let deleteIndex = arguments[0];
|
||||
let deleteLength = arguments[1];
|
||||
let len = arguments.length;
|
||||
let waitPushList = [];
|
||||
for (let i = 2; i < len; i++) {
|
||||
let newRow = arguments[i]
|
||||
newRow.HMDrag_id = 'HMDragId_' + this.getGuid();
|
||||
newRow.HMDrag_sort = deleteIndex + i - 2;
|
||||
waitPushList.push(newRow);
|
||||
}
|
||||
let minDeleteSort = deleteIndex;
|
||||
let maxDeleteSort = deleteLength > 0 ? deleteIndex + deleteLength - 1 : deleteIndex;
|
||||
let offsetSort = waitPushList.length - deleteLength;
|
||||
let deleteIndexArray = [];
|
||||
|
||||
for (let i = this.dragList.length - 1; i >= 0; i--) {
|
||||
let row = this.dragList[i];
|
||||
let rowSort = row.HMDrag_sort;
|
||||
// 跳过
|
||||
if (rowSort < minDeleteSort) {
|
||||
continue;
|
||||
}
|
||||
// 删除
|
||||
if (deleteLength > 0 && rowSort >= minDeleteSort && rowSort <= maxDeleteSort) {
|
||||
this.dragList.splice(i, 1);
|
||||
continue;
|
||||
}
|
||||
if (offsetSort != 0 && rowSort >= maxDeleteSort) {
|
||||
let newSort = rowSort + offsetSort;
|
||||
this.dragList[i].HMDrag_sort = newSort;
|
||||
|
||||
}
|
||||
}
|
||||
this.dragList.push(...waitPushList);
|
||||
this.pushNewSort();
|
||||
|
||||
let list = JSON.parse(JSON.stringify(this.dragList));
|
||||
let tmpList = this.getNowList();
|
||||
return tmpList;
|
||||
},
|
||||
push() {
|
||||
let len = arguments.length;
|
||||
let waitPushList = [];
|
||||
let startSotr = this.dragList.length;
|
||||
for (let i = 0; i < len; i++) {
|
||||
let newRow = arguments[i]
|
||||
newRow.HMDrag_id = 'HMDragId_' + this.getGuid();
|
||||
newRow.HMDrag_sort = startSotr + i;
|
||||
waitPushList.push(newRow);
|
||||
}
|
||||
this.dragList.push(...waitPushList);
|
||||
this.pushNewSort();
|
||||
let tmpList = this.getNowList();
|
||||
return tmpList;
|
||||
},
|
||||
unshift() {
|
||||
let len = arguments.length;
|
||||
let waitPushList = [];
|
||||
for (let i = 0; i < len; i++) {
|
||||
let newRow = arguments[i]
|
||||
newRow.HMDrag_id = 'HMDragId_' + this.getGuid();
|
||||
newRow.HMDrag_sort = i;
|
||||
waitPushList.push(newRow);
|
||||
}
|
||||
for (let i = this.dragList.length - 1; i >= 0; i--) {
|
||||
let row = this.dragList[i];
|
||||
let rowSort = row.HMDrag_sort;
|
||||
let newSort = rowSort + len;
|
||||
this.dragList[i].HMDrag_sort = newSort;
|
||||
}
|
||||
this.dragList.push(...waitPushList);
|
||||
this.pushNewSort();
|
||||
let tmpList = this.getNowList();
|
||||
return tmpList;
|
||||
},
|
||||
pushNewSort() {
|
||||
let sortArray = [];
|
||||
for (let i = 0, len = this.dragList.length; i < len; i++) {
|
||||
sortArray.push(this.dragList[i].HMDrag_sort);
|
||||
}
|
||||
this.pushWxsData('sortArray', sortArray);
|
||||
this.pushWxsData('lastInitTime', (new Date()).valueOf());
|
||||
},
|
||||
pushWxsData(key = null, val = null) {
|
||||
this.wxsDataObj.splice(0, 8, ['guid', this.guid],
|
||||
['listLength', this.dragList.length],
|
||||
['ListHeight', this.ListHeight],
|
||||
['isAppH5', this.isAppH5],
|
||||
['longTouch', this.longTouch],
|
||||
['longTouchTime', this.longTouchTime],
|
||||
['feedbackGenerator', this.feedbackGenerator],
|
||||
['autoScroll', this.autoScroll]);
|
||||
let index = -1;
|
||||
let sotrArrayIndex = -1;
|
||||
for (let i = 0; i < this.wxsDataObj.length; i++) {
|
||||
if (this.wxsDataObj[i][0] == key) {
|
||||
index = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (index > -1) {
|
||||
this.wxsDataObj[index][1] = val;
|
||||
if (key == 'sortArray') {
|
||||
sotrArrayIndex = index;
|
||||
}
|
||||
} else {
|
||||
this.wxsDataObj.push([key, val]);
|
||||
if (key == 'sortArray') {
|
||||
sotrArrayIndex = this.wxsDataObj.length - 1;
|
||||
}
|
||||
}
|
||||
|
||||
if (this.guid == "") {
|
||||
return;
|
||||
}
|
||||
this.wxsDataStr = JSON.stringify(this.wxsDataObj);
|
||||
},
|
||||
compareVersion(v1, v2) {
|
||||
v1 = v1.split('.')
|
||||
v2 = v2.split('.')
|
||||
const len = Math.max(v1.length, v2.length)
|
||||
|
||||
while (v1.length < len) {
|
||||
v1.push('0')
|
||||
}
|
||||
while (v2.length < len) {
|
||||
v2.push('0')
|
||||
}
|
||||
for (let i = 0; i < len; i++) {
|
||||
const num1 = parseInt(v1[i])
|
||||
const num2 = parseInt(v2[i])
|
||||
|
||||
if (num1 > num2) {
|
||||
return 1
|
||||
} else if (num1 < num2) {
|
||||
return -1
|
||||
}
|
||||
}
|
||||
return 0
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
//默认
|
||||
$row-background-color: #fff;
|
||||
$border-color :#c8c7cb;
|
||||
$shadow-color-moveing :rgba(0, 0, 0, 0.5);
|
||||
$drag-icon-color: #c7c7cb;
|
||||
$drag-icon-color-disabled: #e7e7eb;
|
||||
//Dark模式
|
||||
$Dark-row-background-color: #000;
|
||||
$Dark-border-color :#3d3d40;
|
||||
$Dark-shadow-color-moveing :rgba(0, 0, 0, 0.5);
|
||||
$Dark-drag-icon-color: #c7c7cb;
|
||||
$Dark-drag-icon-color-disabled: #e7e7eb;
|
||||
|
||||
//字体图标 拖拽图标
|
||||
@font-face {
|
||||
font-family: "HM-DS-font";
|
||||
src: url('data:font/truetype;charset=utf-8;base64,AAEAAAANAIAAAwBQRkZUTYqxv5sAAAYsAAAAHEdERUYAKQAKAAAGDAAAAB5PUy8yPVJI1gAAAVgAAABWY21hcAAP6o8AAAHAAAABQmdhc3D//wADAAAGBAAAAAhnbHlmwsmUEgAAAxAAAAA0aGVhZBgr3I8AAADcAAAANmhoZWEH3gOFAAABFAAAACRobXR4DAAAAAAAAbAAAAAQbG9jYQAaAAAAAAMEAAAACm1heHABEQAYAAABOAAAACBuYW1lKeYRVQAAA0QAAAKIcG9zdEdJTj8AAAXMAAAANwABAAAAAQAAXdXjiV8PPPUACwQAAAAAANqGzEkAAAAA2obMSQAAALsEAAJFAAAACAACAAAAAAAAAAEAAAOA/4AAXAQAAAAAAAQAAAEAAAAAAAAAAAAAAAAAAAAEAAEAAAAEAAwAAwAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5uTm5AOA/4AAXAOAAIAAAAABAAAAAAAABAAAAAAAAAAEAAAABAAAAAAAAAMAAAADAAAAHAABAAAAAAA8AAMAAQAAABwABAAgAAAABAAEAAEAAObk//8AAObk//8ZHwABAAAAAAAAAQYAAAEAAAAAAAAAAQIAAAACAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABoAAAADAAAAuwQAAkUAAwAHAAsAABEhFSEVIRUhFSEVIQQA/AAEAPwABAD8AAJFRlxGXEYAAAAAAAASAN4AAQAAAAAAAAAVACwAAQAAAAAAAQAIAFQAAQAAAAAAAgAHAG0AAQAAAAAAAwAIAIcAAQAAAAAABAAIAKIAAQAAAAAABQALAMMAAQAAAAAABgAIAOEAAQAAAAAACgArAUIAAQAAAAAACwATAZYAAwABBAkAAAAqAAAAAwABBAkAAQAQAEIAAwABBAkAAgAOAF0AAwABBAkAAwAQAHUAAwABBAkABAAQAJAAAwABBAkABQAWAKsAAwABBAkABgAQAM8AAwABBAkACgBWAOoAAwABBAkACwAmAW4ACgBDAHIAZQBhAHQAZQBkACAAYgB5ACAAaQBjAG8AbgBmAG8AbgB0AAoAAApDcmVhdGVkIGJ5IGljb25mb250CgAAaQBjAG8AbgBmAG8AbgB0AABpY29uZm9udAAAUgBlAGcAdQBsAGEAcgAAUmVndWxhcgAAaQBjAG8AbgBmAG8AbgB0AABpY29uZm9udAAAaQBjAG8AbgBmAG8AbgB0AABpY29uZm9udAAAVgBlAHIAcwBpAG8AbgAgADEALgAwAABWZXJzaW9uIDEuMAAAaQBjAG8AbgBmAG8AbgB0AABpY29uZm9udAAARwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABzAHYAZwAyAHQAdABmACAAZgByAG8AbQAgAEYAbwBuAHQAZQBsAGwAbwAgAHAAcgBvAGoAZQBjAHQALgAAR2VuZXJhdGVkIGJ5IHN2ZzJ0dGYgZnJvbSBGb250ZWxsbyBwcm9qZWN0LgAAaAB0AHQAcAA6AC8ALwBmAG8AbgB0AGUAbABsAG8ALgBjAG8AbQAAaHR0cDovL2ZvbnRlbGxvLmNvbQAAAgAAAAAAAAAKAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAEAAAAAQACAQIMZHJhZ3NlcXVlbmNlAAAAAAH//wACAAEAAAAMAAAAFgAAAAIAAQADAAMAAQAEAAAAAgAAAAAAAAABAAAAANWkJwgAAAAA2obMSQAAAADahsxJ') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "HM-DS-font" !important;
|
||||
font-style: normal;
|
||||
|
||||
&.icon-drag {
|
||||
&:before {
|
||||
content: "\e6e4";
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 定义颜色 start
|
||||
//默认颜色
|
||||
.color,
|
||||
.rowBox-shadow {
|
||||
&.scroll-view {
|
||||
// border-bottom: 1rpx $border-color solid;
|
||||
// border-top: 1rpx $border-color solid;
|
||||
}
|
||||
|
||||
.hm-row-shadow,
|
||||
.hm-row {
|
||||
.modules {
|
||||
.row-content {
|
||||
.row {
|
||||
border-bottom: solid 1rpx $border-color;
|
||||
background-color: $row-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
.drag-content {
|
||||
.drag-icon {
|
||||
border-bottom: solid 1rpx $border-color;
|
||||
background-color: $row-background-color;
|
||||
|
||||
.iconfont {
|
||||
color: $drag-icon-color;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
color: $drag-icon-color-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.move {
|
||||
box-shadow: 0 1px 5px $shadow-color-moveing;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 暗黑模式
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
//Dark模式
|
||||
.color .rowBox-shadow {
|
||||
&.scroll-view {
|
||||
border-bottom: 1rpx $Dark-border-color solid;
|
||||
border-top: 1rpx $Dark-border-color solid;
|
||||
}
|
||||
|
||||
.hm-row-shadow,
|
||||
.hm-row {
|
||||
.modules {
|
||||
.row-content {
|
||||
.row {
|
||||
border-bottom: solid 1rpx $Dark-border-color;
|
||||
background-color: $Dark-row-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
.drag-content {
|
||||
.drag-icon {
|
||||
border-bottom: solid 1rpx $Dark-border-color;
|
||||
background-color: $Dark-row-background-color;
|
||||
|
||||
.iconfont {
|
||||
color: $Dark-drag-icon-color;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
color: $Dark-drag-icon-color-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.move {
|
||||
box-shadow: 0 1px 5px $Dark-shadow-color-moveing;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 定义颜色 end
|
||||
.HM-drag-sort {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.scroll-view {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.rowBox,
|
||||
.rowBox-shadow {
|
||||
width: 100%;
|
||||
|
||||
.hm-row-shadow,
|
||||
.hm-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
|
||||
.modules {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
|
||||
.row-content {
|
||||
width: 100%;
|
||||
flex-shrink: 1;
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 12px;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
.icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 6px;
|
||||
margin-right: 13px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drag-content {
|
||||
flex-shrink: 0;
|
||||
|
||||
.drag-icon {
|
||||
width: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
.iconfont {
|
||||
font-size: 22px;
|
||||
color: #c7c7cb;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hm-row-shadow {
|
||||
|
||||
&.move {
|
||||
opacity: 0.8;
|
||||
|
||||
view {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hm-row {
|
||||
opacity: 1;
|
||||
|
||||
&.hide {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.ani {
|
||||
transition: transform 0.2s;
|
||||
-webkit-transition: transform 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.hm-row {
|
||||
view {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rowBox-shadow {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
display: none;
|
||||
|
||||
&.show {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
&.hide {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// transform-style:preserve-3d;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,371 @@
|
|||
|
||||
|
||||
var scrollTop = {}; //滚动条位置
|
||||
// 排序列表
|
||||
var sortList={};
|
||||
var isMove = false; //是否可拖动 长按事件控制切换这个状态
|
||||
var touchTimer = false; //长按事件定时器
|
||||
// 当页面有多个当前组件时，guid用来识别当前的列表的。因为一个页面内多个组件的wxs作用域相同。
|
||||
|
||||
|
||||
function setScrollTop(tmpGuid) {
|
||||
if (typeof scrollTop[tmpGuid] == "undefined") {
|
||||
scrollTop[tmpGuid] = 0;
|
||||
}
|
||||
}
|
||||
|
||||
function scroll(event, instance) {
|
||||
var dataView = instance.selectComponent('#dataView');
|
||||
var viewData = dataView.getDataset();
|
||||
setScrollTop(viewData.guid)
|
||||
scrollTop[viewData.guid] = event.detail.scrollTop;
|
||||
}
|
||||
|
||||
function initVar(state, instance) {
|
||||
var dataView = instance.selectComponent('#dataView');
|
||||
var viewData = dataView.getDataset();
|
||||
// 读取配置项
|
||||
// 获取scroll-view id
|
||||
config = All_Config[viewData.guid];
|
||||
|
||||
setScrollTop(config.guid);
|
||||
state.initscrollTop = scrollTop[config.guid];
|
||||
|
||||
}
|
||||
function getRowSort(findId,instance){
|
||||
for (var i = 0; i < sortList[config.guid].length; i++) {
|
||||
if(sortList[config.guid][i].id==findId){
|
||||
currentRowView = sortList[config.guid][i].rowView;
|
||||
return sortList[config.guid][i].lastSort;
|
||||
}
|
||||
}
|
||||
}
|
||||
var shadowRowBoxView=null;
|
||||
var shadowRowView = null;
|
||||
var currentRowView=null;
|
||||
var rowSort=0;
|
||||
var sorting = false;
|
||||
function touchstart(event, instance) {
|
||||
if(sorting){
|
||||
return ;
|
||||
}
|
||||
sorting = true;
|
||||
// 兼容setTimeout
|
||||
if(typeof setTimeout ==="undefined" && typeof instance.setTimeout !== 'undefined'){
|
||||
setTimeout = instance.setTimeout;
|
||||
clearTimeout = instance.clearTimeout;
|
||||
}
|
||||
|
||||
isMove = false;
|
||||
var rowData = event.instance.getDataset();
|
||||
var state = instance.getState();
|
||||
if (event.touches.length == 1) {
|
||||
state.point = event.touches[0];
|
||||
|
||||
state.islongTap = true;
|
||||
state.rowData = rowData;
|
||||
//读取数据
|
||||
initVar(state, instance);
|
||||
}
|
||||
var rowStyle = event.instance.getComputedStyle(['height']);
|
||||
config.rowHeight = parseFloat(rowStyle.height); //获取行高
|
||||
// 计算shadowRow.style.top
|
||||
|
||||
rowSort = getRowSort(rowData.id,instance);
|
||||
var shadowRowTop = rowSort * config.rowHeight;
|
||||
shadowRowTop = shadowRowTop - scrollTop[config.guid];
|
||||
// 加载shadowRow数据
|
||||
instance.callMethod("loadShadowRow", {
|
||||
rowSort: rowSort
|
||||
});
|
||||
state.shadowRowTop = shadowRowTop;
|
||||
// 设置shadowRow初始位置
|
||||
shadowRowBoxView = instance.selectComponent('#shadowRowBox');
|
||||
shadowRowBoxView.setStyle({
|
||||
'top': shadowRowTop + 'px'
|
||||
})
|
||||
shadowRowView = instance.selectComponent('#shadowRow')
|
||||
//长按事件
|
||||
if (config.longTouch) {
|
||||
touchTimer && clearTimeout(touchTimer);
|
||||
touchTimer = setTimeout(function() {
|
||||
longpress(event, instance);
|
||||
}, config.longTouchTime)
|
||||
}
|
||||
}
|
||||
|
||||
function longpress(event, instance) {
|
||||
if (config.longTouch) {
|
||||
isMove = true;
|
||||
moveRow(instance, 0)
|
||||
}
|
||||
}
|
||||
|
||||
function touchmove(event, instance) {
|
||||
var state = instance.getState();
|
||||
var rowData = event.instance.getDataset();
|
||||
var movePoint = event.touches[0];
|
||||
var initPoint = state.point;
|
||||
var moveY = movePoint.pageY - initPoint.pageY;
|
||||
if (config.longTouch) {
|
||||
if (Math.abs(moveY) > 10) {
|
||||
clearTimeout(touchTimer);
|
||||
}
|
||||
if (!isMove) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
moveRow(instance, moveY);
|
||||
//阻止滚动页面
|
||||
if (event.preventDefault) {
|
||||
event.preventDefault();
|
||||
}
|
||||
return false;
|
||||
}
|
||||
function touchend(event, instance) {
|
||||
if (config.longTouch) {
|
||||
clearTimeout(touchTimer);
|
||||
if (!isMove) {
|
||||
oldOffset = null;
|
||||
sorting = false;
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (lastCommand != "stop") {
|
||||
lastCommand = "stop";
|
||||
config.autoScroll && instance.callMethod("pageScroll", {
|
||||
'guid': config.guid,
|
||||
'command': "stop"
|
||||
});
|
||||
}
|
||||
var state = instance.getState();
|
||||
// 把隐藏的行重新显示
|
||||
resetRowStyle(instance,state.rowData.id)
|
||||
// 隐藏ShadowRow
|
||||
resetShadowRowStyle(instance,state.offset)
|
||||
if (typeof state.offset !== "undefined" && rowSort != state.offset && state.offset != null) {
|
||||
var sortArray=[];
|
||||
for (var i = 0; i < sortList[config.guid].length; i++) {
|
||||
sortList[config.guid][i].lastSort = sortList[config.guid][i].newSort;
|
||||
sortArray.push(sortList[config.guid][i].newSort);
|
||||
sortList[config.guid][i].rowView.removeClass('ani');
|
||||
}
|
||||
instance.callMethod("sort", {
|
||||
index: rowSort,
|
||||
offset: state.offset,
|
||||
sortArray:sortArray
|
||||
});
|
||||
} else {
|
||||
sorting = false;
|
||||
triggerFeedbackGenerator(instance); //震动反馈
|
||||
return false;
|
||||
}
|
||||
state.offset = null;
|
||||
oldOffset = null;
|
||||
sorting = false;
|
||||
triggerFeedbackGenerator(instance); //震动反馈
|
||||
return false;
|
||||
}
|
||||
// 重置列表行
|
||||
function resetRowStyle(instance,id) {
|
||||
currentRowView.removeClass('hide');
|
||||
}
|
||||
// 重置拖拽行
|
||||
function resetShadowRowStyle(instance,offset) {
|
||||
shadowRowBoxView.removeClass('show');
|
||||
shadowRowBoxView.addClass('hide');
|
||||
shadowRowBoxView.setStyle({});
|
||||
}
|
||||
var lastCommand = '';
|
||||
|
||||
// move Row
|
||||
function moveRow(instance, moveY) {
|
||||
var state = instance.getState();
|
||||
|
||||
// 显示shadowRowBox
|
||||
shadowRowBoxView.removeClass('hide');
|
||||
shadowRowBoxView.hasClass('show') || shadowRowBoxView.addClass('show');
|
||||
// 移动shadowRowBox里面的shadowRow
|
||||
shadowRowView.setStyle({
|
||||
'transform': 'translate3d(0,' + moveY + 'px,10px)',
|
||||
'-webkit-transform': 'translate3d(0,' + moveY + 'px,10px)'
|
||||
});
|
||||
// 隐藏列表对应行
|
||||
currentRowView.hasClass('hide') || currentRowView.addClass('hide');
|
||||
currentRowView.removeClass('ani')
|
||||
var listClientY = state.shadowRowTop + moveY + config.rowHeight/2;
|
||||
var tmpscrollListTop = scrollTop[config.guid];
|
||||
|
||||
// 拖拽至边缘滚动视图 距离顶部距离1.5行高触发上滚动 下滚动同理
|
||||
var callMethodData = {
|
||||
guid: config.guid,
|
||||
command: listClientY < config.ListHeight * 0.2 ? "up" : listClientY > config.ListHeight - (config.ListHeight * 0.2) ? "down" :
|
||||
"stop",
|
||||
scrollTop: tmpscrollListTop,
|
||||
}
|
||||
// 把滚动指令发给逻辑层
|
||||
if (lastCommand != callMethodData.command) {
|
||||
lastCommand = callMethodData.command;
|
||||
config.autoScroll && instance.callMethod("pageScroll", callMethodData);
|
||||
}
|
||||
|
||||
var moveOffset = moveY + scrollTop[config.guid] - state.initscrollTop;
|
||||
var offset = calcOffset(rowSort, moveOffset);
|
||||
if (offset <= 2 || offset >= config.listLength - 2) {
|
||||
callMethodData.command = 'stop';
|
||||
}
|
||||
// 为减少卡顿，微信小程序端，在滚动视图期间不进行列表位置交换
|
||||
if (config.autoScroll && (!config.isAppH5) && callMethodData.command != 'stop') {
|
||||
return;
|
||||
}
|
||||
oldOffset = oldOffset == null ? rowSort : oldOffset;
|
||||
if (offset < 0 || offset >= config.listLength) {
|
||||
return;
|
||||
}
|
||||
if (offset == oldOffset) {
|
||||
return;
|
||||
}
|
||||
|
||||
oldOffset = offset;
|
||||
state.offset = offset;
|
||||
//触发change事件 并交换列表位置
|
||||
instance.callMethod("change", {
|
||||
index: rowSort,
|
||||
moveTo: state.offset
|
||||
});
|
||||
for (var i = 0; i < sortList[config.guid].length; i++) {
|
||||
var sort = sortList[config.guid][i].lastSort;
|
||||
var newSort = sortList[config.guid][i].newSort;
|
||||
if ((sort >= offset && sort <= rowSort) || (sort <= offset && sort >= rowSort)) {
|
||||
if(sort == rowSort) {
|
||||
newSort = offset;
|
||||
}else{
|
||||
newSort = sort < rowSort ? sort+1 : sort-1;
|
||||
}
|
||||
}else{
|
||||
newSort = sort;
|
||||
}
|
||||
if(sortList[config.guid][i].newSort == newSort){
|
||||
continue;
|
||||
}
|
||||
sortList[config.guid][i].newSort = newSort;
|
||||
var translateY = (sortList[config.guid][i].newSort-sortList[config.guid][i].sort) * 100;
|
||||
sortList[config.guid][i].rowView.hasClass('ani') || sortList[config.guid][i].rowView.addClass('ani');
|
||||
sortList[config.guid][i].rowView.setStyle({
|
||||
'transform': 'translate3d(0,' + translateY + '%,0)',
|
||||
'-webkit-transform': 'translate3d(0,' + translateY + '%,0)'
|
||||
});
|
||||
}
|
||||
triggerFeedbackGenerator(instance); //震动反馈
|
||||
}
|
||||
//计算偏移index
|
||||
var oldOffset = null;
|
||||
function calcOffset(initSort, moveY) {
|
||||
var offset = initSort + parseInt(moveY / config.rowHeight); //偏移 行高的倍数
|
||||
var rest = moveY % config.rowHeight;
|
||||
if (rest > 0) {
|
||||
offset = offset + (rest / config.rowHeight >= 0.6 ? 1 : 0);
|
||||
if (offset < oldOffset) {
|
||||
offset = rest / config.rowHeight <= 0.4 ? offset : oldOffset;
|
||||
}
|
||||
} else
|
||||
{
|
||||
offset = offset + (rest / config.rowHeight <= -0.6 ? -1 : 0);
|
||||
if (offset > oldOffset) {
|
||||
offset = rest / config.rowHeight >= -0.4 ? offset : oldOffset;
|
||||
}
|
||||
}
|
||||
return offset;
|
||||
}
|
||||
|
||||
//触感反馈
|
||||
//wxs 不支持条件编译，所以用此方法判断
|
||||
var isiOSAPP = typeof plus != "undefined" && plus.os.name == 'iOS';
|
||||
var UISelectionFeedbackGenerator;
|
||||
var impact
|
||||
|
||||
if (isiOSAPP) {
|
||||
UISelectionFeedbackGenerator = plus.ios.importClass("UISelectionFeedbackGenerator");
|
||||
impact = new UISelectionFeedbackGenerator();
|
||||
impact.init();
|
||||
}
|
||||
function triggerFeedbackGenerator(instance) {
|
||||
if (!config.feedbackGenerator) {
|
||||
//关闭触感反馈
|
||||
return;
|
||||
}
|
||||
if (isiOSAPP) {
|
||||
//异步，避免与点击事件冲突
|
||||
setTimeout(function(){
|
||||
impact.selectionChanged();
|
||||
},0)
|
||||
} else {
|
||||
if (typeof plus != "undefined") {
|
||||
plus.device.vibrate(12)
|
||||
} else {
|
||||
instance.callMethod("vibrate");
|
||||
}
|
||||
}
|
||||
}
|
||||
var All_Config={};
|
||||
var config = {};
|
||||
function receiveData(e,state, instance){
|
||||
var data = JSON.parse(e);
|
||||
var tmp_config = {};
|
||||
var hasGuid = false;
|
||||
var sortArray=[];
|
||||
for(var i=0;i<data.length;i++){
|
||||
var arr = data[i];
|
||||
switch (arr[0]){
|
||||
case "sortArray":
|
||||
sortArray = arr[1];
|
||||
break;
|
||||
default:
|
||||
if(arr[0]=='guid'){
|
||||
hasGuid = true;
|
||||
}
|
||||
tmp_config[arr[0]] = arr[1];
|
||||
break;
|
||||
}
|
||||
}
|
||||
if(!hasGuid){
|
||||
return;
|
||||
}
|
||||
var isUpdateList = false;
|
||||
if(typeof All_Config[tmp_config.guid] == "undefined" ||typeof All_Config[tmp_config.guid].lastInitTime == "undefined" || All_Config[tmp_config.guid].lastInitTime!=tmp_config.lastInitTime){
|
||||
isUpdateList = true;
|
||||
}
|
||||
All_Config[tmp_config.guid] = tmp_config;
|
||||
if(isUpdateList){
|
||||
updateSortList(tmp_config.guid, instance,sortArray);
|
||||
}
|
||||
}
|
||||
// 更新guid对应的排序列表
|
||||
function updateSortList(guid, instance,sortArray) {
|
||||
|
||||
sortList[guid]=[];
|
||||
var pageSortList = instance.selectAllComponents('.hm-row');
|
||||
for (var i = 0; i < pageSortList.length; i++){
|
||||
var tmp_row = {id:pageSortList[i].getDataset().id,sort:i,lastSort:parseInt(pageSortList[i].getDataset().sort),newSort:i,rowView:pageSortList[i]};
|
||||
if(sortArray.length>0){
|
||||
tmp_row.lastSort = sortArray[i];
|
||||
tmp_row.newSort = tmp_row.lastSort;
|
||||
}
|
||||
sortList[guid].push(tmp_row);
|
||||
var translateY = (tmp_row.lastSort-tmp_row.sort) * 100;
|
||||
tmp_row.rowView.setStyle({
|
||||
'transform': 'translate3d(0,' + translateY + '%,0)',
|
||||
'-webkit-transform': 'translate3d(0,' + translateY + '%,0)'
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
// 输出
|
||||
module.exports = {
|
||||
receiveData:receiveData,
|
||||
scroll: scroll,
|
||||
longpress: longpress,
|
||||
touchstart: touchstart,
|
||||
touchmove: touchmove,
|
||||
touchend: touchend
|
||||
}
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
{
|
||||
"id": "HM-dragSorts",
|
||||
"displayName": "拖动排序列表 HM-dragSorts",
|
||||
"version": "1.0.6",
|
||||
"description": "可拖动行，对列表进行排序，拖动触感反馈，兼容APP-VUE、H5、MP-WEIXIN",
|
||||
"keywords": [
|
||||
"拖拽",
|
||||
"拖动",
|
||||
"拖动排序",
|
||||
"drag",
|
||||
"触感反馈"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.6.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "震动"
|
||||
},
|
||||
"npmurl": "",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "n"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "n",
|
||||
"IE": "n",
|
||||
"Edge": "n",
|
||||
"Firefox": "n",
|
||||
"Safari": "n"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "n",
|
||||
"百度": "n",
|
||||
"字节跳动": "n",
|
||||
"QQ": "n"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "n",
|
||||
"联盟": "n"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "n"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
|
||||
|
||||
##组件说明
|
||||
|
||||
> * 这是一个传入列表数据会生成一个可拖动排序列表的组件
|
||||
> * 此组件只支持单列多行，UVUE版本支持了多行多列，可以去看看[传送门](https://ext.dcloud.net.cn/plugin?id=15953)
|
||||
> * 因为废弃了插槽，所以，行的样式需要自行到组件内部去修改
|
||||
> * 行内容可以自行到组件，组件只支持每行都相等高度的列表
|
||||
> * 拖动会有触感反馈，如果设备支持的话。
|
||||
> * 组件使用了wxs，兼容APP-VUE、H5、MP-WEIXIN，其他端未做兼容，不支持。
|
||||
> * <font color=#f00>[BUG] vue3下，只支持长按拖拽</font>
|
||||
> * 下载示例并运行，你的很多疑问或得到答案。
|
||||
|
||||
|
||||
###属性说明
|
||||
|
||||
|属性名 |类型 |说明 |
|
||||
|-- |-- |-- |
|
||||
|list|ObjectArray |必填，列表数据，数据格式请参考示例，<br><font color=#f00>注意:数据非双向绑定，拖动并不会直接修改list数据，排序过的数据在confirm中获取</font> |
|
||||
|rowHeight|Int |选填，每一行的高度，单位:px，默认44px |
|
||||
|listHeight|Int |选填，整个列表的高度，默认等于窗口高度 |
|
||||
|listBackgroundColor|String |选填，列表底色,注意是列表的底色，不是行的底色，默认#FFFFFF |
|
||||
|feedbackGenerator|Boolean |选填，是否开启拖动触感反馈，可选值true/false，默认true 开启 |
|
||||
|longTouch|Boolean |选填，是否长按拖动，可选值true/false，默认false 关闭，如果是整行拖拽，请开启长按拖拽，不然页面不能滚动 |
|
||||
|autoScroll|Boolean |选填，是否拖拽至边缘自动滚动列表，可选值true/false，默认true 开启 |
|
||||
|longTouchTime|Int |选填，触发长按时长，单位:ms，默认350ms |
|
||||
|@onclick|EventHandle |点击事件，返回被点击行的数据，event = {index:被点击行的下标,row:被点击行的数据} |
|
||||
|@confirm|EventHandle |拖拽结束且行位置发生了改变，触发confirm事件，event = {index:'原始下标',moveTo:'被拖动到的下标',moveRow:'拖动行数据',list:'整个列表拖动后的数据'} |
|
||||
|@change|EventHandle |拖拽过程中，行位置发生交换时，触发change事件，event = {index:'原始下标',moveTo:'被拖动到的下标',moveRow:'拖动行数据'} |
|
||||
|
||||
###内置函数说明
|
||||
> ####push，unshift，splice函数
|
||||
内置了push，unshift，splice函数，组件设置ref属性，通过$refs调用，实现列表的删除插入，使用方法和数组的push，unshift，splice一致，push，unshift，splice函数修改后会返回修改后的值
|
||||
例如：
|
||||
```
|
||||
let tmplist = this.$refs.dragSorts.splice(5,1,...rows);
|
||||
```
|
||||
|
||||
|
||||
##使用示例
|
||||
页面:
|
||||
```
|
||||
<template>
|
||||
<view class="content">
|
||||
<HM-dragSorts ref="dragSorts" :list="list" :autoScroll="true" :feedbackGenerator="true" :listHeight="300" :rowHeight="55" @change="change" @confirm="confirm" @onclick="onclick" ></HM-dragSorts>
|
||||
</view>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
//scoped css只在当前页生效 不影响子组件
|
||||
page {background-color: #efeff4;}
|
||||
</style>
|
||||
```
|
||||
script:
|
||||
|
||||
```
|
||||
import dragSorts from '@/uni_modules/components/HM-dragSorts/HM-dragSorts.vue' // 组件符合easycom规范，默认这个可以不写
|
||||
export default {
|
||||
components: {'HM-dragSorts':dragSorts},// 组件符合easycom规范，默认这个可以不写
|
||||
data() {
|
||||
return {
|
||||
list:[
|
||||
{"name": "花呗", "icon": "/static/img/1.png"},
|
||||
{"name": "余额宝","icon": "/static/img/2.png"},
|
||||
{"name": "账户余额","icon": "/static/img/3.png"},
|
||||
{"name": "交通银行信用卡(0001)""icon": "/static/img/4.png"},
|
||||
{"name": "中国建设银行信用卡(4401)","icon": "/static/img/5.png"},
|
||||
{"name": "网商储蓄卡(7223)","icon": "/static/img/6.png"}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
push(){
|
||||
// 和数组的push使用方法一致，可以push单行，也可以push多行
|
||||
this.$refs.dragSorts.push({
|
||||
"name": "push行",
|
||||
"icon": "/static/img/2.png"
|
||||
});
|
||||
},
|
||||
unshift(){
|
||||
// 和数组的unshift使用方法一致，可以unshift单行，也可以unshift多行
|
||||
this.$refs.dragSorts.unshift({
|
||||
"name": "unshift行",
|
||||
"icon": "/static/img/2.png"
|
||||
});
|
||||
},
|
||||
splice(){
|
||||
// 和数组的unshift使用方法一致 下标1开始删除1个并在下标1位置插入行
|
||||
this.$refs.dragSorts.splice(1,1,{
|
||||
"name": "splice行",
|
||||
"icon": "/static/img/2.png"
|
||||
});
|
||||
},
|
||||
onclick(e){
|
||||
console.log('=== onclick start ===');
|
||||
console.log("被点击行: " + JSON.stringify(e.value));
|
||||
console.log("被点击下标: " + JSON.stringify(e.index));
|
||||
console.log('=== onclick end ===');
|
||||
},
|
||||
change(e){
|
||||
console.log('=== change start ===');
|
||||
console.log("被拖动行: " + JSON.stringify(e.moveRow));
|
||||
console.log('原始下标：',e.index);
|
||||
console.log('移动到：',e.moveTo);
|
||||
console.log('=== change end ===');
|
||||
},
|
||||
confirm(e){
|
||||
console.log('=== confirm start ===');
|
||||
console.log("被拖动行: " + JSON.stringify(e.moveRow));
|
||||
console.log('原始下标：',e.index);
|
||||
console.log('移动到：',e.moveTo);
|
||||
console.log('=== confirm end ===');
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
###更多的说明请下载示例运行查看，有示例对照注释更容易明白。
|
||||
|
|
@ -10,38 +10,38 @@ export default defineConfig({
|
|||
port: 5173,
|
||||
proxy: {
|
||||
"/system": {
|
||||
// target: "http://192.168.0.189:8080",
|
||||
target: "http://192.168.0.102:8080",
|
||||
target: "http://192.168.0.189:8080",
|
||||
// target: "http://192.168.0.102:8080",
|
||||
// target: "http://192.168.0.129:8080",
|
||||
changeOrigin: true,
|
||||
},
|
||||
"/shopify": {
|
||||
// target: "http://192.168.0.189:8080",
|
||||
target: "http://192.168.0.102:8080",
|
||||
target: "http://192.168.0.189:8080",
|
||||
// target: "http://192.168.0.102:8080",
|
||||
// target: "http://192.168.0.129:8080",
|
||||
changeOrigin: true,
|
||||
},
|
||||
"/user": {
|
||||
// target: "http://192.168.0.189:8080",
|
||||
target: "http://192.168.0.102:8080",
|
||||
target: "http://192.168.0.189:8080",
|
||||
// target: "http://192.168.0.102:8080",
|
||||
// target: "http://192.168.0.129:8080",
|
||||
changeOrigin: true,
|
||||
},
|
||||
"/coreplay": {
|
||||
// target: "http://192.168.0.189:8080",
|
||||
target: "http://192.168.0.102:8080",
|
||||
target: "http://192.168.0.189:8080",
|
||||
// target: "http://192.168.0.102:8080",
|
||||
// target: "http://192.168.0.129:8080",
|
||||
changeOrigin: true,
|
||||
},
|
||||
"/file": {
|
||||
// target: "http://192.168.0.189:8080",
|
||||
target: "http://192.168.0.102:8080",
|
||||
target: "http://192.168.0.189:8080",
|
||||
// target: "http://192.168.0.102:8080",
|
||||
// target: "http://192.168.0.129:8080",
|
||||
changeOrigin: true,
|
||||
},
|
||||
"/video": {
|
||||
// target: "http://192.168.0.189:8080",
|
||||
target: "http://192.168.0.102:8080",
|
||||
target: "http://192.168.0.189:8080",
|
||||
// target: "http://192.168.0.102:8080",
|
||||
// target: "http://192.168.0.129:8080",
|
||||
changeOrigin: true,
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue