anima-basescroller - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

package.json

 {
   "name": "anima-basescroller",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "滚动选择组件。",
@@ -5,0 +5,0 @@ "keywords": [],

README.md

@@ -37,2 +37,4 @@ # basescroller
  * prev 之前的值
+* itemHeight `number` 每个可选项的高度值，单位 px，默认值为 34。添加此选项需要修改样式表中 .scroller-item 下的 height 和 line-height 为 __itemHeight__；.current-indicator 下的 height 为 __itemHeight - 2__（1px 的 border-top 和 border-bottom）。同时建议设置 .scroller-item 合适的 font-size。  *[optional]*
+* itemsNumber `number` 组件可见条目的数量，__必须为奇数__，默认值为 7。添加此选项需要修改样式表中 .scroller-component 的 height 为 __itemsNumber * itemHeight__；以及 .current-indicator 下的 top 为 __itemHeight * (itemsNumber - 1) / 2__。 *[optional]*
 
@@ -39,0 +41,0 @@ ### 实例方法

src/basescroller.js

@@ -7,5 +7,2 @@ // 每个条目的高度
 
-// 留白区域高度
-var BLANK_EDGE_HEIGHT = ITEM_HEIGHT * BLANK_ITEM_NUMBER;
-
 // 快速拖动时的速度调节因数
@@ -26,5 +23,2 @@ var SPEED_FACTOR = 3;
 
-// scroller 能达到的最大 translate Y 值，通过 -webkit-transform 设置
-var MAX_TRANSITION_Y = ITEM_HEIGHT * (BLANK_ITEM_NUMBER + 1);
-
 // 回调函数延迟毫秒数
@@ -51,7 +45,23 @@ var CALLBACK_DELAY = 50;
 
+  var itemsNumber = opts.itemsNumber;
+  if (itemsNumber && itemsNumber % 2 == 0) {
+    throw new Error('Option itemsNumber must be odd number');
+  }
+
+  this.itemHeight = parseInt(opts.itemHeight) || ITEM_HEIGHT;
+  this.blankItemNumber = itemsNumber ? (itemsNumber - 1) / 2 : BLANK_ITEM_NUMBER;
+
+  // 留白区域高度
+  this.blankEdgeHeight = this.itemHeight * this.blankItemNumber;
+
+  // scroller 能达到的最大 translate Y 值，通过 -webkit-transform 设置
+  this.maxTransitionY = this.itemHeight * (this.blankItemNumber + 1);
+
   var container = opts.container;
-  if (container && container.nodeType == Element.ELEMENT_NODE) {
+  if (container && container.nodeType == Node.ELEMENT_NODE) {
     container.appendChild(this.scrollerComponent);
   }
 
+  this.parentHeight = this.blankEdgeHeight * 2 + this.itemHeight;
+
   if (opts.id) {
@@ -85,2 +95,4 @@ this.scrollerComponent.setAttribute('id', opts.id);
     var self = this;
+    var itemHeight = this.itemHeight;
+    var blankEdgeHeight = this.blankEdgeHeight;
     var scroller = this.scroller;
@@ -125,7 +137,7 @@ var parent = this.scrollerComponent;
           animationTime = Math.abs(-(self.scrollerHeight - parentHeight) - currentTransitionY) / speed;
-          targetTransitionY = -(self.scrollerHeight - parentHeight) - BLANK_EDGE_HEIGHT;
+          targetTransitionY = -(self.scrollerHeight - parentHeight) - blankEdgeHeight;
         } else {
           // 向下拖动
           animationTime = Math.abs(currentTransitionY) / speed;
-          targetTransitionY = BLANK_EDGE_HEIGHT;
+          targetTransitionY = blankEdgeHeight;
         }
@@ -142,3 +154,3 @@
 
-        targetTransitionY = Math.round(targetTransitionY / ITEM_HEIGHT) * ITEM_HEIGHT;
+        targetTransitionY = Math.round(targetTransitionY / itemHeight) * itemHeight;
         animationTime = animationTime / 1000;
@@ -148,14 +160,14 @@ } else {
         animationTime = SLOW_DRAG_ANIMATION_TIME;
-        targetTransitionY = Math.round(currentTransitionY / ITEM_HEIGHT) * ITEM_HEIGHT;
+        targetTransitionY = Math.round(currentTransitionY / itemHeight) * itemHeight;
       }
 
       // 处理滚动内容超出组件显示范围的情况
-      if (targetTransitionY > BLANK_EDGE_HEIGHT) {
-        targetTransitionY = BLANK_EDGE_HEIGHT;
-      } else if (targetTransitionY < self.minTransitionY + ITEM_HEIGHT) {
-        targetTransitionY = self.minTransitionY + ITEM_HEIGHT
+      if (targetTransitionY > blankEdgeHeight) {
+        targetTransitionY = blankEdgeHeight;
+      } else if (targetTransitionY < self.minTransitionY + itemHeight) {
+        targetTransitionY = self.minTransitionY + itemHeight
       }
 
       // 如果实际滚动距离很短，使用慢速拖动的动画时间
-      if (Math.abs(targetTransitionY - currentTransitionY) < BLANK_EDGE_HEIGHT) {
+      if (Math.abs(targetTransitionY - currentTransitionY) < blankEdgeHeight) {
         animationTime = SLOW_DRAG_ANIMATION_TIME;
@@ -168,3 +180,3 @@ }
       // 获取选中元素的索引
-      var index = Math.abs(targetTransitionY / ITEM_HEIGHT - BLANK_ITEM_NUMBER)
+      var index = Math.abs(targetTransitionY / itemHeight - self.blankItemNumber)
       var selectedElem = scroller.children[parseInt(index)];
@@ -189,5 +201,4 @@ if (selectedElem) {
   _resetHeight: function() {
-    this.scrollerHeight = this.scroller.clientHeight;
-    this.parentHeight = this.scrollerComponent.clientHeight;
-    this.minTransitionY = -(this.scrollerHeight + MAX_TRANSITION_Y - this.parentHeight);
+    this.scrollerHeight = this.scroller.childElementCount * this.itemHeight;
+    this.minTransitionY = -(this.scrollerHeight + this.maxTransitionY - this.parentHeight);
   },
@@ -206,4 +217,4 @@
     var newClientY = currentTransitionY + offsetY;
-    if (newClientY > MAX_TRANSITION_Y) {
-      newClientY = MAX_TRANSITION_Y;
+    if (newClientY > this.maxTransitionY) {
+      newClientY = this.maxTransitionY;
     } else if (newClientY < this.minTransitionY) {
@@ -256,3 +267,3 @@ newClientY = this.minTransitionY;
 
-    var transitionY = BLANK_EDGE_HEIGHT - ITEM_HEIGHT * index;
+    var transitionY = this.blankEdgeHeight - this.itemHeight * index;
     this._setTransitionDuratoin(RESET_POSITION_ANIMATION_TIME);
@@ -323,3 +334,3 @@ this._setTransformY(transitionY);
   appendTo: function(container) {
-    if (container && container.nodeType == Element.ELEMENT_NODE) {
+    if (container && container.nodeType == Node.ELEMENT_NODE) {
       container.appendChild(this.scrollerComponent);
@@ -326,0 +337,0 @@ this._resetHeight();

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

14665

increased by8.05%

Lines of code

314

increased by2.61%

Number of lines in readme file

51

increased by4.08%

No dependency changes