uniapp app菜单移动示例视频
第一步:先安装SortableJS,npm install sortablejs --save;
第二步:参考以下代码可实现:
<template>
// 代写代码 vx781284440
<view class="work-container">
<view class="work-title">王者荣耀</view>
<view class="work-menu" v-for="(item,index) of menuList" :key="index">
<view class="menu-title">
{{item.level}}
</view>
<view class="menu-grid-body">
<uni-grid :className="'grid'+index" :column="4" :showBorder="false" @change="(e)=>{changeGrid(e,index)}"
:highlight="false">
<uni-grid-item :index="i" v-for="(el,i) of item.children" :key="i" :data-id="el">
<view class="menu-grid-item-box">
<image class="icon" :src="el.icon" mode="aspectFit"></image>
<text class="text">{{el.title}}</text>
</view>
</uni-grid-item>
</uni-grid>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
menuList: [{
level: '常用英雄',
children: [{
title: '妲己',
icon: '../../static/images/work/yinhuang.png',
url: '/pages/trouble/index'
},
{
title: '李白',
icon: '../../static/images/work/anquanjiandu.png',
url: '/pages/secureSupervise/index'
},
{
title: '王昭君',
icon: '../../static/images/work/accident.png',
url: '/pages/accident/index'
},
{
title: '西施',
icon: '../../static/images/work/xiaofang.png',
url: '/pages/fireFighting/index'
}
]
},
{
level: '上分英雄',
children: [{
title: '赵云',
icon: '../../static/images/work/dykeDam.png',
},
{
title: '程咬金',
icon: '../../static/images/work/food.png',
},
{
title: '韩信',
icon: '../../static/images/work/traffic.png',
},
{
title: '耀',
icon: '../../static/images/work/meeting.png',
}
]
}
]
}
}
}
</script>
// 若有不懂得地方加QQ781284440咨询
<script module="Sortable" lang="renderjs">
import Sortable from 'sortablejs';
export default {
mounted() {
let el1 = document.getElementsByClassName('grid0');
let el2 = document.getElementsByClassName('grid1');
let id1 = document.getElementById(el1[0].id);
let id2 = document.getElementById(el2[0].id);
new Sortable(id1, {
group: 'shared',
delay: 300,
animation: 150,
delayOnTouchOnly: true,
touchStartThreshold: 10,
onAdd: function(e) {
console.log(e);
},
onRemove: function(e) {
console.log(e);
},
});
new Sortable(id2, {
group: 'shared',
delay: 300,
animation: 150,
delayOnTouchOnly: true,
touchStartThreshold: 10,
onAdd: function(e) {
console.log(e);
},
onRemove: function(e) {
console.log(e);
},
});
}
}
</script>