chart

pages/chart/chart.vue

@@ -1,6 +1,6 @@
 <template>
-    <page-meta :page-style="showFilter? 'overflow: hidden;' : ''" />
-    <view class="chart-page" @click="popData.show=false">
+    <page-meta :page-style="showFilter? 'overflow: hidden;' : ''" :scroll-top="pageMetaScrollTop" />
+    <view class="chart-page">
       <van-sticky style="background: #fff">
         <view class="flex search-wrap" id="search-wrap">
             <van-search
@@ -26,9 +26,11 @@
           generic:item="chart-item"
           :columns="2"
           :list-data="list"
+          :itemHeight="400"
           @sortend="chartSortend"
-          @change="chartChange"
           @click="chartClick"
+          @scroll="chartScroll"
+          :scroll-top="scrollTop"
         ></drag>
       </view>
       
@@ -75,6 +77,8 @@ export default {
           page:1,
           finished:false,
           chartDrag:null,
+          pageMetaScrollTop:0,
+          scrollTop:0,
         }
     },
     onLoad() {
@@ -82,14 +86,17 @@ export default {
     },
     
     onReachBottom() {
-        // if (this.finished) return
-        // this.page++
-        // this.getList()
+        if (this.finished) return
+        this.page++
+        this.getList()
+    },
+    onPageScroll({ scrollTop }) {
+      this.scrollTop=scrollTop
     },
     methods: {
       // 获取列表
       getList(){
-        if(this.page<5){
+        if(this.page<3){
           let arr=[]
           for (let index = (this.page-1)*20; index < this.page*20; index++) {
             arr.push({title:'标题'+index,src:'',dragId:'chart'+index,fixed: false})
@@ -105,14 +112,25 @@ export default {
         
       },
 
+      //移动排序结束
       chartSortend(e){
-        console.log(e);
-      },
-      chartChange(e){
-        console.log(e);
+        // curIndex 为排序前元素所在位置  listData为排序后的数组
+        let {curIndex,listData}=e.detail
+        const moveTarget=this.list[curIndex]
+        console.log(moveTarget.title);
+        this.list=listData
+        setTimeout(() => {
+          this.chartDrag.init();
+        }, 100);
+        
       },
+      // 点击某项
       chartClick(e){
-        console.log(e);
+        console.log(e.detail.data);
+      },
+      // 移动时滚动
+      chartScroll(e){
+        this.pageMetaScrollTop=e.detail.scrollTop
       },
 
       // 跳转全部分类

pages/chart/component/chartItem.vue

@@ -1,6 +1,6 @@
 <template>
-  <view class="chart-item">
-      <view class="van-multi-ellipsis--l2 title">{{itemData.title}}</view>
+  <view class="chart-item" :data-id="itemData.dragId" @click.stop="itemClick">
+      <view class="van-multi-ellipsis--l2 title">{{itemData.title}}就发动机上课了发觉得凯撒尽快发动机卡JFK的撒尽快付款的撒娇离开了</view>
       <image lazy-load class="img" src="" mode="aspectFill"/>
   </view>
 </template>
@@ -10,15 +10,21 @@ export default {
     name:"chartItem",
     props: {
         itemData:{
-            type: Object,
-			value: {}
+          type: Object,
+			    value: {}
         }
+    },
+    methods: {
+      itemClick(){
+        this.$emit('click')
+      }
     }
 }
 </script>
 
 <style lang='scss' scoped>
 .chart-item{
+    height: 380rpx;
     background: #FFFFFF;
     box-shadow: 0px 0px 12rpx rgba(154, 141, 123, 0.16);
     border-radius: 8rpx;

wxcomponents/drag/index.wxs

@@ -54,7 +54,7 @@ var sortCore = function (sKey, eKey, st) {
 	});
 }
 
-var triggerCustomEvent = function(list, type, ins) {
+var triggerCustomEvent = function(list, type, ins,curIndex) {
 	var _list = [], listData = [];
 
 	list.forEach(function (item) {
@@ -67,7 +67,7 @@ var triggerCustomEvent = function(list, type, ins) {
 		}
 	});
 
-	ins.triggerEvent(type, {listData: listData});
+	ins.triggerEvent(type, {listData: listData,curIndex:curIndex});
 }
 
 var longPress = function (event, ownerInstance) {
@@ -169,7 +169,7 @@ var touchMove = function (event, ownerInstance) {
 
 	ownerInstance.callMethod("vibrate");
 	ownerInstance.callMethod("listChange", {list: list});
-	triggerCustomEvent(list, "change", ownerInstance);
+	triggerCustomEvent(list, "change", ownerInstance,st.cur);
 }
 
 var touchEnd = function (event, ownerInstance) {
@@ -177,7 +177,7 @@ var touchEnd = function (event, ownerInstance) {
 	var st = ownerInstance.getState();
 
 	if (!st.dragging) return;
-	triggerCustomEvent(st.list, "sortend", ownerInstance);
+	triggerCustomEvent(st.list, "sortend", ownerInstance,st.cur);
 
 	ins.addClass("tran");
 	ins.setStyle({