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

<template>
  <view class="vip-component-basic-drag">
  
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed>Drag拖拽</tn-nav-bar>
  
    <!-- 页面内容 -->
    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      
      <view class="operation">
        <view class="operation__item">
          <view class="operation__title">设置columns</view>
          <view class="operation__content">
            <view class="tn-margin-right">columns:</view>
            <tn-number-box v-model="columns" :min="3" :max="5" :disabledInput="true"></tn-number-box>
          </view>
        </view>
        <view class="operation__item">
          <view class="operation__title">设置固定项</view>
          <view class="operation__content">
            <view class="tn-margin-right">随机固定:</view>
            <tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="setFixed">随机固定</tn-button>
          </view>
        </view>
      </view>
      
      <view class="drag__wrap tn-margin-top">
        <tn-drag :list="list" :columns="columns" :itemHeight="itemHeight" @change="onChange" @end="onEnd">
          <template slot-scope="{entity, height, fixed}">
            <view class="drag__item" :style="{height: `${height}rpx`}">
              <image :src="entity.url" :style="{height: `${height}rpx`}" mode="widthFix"></image>
              <view v-if="fixed" class="drag__item__fixed">Fixed</view>
            </view>
          </template>
        </tn-drag>
      </view>
  
    </view>
  
  </view>
</template>

<script> 
  export default {
    name: 'VipComponentBasicDrag',
    data() {
      return {
        list: [],
        scrollTop: 0,
        columns: 3,
        itemHeight: 210,
        sliderValue: 3,
      }
    },
    onLoad() {
      const list = []
      for (let i = 0; i < 15; i++) {
        list.push({
          url: i % 2 == 0 ? 'https://resource.tuniaokj.com/images/shop/bag1.jpg' : 'https://resource.tuniaokj.com/images/shop/bag2.jpg',
          fixed: false
        })
      }
      this.list = list
    },
    watch: {
      columns(val) {
        uni.pageScrollTo({
          scrollTop: 0
        })
        this.itemHeight = [210, 160, 120][val - 3]
      }
    },
    methods: {
      onChange(data) {
        // console.log(data.data);
      },
      onEnd(data) {
        console.log(data.data);
      },
      // 设置动态固定项
      setFixed() {
        const rand = Math.floor(Math.random() * (15 - 1))
        console.log(rand);
        this.list.forEach((item) => {
          item.fixed = false
        })
        this.list[rand].fixed = true
      }
    }
  }
</script>

<style lang="scss" scoped>
  
  .operation {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0 100rpx;
    margin-top: 100rpx;
    
    &__item {
      width: 100%;
      margin-top: 20rpx;
    }
    
    &__title {
      font-size: 36rpx;
    }
    
    &__content {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      height: 100%;
      margin-top: 10rpx;
    }
  }
  
  .drag {
    &__wrap {
      padding-left: 30rpx;
      padding-right: 30rpx;
    }
    
    &__item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #FFFFFF;
      padding: 20rpx;
      box-sizing: border-box;
      border: 1rpx solid #F6F6F6;
      position: relative;
      
      image {
        display: block;
        flex-shrink: 0;
        width: 100%;
      }
      
      &__fixed {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.5);
        font-size: 40rpx;
      }
    }
  }
</style>