tuniao-ui/vipPage/components/drag/list-drag/list-drag.vue

<template>
  <view class="">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed>列表排序长按拖拽</tn-nav-bar>
  
    <!-- 页面内容 -->
    <view class="tn-bg-gray--light" :style="{paddingTop: vuex_custom_bar_height + 10 + 'px'}">
      
      <view class="drag__wrap tn-margin-top-sm tn-padding-bottom-xl">
        
        <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding" style="height: 100%;background-color: #FFFFFF;margin: 10rpx;border-radius: 10rpx;">
          <view class="justify-content-item tn-text-bold tn-text-lg">
            推荐
          </view>
          <view class="justify-content-item">
            <text class="tn-icon-expand tn-text-xl tn-color-gray--disabled"></text>
          </view>
        </view>
        
        <tn-drag :list="list" :columns="columns" :itemHeight="itemHeight" @change="onChange" @end="onEnd">
          <template slot-scope="{entity, height}">
            <view class="drag__item" :style="{height: `${height}rpx`}">
              <view class="drag__item__name">
                <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding" style="height: 100%;">
                  <view class="justify-content-item tn-text-bold tn-text-lg">
                    {{entity.name}}
                  </view>
                  <view class="justify-content-item">
                    <text class="tn-icon-expand tn-text-xl"></text>
                  </view>
                </view>
              </view>
            </view>
          </template>
        </tn-drag>
      </view>
  
    </view>
  
  </view>
</template>

<script> 
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  export default {
    name: 'TemplateSet',
    mixins: [template_page_mixin],
    data() {
      return {
        list: [
          {name: '商城'},
          {name: '关注'},
          {name: '团购'},
          {name: '同城'},
          {name: '经验'},
          {name: '视频'},
          {name: '直播'},
          {name: '热点'},
          {name: '治愈'}
        ],
        scrollTop: 0,
        columns: 1,
        itemHeight: 120,
        sliderValue: 1,
      }
    },
    methods: {
      onChange(data) {
        // console.log(data.data);
      },
      onEnd(data) {
        // console.log(data.data);
      },
    }
  }
</script>

<style lang="scss" scoped>
  .drag {
    &__wrap {
      padding-left: 20rpx;
      padding-right: 20rpx;
    }
    
    &__item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      // background-color: #FF5656;
      box-sizing: border-box;
      padding: 10rpx;
      // border: 1rpx solid #000000;
      position: relative;
      
      &__fixed {
        width: 100%;
        height: 100%;
        background-color: #FFFFFF;
        border-radius: 10rpx;
      }
      
      &__name {
        width: 100%;
        height: 100%;
        background-color: #FFFFFF;
        border-radius: 10rpx;
      }
    }
  }
</style>