@soei/flyweight 0.0.1 → 0.0.2

package/README.md

@@ -1,22 +1,57 @@
-## 享元模式
+# 享元模式
 
-### 安装
+### 更新日志
+
+### `0.0.2`
+
+- #### 优化了 `Vue3` 的 `兼容` 问题
+
+  `Vue3` 引入方式
+
+  ```html
+  <script>
+    import { Flyweight } from "@soei/flyweight";
+  </script>
+  <!-- 非 <style scoped>  scoped-->
+  <style>
+    @import "@soei/flyweight/dist/style.css";
+  </style>
+  ```
+
+  `或` 源码引入
+
+  ```javascript
+  import Flyweight from "@soei/flyweight/src/Flyweight.vue";
+  ```
+
+  `或`
+
+  ```javascript
+  // main.js
+  import "@soei/flyweight/dist/style.css";
+  import flyweight from "@soei/flyweight";
+  Vue.use(flyweight);
+  // use.vue
+  <s-flyweight ...></s-flyweight>
+  ```
+
+## `安装`
 
 ```
 npm i @soei/flyweight
 
 ```
 
-### 引用
+## `引用`
 
 ```javascript
 // 引入方式 vue2
 import Flyweight from "@soei/flyweight/src/Flyweight.vue";
-// 引入方式 vue3
+// 引入方式 Vue3
 import { Flyweight } from "@soei/flyweight";
 ```
 
-### 使用
+## `使用`
 
 ```html
 <Flyweight
@@ -31,3 +66,72 @@ import { Flyweight } from "@soei/flyweight";
   <template #default="{data, index}"> ...todo </template>
 </Flyweight>
 ```
+
+```html
+<Flyweight [attrs]></Flyweight>
+```
+
+## `index` 和 `view` 只生效一个
+
+### _`index`_ 定位索引
+
+```javascript
+  // 格式
+  Number;
+  :index="10";
+```
+
+### _`view`_ 指定显示哪个索引
+
+```javascript
+  // 格式
+  {
+    // 定位属性
+    id: Number,
+    // 定位属性字段名称
+    picker: String
+  }
+  :view="{id: 10, picker: 'id'}";
+```
+
+### _`flys`_ 显示的`数据列表`
+
+```javascript
+// 格式
+Array;
+:flys="[]";
+```
+
+### _`width`_ 单个容器 `宽度`
+
+```javascript
+// 格式
+Number;
+// 默认: 0, 占整行
+:width="100";
+```
+
+### _`height`_ 单个容器 `高度`
+
+```javascript
+// 格式
+Number;
+// 默认: 100
+:height="10";
+```
+
+### _`offset`_ 偏移量 _[`左右`, `上下`]_
+
+```javascript
+// 格式
+Array = [左右, 上下];
+:offset="[0, 30]";
+```
+
+### `@onend` 拉到`底部`时的回调
+
+```javascript
+// 格式
+Function;
+@onend="function(){}";
+```

package/dist/Flyweight.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("@soei/util"),s=require("vue");const p=(t,e)=>{const h=t.__vccOpts||t;for(const[r,i]of e)h[r]=i;return h};let m=(...t)=>{console.info("::::FLYWEIGHT",...t)};const _={props:{flys:{type:Array,default:()=>[]},width:{type:Number,default:0},height:{type:Number,default:100},offset:{type:Array,default:()=>[0,0]},lazy:{type:Number,default:100},view:{type:Object,default:()=>({picker:"id"})},index:{type:Number,default:0}},computed:{flyweight(){return this.$refs.flyweight}},data(){return{flyweights:[],actice:!1,H:null,column:1,row:1,fwheight:10,count:0}},watch:{flys(t){this.count=t.length,this.re()},view(t){let e=a.each(this.flys,(h,r,i,n)=>{if(r[i]==n)return h},t.picker,t.id);this.$emit("update:index",e)},index(t){let e=t/this.column>>0;(this.flyweight.scrollTop/this.fwheight>>0)+this.row-e-1>0||(this.flyweight.scrollTop=e*this.fwheight)}},mounted(){this.flyweights=[];try{new ResizeObserver(()=>{this.re(),this.$emit("resize")}).observe(this.flyweight)}catch(t){m(t)}},methods:{lazyrun(t,e){clearTimeout(this.time),this.time=setTimeout(()=>{a.runer(t)},e||this.lazy)},run(t){let e=a.picker(t.target,"scrollTop=>top");a.each(this.flyweights,(h,r,i,n,l,o,c,u)=>{if(i=h/l>>0,c=i+n*(+(i<o%n)+(o/n>>0)),u=c*l+h%l,u>=this.count)return!0;r.index=c,r.top=r.index*this.fwheight,r.data=this.flys[u]},null,this.row,this.column,e.top/this.fwheight>>0)&&this.lazyrun(()=>this.$emit("onend",!0))},scroll(t){this.run(t)},re(){let t=this.flyweight,e=a.picker(t,"clientHeight=>height,clientWidth=>width");this.$nextTick(()=>{let[h,r]=this.offset,i=this.width;i==0&&(i=e.width);let n=i+h,l=this.height+r,o=e.width/n>>0,c=e.height/l>>0;this.row=c+2,this.column=o,this.fwheight=l,this.H=this.count/o*l;let u=e.width%n/(o-1)>>0,y=Math.min(this.count,o*this.row),d=y-1,f,g;for(;y-- >0;)f=d-y,g=this.flys[f],t=this.flyweights[f],this.$set(this.flyweights,f,{data:g,top:(f/o>>0)*l,left:f%o*(n+u),index:f/o>>0});this.flyweights.length=d+1,this.scroll({target:this.flyweight})})}}};function x(t,e,h,r,i,n){return s.openBlock(),s.createElementBlock("div",{ref:"flyweight",class:s.normalizeClass(["flyweight",{"flyweight-active":i.actice}]),style:s.normalizeStyle({"--width":h.width?h.width+"px":"100%","--height":h.height+"px"}),onScroll:e[0]||(e[0]=(...l)=>n.scroll&&n.scroll(...l))},[s.createElementVNode("div",{class:"flyweight-all",style:s.normalizeStyle({"--flyweight-height":i.H+30+"px"})},[(s.openBlock(!0),s.createElementBlock(s.Fragment,null,s.renderList(i.flyweights,(l,o)=>(s.openBlock(),s.createElementBlock("div",{key:o,style:s.normalizeStyle({top:l.top+"px",left:l.left+"px"})},[s.renderSlot(t.$slots,"default",{data:l.data,index:l.index},void 0,!0)],4))),128))],4)],38)}const w=p(_,[["render",x],["__scopeId","data-v-77fef7f4"]]),v=[w],k={install(t){v.forEach(e=>{t.component("s-"+e.__name.toLowerCase(),e)})}};exports.Flyweight=w;exports.default=k;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("@soei/util"),h=require("vue");const p=(e,t)=>{const i=e.__vccOpts||e;for(const[r,s]of t)i[r]=s;return i};let m=e=>e==null||e==null,x=(...e)=>{console.info("::::FLYWEIGHT",...e)};const k={name:"Flyweight",props:{flys:{type:Array,default:()=>[]},width:{type:Number,default:0},height:{type:Number,default:100},offset:{type:Array,default:()=>[0,0]},lazy:{type:Number,default:100},view:{type:Object,default:()=>null},index:{type:Number,default:0}},computed:{flyweight(){return this.$refs.flyweight}},data(){return{flyweights:[],actice:!1,Height:null,column:1,row:1,fwheight:10,count:0,task:[]}},watch:{flys(e){this.count=e.length,this.re();let t=this.task.shift();t&&this.$nextTick(()=>{this.setview(t)})},view:{handler(e){this.setview(e)},immediate:!0},index(e){this.setindex(e)}},mounted(){this.flyweights=[],this.$set||(this.$set=(e,t,i)=>{e[t]=i}),this.setindex(this.index);try{new ResizeObserver(()=>{this.re(),this.$emit("resize")}).observe(this.flyweight)}catch(e){x(e)}},methods:{cheackflys(e){if(!this.flys.length)return e&&this.task.push(e),!0},setview(e){f.runer([this.cheackflys,t=>{t=t||{};let i=t.index||f.each(this.flys,(r,s,n,l)=>{if(s[n]==l)return r},t.picker,t.id);m(i)||this.setindex(i)}],this,e)},setindex(e){f.runer([this.cheackflys,({index:t})=>{this.$nextTick(()=>{let i=t/this.column>>0,r=this.fwheight;(this.flyweight.scrollTop/r>>0)+this.row-i-1>0||(this.flyweight.scrollTop=i*r,this.scroll())})}],this,{index:e})},lazyrun(e,t){clearTimeout(this.time),this.time=setTimeout(()=>{f.runer(e)},t||this.lazy)},run(e){let t=f.picker(e.target,"scrollTop=>top");f.each(this.flyweights,(i,r,s,n,l,o,u,d)=>{if(s=i/l>>0,u=s+n*(+(s<o%n)+(o/n>>0)),d=u*l+i%l,d>=this.count){this.lazyrun(()=>this.$emit("onend",!0));return}r.index=u,r.top=r.index*this.fwheight,r.data=this.flys[d]},null,this.row,this.column,t.top/this.fwheight>>0)},scroll(e){this.run(e||{target:this.flyweight})},re(){let e=this.flyweight,t=f.picker(e,"clientHeight=>height,clientWidth=>width");this.$nextTick(()=>{let[i,r]=this.offset,s=this.width;s==0&&(s=t.width);let n=s+i,l=this.height+r,o=t.width/n>>0,u=t.height/l>>0;this.row=u+2,this.column=o,this.fwheight=l;let d=t.width%n/(o-1)>>0;this.Height=Math.ceil(this.count/o)*l;let y=Math.min(this.count,o*this.row),a=y-1,c,g;for(;y-- >0;)c=a-y,g=this.flys[c],e=this.flyweights[c],this.$set(this.flyweights,c,{data:g,top:(c/o>>0)*l,left:c%o*(n+d),index:c/o>>0});this.flyweights.length=a+1,this.scroll()})}}};function _(e,t,i,r,s,n){return h.openBlock(),h.createElementBlock("div",{ref:"flyweight",class:h.normalizeClass(["flyweight",{"flyweight-active":s.actice}]),style:h.normalizeStyle({"--width":i.width?i.width+"px":"100%","--height":i.height+"px"}),onScroll:t[0]||(t[0]=(...l)=>n.scroll&&n.scroll(...l))},[h.createElementVNode("div",{class:"flyweight-all",style:h.normalizeStyle({"--flyweight-height":s.Height+"px"})},[(h.openBlock(!0),h.createElementBlock(h.Fragment,null,h.renderList(s.flyweights,(l,o)=>(h.openBlock(),h.createElementBlock("div",{key:o,style:h.normalizeStyle({top:l.top+"px",left:l.left+"px"})},[h.renderSlot(e.$slots,"default",{data:l.data,index:l.index},void 0,!0)],4))),128))],4),s.flyweights.length?h.renderSlot(e.$slots,"end",{key:0},void 0,!0):h.createCommentVNode("",!0)],38)}const w=p(k,[["render",_],["__scopeId","data-v-d96197a5"]]),v=[w],z={install(e){v.forEach(t=>{e.component("s-"+t.name.toLowerCase(),t)})}};exports.Flyweight=w;exports.default=z;

package/dist/Flyweight.js

@@ -1,15 +1,16 @@
-import { each as p, runer as _, picker as m } from "@soei/util";
-import { openBlock as a, createElementBlock as d, normalizeClass as x, normalizeStyle as y, createElementVNode as v, Fragment as z, renderList as b, renderSlot as k } from "vue";
-const T = (t, e) => {
-  const l = t.__vccOpts || t;
-  for (const [s, i] of e)
-    l[s] = i;
-  return l;
+import { runer as d, each as m, picker as x } from "@soei/util";
+import { openBlock as y, createElementBlock as g, normalizeClass as k, normalizeStyle as w, createElementVNode as v, Fragment as z, renderList as b, renderSlot as _, createCommentVNode as T } from "vue";
+const N = (t, e) => {
+  const i = t.__vccOpts || t;
+  for (const [l, s] of e)
+    i[l] = s;
+  return i;
 };
-let H = (...t) => {
+let $ = (t) => t == null || t == null, F = (...t) => {
   console.info("::::FLYWEIGHT", ...t);
 };
-const N = {
+const H = {
+  name: "Flyweight",
   props: {
     flys: {
       type: Array,
@@ -33,7 +34,7 @@ const N = {
     },
     view: {
       type: Object,
-      default: () => ({ picker: "id" })
+      default: () => null
     },
     index: {
       type: Number,
@@ -49,122 +50,154 @@ const N = {
     return {
       flyweights: [],
       actice: !1,
-      H: null,
+      Height: null,
       column: 1,
       row: 1,
       fwheight: 10,
-      count: 0
+      count: 0,
+      task: []
     };
   },
   watch: {
     flys(t) {
       this.count = t.length, this.re();
+      let e = this.task.shift();
+      e && this.$nextTick(() => {
+        this.setview(e);
+      });
     },
-    view(t) {
-      let e = p(this.flys, (l, s, i, r) => {
-        if (s[i] == r)
-          return l;
-      }, t.picker, t.id);
-      this.$emit("update:index", e);
+    view: {
+      handler(t) {
+        this.setview(t);
+      },
+      immediate: !0
     },
     index(t) {
-      let e = t / this.column >> 0;
-      (this.flyweight.scrollTop / this.fwheight >> 0) + this.row - e - 1 > 0 || (this.flyweight.scrollTop = e * this.fwheight);
+      this.setindex(t);
     }
   },
   mounted() {
-    this.flyweights = [];
+    this.flyweights = [], this.$set || (this.$set = (t, e, i) => {
+      t[e] = i;
+    }), this.setindex(this.index);
     try {
       new ResizeObserver(() => {
         this.re(), this.$emit("resize");
       }).observe(this.flyweight);
     } catch (t) {
-      H(t);
+      F(t);
     }
   },
   methods: {
+    cheackflys(t) {
+      if (!this.flys.length)
+        return t && this.task.push(t), !0;
+    },
+    setview(t) {
+      d([this.cheackflys, (e) => {
+        e = e || {};
+        let i = e.index || m(this.flys, (l, s, n, h) => {
+          if (s[n] == h)
+            return l;
+        }, e.picker, e.id);
+        $(i) || this.setindex(i);
+      }], this, t);
+    },
+    setindex(t) {
+      d([this.cheackflys, ({ index: e }) => {
+        this.$nextTick(() => {
+          let i = e / this.column >> 0, l = this.fwheight;
+          (this.flyweight.scrollTop / l >> 0) + this.row - i - 1 > 0 || (this.flyweight.scrollTop = i * l, this.scroll());
+        });
+      }], this, { index: t });
+    },
     lazyrun(t, e) {
       clearTimeout(this.time), this.time = setTimeout(() => {
-        _(t);
+        d(t);
       }, e || this.lazy);
     },
     run(t) {
-      let e = m(t.target, "scrollTop=>top");
-      p(
+      let e = x(t.target, "scrollTop=>top");
+      m(
         this.flyweights,
-        (l, s, i, r, h, n, f, c) => {
-          if (i = l / h >> 0, f = i + r * /* 偏移量, 如果超出顶部 + 1轮,排列到列队后, 否则保持在当前*/
-          (+(i < n % r) + (n / r >> 0)), c = f * h + l % h, c >= this.count)
-            return !0;
-          s.index = f, s.top = s.index * this.fwheight, s.data = this.flys[c];
+        (i, l, s, n, h, r, f, c) => {
+          if (s = i / h >> 0, f = s + n * /* 偏移量, 如果超出顶部 + 1轮,排列到列队后, 否则保持在当前*/
+          (+(s < r % n) + (r / n >> 0)), c = f * h + i % h, c >= this.count) {
+            this.lazyrun(() => this.$emit("onend", !0));
+            return;
+          }
+          l.index = f, l.top = l.index * this.fwheight, l.data = this.flys[c];
         },
         null,
         this.row,
         this.column,
         /* 显示区域第一行的索引 */
         e.top / this.fwheight >> 0
-      ) && this.lazyrun(() => this.$emit("onend", !0));
+      );
     },
     scroll(t) {
-      this.run(t);
+      this.run(t || { target: this.flyweight });
     },
     re() {
-      let t = this.flyweight, e = m(t, "clientHeight=>height,clientWidth=>width");
+      let t = this.flyweight, e = x(t, "clientHeight=>height,clientWidth=>width");
       this.$nextTick(() => {
-        let [l, s] = this.offset, i = this.width;
-        i == 0 && (i = e.width);
-        let r = i + l, h = this.height + s, n = e.width / r >> 0, f = e.height / h >> 0;
-        this.row = f + 2, this.column = n, this.fwheight = h, this.H = this.count / n * h;
-        let c = e.width % r / (n - 1) >> 0, u = Math.min(this.count, n * this.row), w = u - 1, o, g;
+        let [i, l] = this.offset, s = this.width;
+        s == 0 && (s = e.width);
+        let n = s + i, h = this.height + l, r = e.width / n >> 0, f = e.height / h >> 0;
+        this.row = f + 2, this.column = r, this.fwheight = h;
+        let c = e.width % n / (r - 1) >> 0;
+        this.Height = Math.ceil(this.count / r) * h;
+        let u = Math.min(this.count, r * this.row), a = u - 1, o, p;
         for (; u-- > 0; )
-          o = w - u, g = this.flys[o], t = this.flyweights[o], this.$set(this.flyweights, o, {
-            data: g,
-            top: (o / n >> 0) * h,
-            left: o % n * (r + c),
-            index: o / n >> 0
+          o = a - u, p = this.flys[o], t = this.flyweights[o], this.$set(this.flyweights, o, {
+            data: p,
+            top: (o / r >> 0) * h,
+            left: o % r * (n + c),
+            index: o / r >> 0
           });
-        this.flyweights.length = w + 1, this.scroll({ target: this.flyweight });
+        this.flyweights.length = a + 1, this.scroll();
       });
     }
   }
 };
-function O(t, e, l, s, i, r) {
-  return a(), d("div", {
+function O(t, e, i, l, s, n) {
+  return y(), g("div", {
     ref: "flyweight",
-    class: x(["flyweight", {
-      "flyweight-active": i.actice
+    class: k(["flyweight", {
+      "flyweight-active": s.actice
     }]),
-    style: y({
-      "--width": l.width ? l.width + "px" : "100%",
-      "--height": l.height + "px"
+    style: w({
+      "--width": i.width ? i.width + "px" : "100%",
+      "--height": i.height + "px"
     }),
-    onScroll: e[0] || (e[0] = (...h) => r.scroll && r.scroll(...h))
+    onScroll: e[0] || (e[0] = (...h) => n.scroll && n.scroll(...h))
   }, [
     v("div", {
       class: "flyweight-all",
-      style: y({
-        "--flyweight-height": i.H + 30 + "px"
+      style: w({
+        "--flyweight-height": s.Height + "px"
       })
     }, [
-      (a(!0), d(z, null, b(i.flyweights, (h, n) => (a(), d("div", {
-        key: n,
-        style: y({
+      (y(!0), g(z, null, b(s.flyweights, (h, r) => (y(), g("div", {
+        key: r,
+        style: w({
           top: h.top + "px",
           left: h.left + "px"
         })
       }, [
-        k(t.$slots, "default", {
+        _(t.$slots, "default", {
           data: h.data,
           index: h.index
         }, void 0, !0)
       ], 4))), 128))
-    ], 4)
+    ], 4),
+    s.flyweights.length ? _(t.$slots, "end", { key: 0 }, void 0, !0) : T("", !0)
   ], 38);
 }
-const E = /* @__PURE__ */ T(N, [["render", O], ["__scopeId", "data-v-77fef7f4"]]), F = [E], S = {
+const E = /* @__PURE__ */ N(H, [["render", O], ["__scopeId", "data-v-d96197a5"]]), L = [E], S = {
   install(t) {
-    F.forEach((e) => {
-      t.component("s-" + e.__name.toLowerCase(), e);
+    L.forEach((e) => {
+      t.component("s-" + e.name.toLowerCase(), e);
     });
   }
 };

package/dist/style.css

@@ -1 +1 @@
-.flyweight[data-v-77fef7f4]{height:100%;width:100%;overflow:auto;position:relative}.flyweight .flyweight-all[data-v-77fef7f4]{height:var(--flyweight-height)}.flyweight .flyweight-all[data-v-77fef7f4]>*{width:var(--width);height:var(--height);position:absolute}
+.flyweight[data-v-d96197a5]{height:100%;width:100%;overflow:auto;position:relative}.flyweight .flyweight-all[data-v-d96197a5]{height:var(--flyweight-height)}.flyweight .flyweight-all[data-v-d96197a5]>*{width:var(--width);height:var(--height);position:absolute}

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@soei/flyweight",
   "private": false,
-  "version": "0.0.1",
+  "description": "Vue组件, 列表de享元模式~减少DOM节点 flyweight",
+  "version": "0.0.2",
   "type": "module",
   "main": "dist/Flyweight.cjs",
   "module": "dist/Flyweight.js",
@@ -20,7 +21,6 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",
-    "sass": "^1.69.5",
     "scss": "^0.2.4",
     "vite": "^4.4.5"
   }

package/src/Flyweight.vue

@@ -6,7 +6,7 @@
         '--height': height + 'px'
     }" @scroll="scroll">
         <div class="flyweight-all" :style="{
-        '--flyweight-height': (H + 30) + 'px'
+        '--flyweight-height': Height + 'px'
     }">
             <div v-for="(item, index) in flyweights" :key="index" :style="{
         top: item.top + 'px',
@@ -15,17 +15,23 @@
                 <slot :data="item.data" :index="item.index"></slot>
             </div>
         </div>
+        <slot name="end" v-if="flyweights.length"></slot>
     </div>
 </template>
 
 <script>
 import { each, picker, runer } from '@soei/util';
 
+let isNil = (data) => {
+    return data == null || data == undefined;
+}
+
 let Log = (...args) => {
     console.info('::::FLYWEIGHT', ...args);
 }
 
 export default {
+    name: 'Flyweight',
     props: {
         flys: {
             type: Array,
@@ -49,7 +55,7 @@ export default {
         },
         view: {
             type: Object,
-            default: () => ({ picker: 'id' })
+            default: () => (null)
         },
         index: {
             type: Number,
@@ -65,38 +71,42 @@ export default {
         return {
             flyweights: [],
             actice: false,
-            H: null,
+            Height: null,
             column: 1,
             row: 1,
             fwheight: 10,
 
-            count: 0
+            count: 0,
+            task: []
         }
     },
     watch: {
         flys(data) {
             this.count = data.length;
             this.re();
+            let task = this.task.shift();
+            if (task) {
+                this.$nextTick(() => {
+                    this.setview(task);
+                })
+            }
         },
-        view(data) {
-            // Log('---------------')
-            let index = each(this.flys, (k, v, attr, value) => {
-                if(v[attr] == value) return k;
-            }, data.picker, data.id);
-            // runer('dispatchEvent', window, new Event('resize', { view: this.flyweight, bubbles: true, cancelable: true }));
-            this.$emit('update:index', index);
+        view: {
+            handler(data) {
+                this.setview(data)
+            },
+            immediate: true
         },
         index(index) {
-            let line = index / this.column >> 0;
-            let first = this.flyweight.scrollTop / this.fwheight >> 0;
-            let offset = first + this.row - line - 1
-            // Log(data, first, line, offset);
-            if (offset > 0 ) return;
-            this.flyweight.scrollTop = line * this.fwheight;
+            this.setindex(index);
         }
     },
     mounted() {
         this.flyweights = [];
+        this.$set || (this.$set = (list, index, value) => {
+            list[index] = value;
+        })
+        this.setindex(this.index);
         try {
             const resizeObserver = new ResizeObserver(() => {
                 this.re();
@@ -109,6 +119,37 @@ export default {
         }
     },
     methods: {
+        cheackflys(data) {
+            let length = this.flys.length;
+            if (!length) {
+                data && this.task.push(data);
+                return true;
+            }
+        },
+        setview(data) {
+            runer([this.cheackflys, (data) => {
+                data = data || {};
+                let index = data.index || each(this.flys, (k, v, attr, value) => {
+                    if (v[attr] == value) return k;
+                }, data.picker, data.id);
+
+                isNil(index) || this.setindex(index);
+            }], this, data)
+        },
+        setindex(index) {
+            runer([this.cheackflys, ({ index }) => {
+                this.$nextTick(() => {
+                    let line = index / this.column >> 0;
+                    let height = this.fwheight;
+                    let first = this.flyweight.scrollTop / height >> 0;
+                    let offset = first + this.row - line - 1;
+                    if (offset > 0) return;
+                    this.flyweight.scrollTop = line * height;
+
+                    this.scroll()
+                })
+            }], this, { index: index })
+        },
         lazyrun(back, time) {
             clearTimeout(this.time);
             this.time = setTimeout(() => {
@@ -117,7 +158,7 @@ export default {
         },
         run(e) {
             let position = picker(e.target, 'scrollTop=>top');
-            if (each(this.flyweights, (k, v, offset, row, column, first, index, i) => {
+            each(this.flyweights, (k, v, offset, row, column, first, index, i) => {
                 offset = k / column >> 0;
                 index = offset + row * (
                     /* 偏移量, 如果超出顶部 + 1轮,排列到列队后, 否则保持在当前*/
@@ -127,9 +168,9 @@ export default {
                 );
                 i = index * column + k % column;
 
-                // Log(k, i, index);
                 if (i >= this.count) {
-                    return true;
+                    this.lazyrun(() => this.$emit('onend', true));
+                    return /* true */;
                 }
                 v.index = index;
                 v.top = v.index * this.fwheight;
@@ -140,17 +181,15 @@ export default {
                 this.column,
                 /* 显示区域第一行的索引 */
                 position.top / this.fwheight >> 0
-            )) {
-                this.lazyrun(() => this.$emit('onend', true))
-            }
+            )
         },
         scroll(e) {
-            this.run(e);
+            this.run(e || { target: this.flyweight });
         },
+
         re() {
             let flyweight = this.flyweight;
             let wh = picker(flyweight, 'clientHeight=>height,clientWidth=>width');
-            // Log(wh, wh.width / this.width, wh.height / this.height);
             this.$nextTick(() => {
                 let [x, y] = this.offset,
                     W = this.width;
@@ -164,10 +203,10 @@ export default {
                 this.row = row + 2/* 上下各一行补位 */;
                 this.column = column;
                 this.fwheight = height;
-                /* 总高度 */
-                this.H = (this.count / column) * height;
                 /* 偏移量 */
                 let margin = (wh.width % width) / (column - 1) >> 0;
+                /* 总高度 */
+                this.Height = Math.ceil(this.count / column) * height;
                 /* 计算数量 */
                 let count = Math.min(this.count, column * this.row),
                     length = count - 1,
@@ -182,11 +221,11 @@ export default {
                         top: (index / column >> 0) * height,
                         left: (index % column) * (width + margin),
                         index: index / column >> 0
-                    });
+                    })
                 }
                 this.flyweights.length = length + 1;
 
-                this.scroll({ target: this.flyweight })
+                this.scroll()
             });
         }
     }