hongze_yb_xcx/components/chartList/chartList.vue

<template>
  <view class="chart-list-wrap">
    <scroll-view 
      id="scrollView" 
      :scroll-y="true" 
      :style="{'height': ListHeight+'px'}" 
      :scroll-top="scrollViewTop"
      @scrolltolower="scrolltolower"
		  @scroll="drag.scroll" 
      :scroll-with-animation="false"
    >
      <!-- 两个list列表 拖拽完直接切换list 避免闪烁 -->
      <block v-for="(tmplist,listType) in dragList" :key="listType">
        <view 
          class="chart-list" 
          :class="[listType=='A'?(listSwitch?'show':'hide'):(listSwitch?'hide':'show')]"
        >
          <block v-for="(item,index) in tmplist" :key="index">
            <view class="rowBox chart-item" :id="'rowBox'+listType+index">
            <view class="row" :id="'row'+listType+index">
              <!-- 拖动按钮 -->
              <image 
                class="drag-icon" 
                src="../../static/chart/drag-icon.png" 
                mode="aspectFill"
                :style="{'height': rowHeight+'px'}" 
                :data-index="index" 
                :data-type="listType" 
								@touchstart="drag.touchstart" 
                @touchmove="drag.touchmove" 
                @touchend="drag.touchend"
								<!-- #ifdef MP-WEIXIN -->
								@longpress="drag.longpress"
								<!-- #endif -->
              />

              <!-- 内容区域 -->
              <view>标题{{item.title}}</view>
              <image lazy-load class="img" src="" mode="aspectFill"/>
            </view>
            </view>
          </block>
        </view>
      </block>
    </scroll-view>

    <!-- 拖动的盒子 -->
    <view id="shadowRowBox" class="shadowRowBox">
      <view id="shadowRow">
        <image class="drag-icon" src="../../static/chart/drag-icon.png" mode="aspectFill"/>
        <!-- 内容区域 -->
        <view>标题{{shadowRow.title}}</view>
        <image lazy-load class="img" src="" mode="aspectFill"/>
      </view>
    </view>


    <view :data-isapph5="isAppH5" :data-islongtouch="isLongTouch" :data-longtouchtime="longTouchTime" :data-listheight="ListHeight"
		 :data-rownum="list.length" id="dataView" style="display: none !important;">存放数据给wxs读取</view>
  </view>
</template>

<script src="./drag.wxs" module="drag" lang="wxs"></script>
<script>
	/**  
	 * 拖拽排序组件 HM-dragSort
	 * @description 拖拽排序组件 HM-dragSort
	 * @property {ObjectArray} list = [] 列表数据,自定义数据，会传递到name="rowContent"插槽  
	 * @property {Boolean} isLongTouch = [true|false] 是否开启长按拖动  
	 * @property {Number} longTouchTime = [] 选填,触发长按时长,单位:ms,默认350ms,不支持微信小程序 
	 * @property {Number} listHeight = [] 选填,可拖动列表整体的高度,单位:px,默认等于窗口高度 
	 * @property {Number} rowHeight = [] 必填,行高,单位:px,默认44px
	 * @event {Function} change 行位置发生改变时触发事件 返回值:{index:'原始下标',moveTo:'被拖动到的下标',moveRow:'拖动行数据'}   
	 * @event {Function} confirm 拖拽结束且行位置发生了改变触发事件 返回值:{index:'原始下标',moveTo:'被拖动到的下标',moveRow:'拖动行数据',list:'整个列表拖动后的数据'}  
	 * @event {Function} onclick 点击行触发事件 返回值:{index:'被点击行下标',value:'被点击行数据'} 
	 */
	export default {
		name: 'chart-list',
		data() {
			return {
				// #ifdef APP-PLUS || H5
				isAppH5: true,
				// #endif
				// #ifdef MP-WEIXIN
				isAppH5: false,
				// #endif

				shadowRow: {}, // 存放被拖拽行数据
				// 列表数据 分A和B两个列表 互相切换 避免闪烁
				dragList: {
					"A": [],
					"B": []
				},
				ListHeight: this.listHeight,
				listSwitch: true, // 控制切换列表

				// 控制滑动
				scrollViewTop: 0, // 滚动条位置
				scrollCommand: 1, //传递renderjs数据
				isHoldTouch: false, //是否正在拖拽
				isScrolling: false, //是否正在滚动视图
				scrollTimer: null, //定时器-控制滚动 微信小程序端使用 实现类似requestAnimationFrame效果
			}
		},
		props: {
			// 是否开启长按拖动
			isLongTouch: {
				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
			}
		},
		watch: {
			list: {
				handler(val) {
					this.initList(); //数据变化重新初始化list
				},
				immediate: true
			}

		},
		mounted() {
			if (this.listHeight == 0) {
				this.ListHeight = uni.getSystemInfoSync().windowHeight;
			}

		},
		methods: {
      // 触底
      scrolltolower(){
        this.$emit('scrolltolower')
      },

			loadShadowRow(e) {
				this.shadowRow = JSON.parse(JSON.stringify(this.dragList[this.listSwitch ? "A" : "B"][e.rowIndex]));
			},
			initList() {
				if (this.dragList.A.length > 0) {
					setTimeout(() => {
						this.dragList.A = JSON.parse(JSON.stringify(this.list));
						this.dragList.B = JSON.parse(JSON.stringify(this.list));
					}, 50)
				} else {
					this.dragList.A = JSON.parse(JSON.stringify(this.list));
					this.dragList.B = JSON.parse(JSON.stringify(this.list));
				}

			},
			triggerClick(index, row) {
				this.$emit('onclick', {
					index: index,
					value: JSON.parse(JSON.stringify(row))
				});
			},
			//兼容微信小程序震动
			vibrate() {
				uni.vibrateShort()
			},
			// 控制自动滚动视图
			pageScroll(e) {
				// 滚动
				if (e.command == "up" || e.command == "down") {
					if (!this.isHoldTouch) {
						this.isHoldTouch = true;
						this.scrollViewTop = e.scrollTop;
					}
					if (this.isScrolling) {
						return;
					};
					this.isScrolling = true;

					// APP端和H5端 执行renderjs的滚动
					// #ifdef APP-PLUS || H5
					e.ListHeight = this.ListHeight;
					e.rowHeight = this.rowHeight;
					e.rowLength = this.list.length;
					this.scrollCommand = e;
					return;
					// #endif

					// 微信小程序执行以下逻辑
					this.scrollTimer != null && clearInterval(this.scrollTimer);
					let maxheight = this.rowHeight * this.list.length + 1 - this.ListHeight;
					// 16.6ms毫秒执行一次，接近60HZ
					this.scrollTimer = setInterval(() => {
						if (e.command == "up") {
							this.scrollViewTop -= 3
						}
						if (e.command == "down") {
							this.scrollViewTop += 3;
						}
						if (this.scrollViewTop < 0) {
							this.scrollViewTop = 0;
							clearInterval(this.scrollTimer);
						}
						if (this.scrollViewTop > maxheight) {
							this.scrollViewTop = maxheight;
							clearInterval(this.scrollTimer);
						}
					}, 16.6)
				}
				// 停止滚动
				if (e.command == "stop") {
					// #ifdef APP-PLUS || H5
					this.scrollCommand = e;
					// #endif
					this.isScrolling && this.stopScroll();
				}
			},
			stopScroll() {
				this.scrollTimer != null && clearInterval(this.scrollTimer);
				this.isScrolling = false;
				this.scrollingtop = 0;
			},
			change(e) {
				e.moveRow = JSON.parse(JSON.stringify(this.dragList.A[e.index]))
				this.$emit('change', e);
			},
			sort(e) {
				this.stopScroll();
				this.isHoldTouch = false;
				let tmpList = JSON.parse(JSON.stringify(this.dragList.A));
				tmpList.splice(e.offset, 0, tmpList.splice(e.index, 1)[0]);
				let listType = "A"
				if (this.listSwitch) {
					this.dragList.B = [];
					this.dragList.B = tmpList;

				} else {
					this.dragList.A = [];
					this.dragList.A = tmpList;
					listType = "B";
				}
				setTimeout(() => {
					this.resetList(listType, tmpList)
				}, 50)
				this.$emit('confirm', {
					list: tmpList,
					index: e.index,
					moveTo: e.offset,
					moveRow: JSON.parse(JSON.stringify(this.dragList.A[e.index]))
				});
			},
			resetList(listType, tmpList) {
				this.listSwitch = !this.listSwitch;
				this.$nextTick(() => {
					this.dragList[listType] = [];
					this.dragList[listType] = tmpList;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.chart-list-wrap{
  .hide{
    display: none;
  }
  .show{
    
  }
}
.chart-list{
  padding: 24rpx 25rpx;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .chart-item{
    width: 48.5%;
    &.show{
      display: block;
    }
    &.hide{
      display: none;
    }
    .row{
      background: #FFFFFF;
      box-shadow: 0px 0px 12rpx rgba(154, 141, 123, 0.16);
      border-radius: 8rpx;
      margin-bottom: 20rpx;
      padding: 20rpx 20rpx 33rpx 20rpx;
      position: relative;
    }
    .title{
      font-size: 26rpx;
    }
    .img{
      margin-top: 10rpx;
      width: 100%;
      height: 261rpx;
      display: block;
      margin-left: auto;
      margin-right: auto;
      background-color: #f6f6f6;
    }

    .drag-icon{
      position: absolute;
      top: 0;
      right: 0;
      width: 40rpx !important;
      height: 40rpx !important;
    }
  }

}

.shadowRowBox{
    &.show{
      display: block;
      opacity: 0.7;
    }
    width: 48vw;
    background: #FFFFFF;
    box-shadow: 0px 0px 12rpx rgba(154, 141, 123, 0.16);
    border-radius: 8rpx;
    margin-bottom: 20rpx;
    padding: 20rpx 20rpx 33rpx 20rpx;
    position: absolute;
		z-index: 100;
		display: none;
    .title{
      font-size: 26rpx;
    }
    .img{
      margin-top: 10rpx;
      width: 100%;
      height: 261rpx;
      display: block;
      margin-left: auto;
      margin-right: auto;
      background-color: #f6f6f6;
    }

    .drag-icon{
      position: absolute;
      top: 0;
      right: 0;
      width: 40rpx;
      height: 40rpx;
    }
}
</style>