weex框架怎么实现网格拖拽排序

2021-04-30 09:43发布

sortable,vue-slicksort,vuedraggable都用过了,在web端可以正常运行  但是在移动端就没有效果了,求大神解答一下

sortable,vue-slicksort,vuedraggable都用过了,在web端可以正常运行  但是在移动端就没有效果了,求大神解答一下

9条回答

安装
npm或yarn安装都可

$ npm install vue-slicksort --save

$ yarn add vue-slicksort
使用
引入

import { SlickList, SlickItem } from 'vue-slicksort'
export default {
  components: {
    SlickList,
    SlickItem,
  },
  data () {
    return {
      commonsApplication: []
    }
  }
}
使用(部分代码片段)

                      :pressDelay="300"
                    v-model="commonsApplication"
                    helperClass="helperClass"
                    class="ul"
                    axis="xy">
                                          v-for="(item,index) in commonsApplication"
                      :index="index"
                      :key="index+'key'"
                      class="li">
                      


                        
                        

{{ item.menuName }}


                                                  v-if="isEditMenus"/>                          src="@/assets/newIcon/deleteMenus.svg"
                          alt="删除应用"
                          class="delete-app"
                          @click.stop="deleteApp(item,index)">
                      

                    
                  
                  
以上应用展示在首页

自定义样式(部分代码片段)

 .ul{
            display: flex;
            flex-wrap: wrap;
            text-align: center;
            padding-bottom:18px;
            .li{
              width: 25%;
              margin: 5px 0px;
              padding:0 4px;
              .add-border{
                border: 1px solid #E2E3E7 !important;
              }
              .app-border{
                z-index:99999!important;
                box-sizing: border-box;
                border-radius: 8px;
                position:relative;
                padding:5px;
                .app-icon{
                  width: 48px;
                  height: 48px;
                }
              }
            }
          }
参数说明
要想得到你想要的样式,要注意在SlickList和SlickItem上添加你定义的class,可以直接将二者当成两个div。

一周热门 更多>