前段時間在項目中采用了Nuka-Carousel這個輪播圖/走馬燈插件來實現(xiàn)整屏上下滑的效果，但是在實際開發(fā)中遇到了越界效果始終存在的問題，這個效果在某些場景下會起到適得其反的效果。

哪個屬性控制越界效果？

Nuka-Carousel中，控制越界效果的是edgeEasing這個props屬性，有多種效果可供選擇，具體參考文檔

怎么找到解決方法？

遇到這個問題的第一時間，是發(fā)揮各大搜索引擎的作用，搜索Nuka-Carousel關鍵字相關，不過很可惜并沒有找到合適的答案。于是進入了Nuka-Carousel的github查看Issues，搜索關鍵字easing，順利找到有與我相同需求的人，Is there a way to disable an edge easing? #203

怎么解決的？

1. 手動更改Nuka-Carousel包的文件，找到src/carousel.js，做如下修改

// 在大約65-75行之間找到edgeEasing: React.PropTypes.string，在下一行加入代碼：
edgeEasingEnabled: React.PropTypes.bool,

// 在大約100行左右找到edgeEasing: 'easeOutElastic'，在下一行加入代碼：
edgeEasingEnabled: true,

// 在大約250行左右找到
//self.setState({
//  left: self.props.vertical ? 0 : self.getTargetLeft(self.touchObject.length * self.touchObject.direction),
//  top: self.props.vertical ? self.getTargetLeft(self.touchObject.length * self.touchObject.direction) : 0
//});
// 改成：
self.props.edgeEasingEnabled && self.setState({
  left: self.props.vertical ? 0 : self.getTargetLeft(self.touchObject.length * self.touchObject.direction),
  top: self.props.vertical ? self.getTargetLeft(self.touchObject.length * self.touchObject.direction) : 0
});

// 在大約320行左右找到
//self.setState({
//  left: self.props.vertical ? 0 : self.getTargetLeft(self.touchObject.length * self.touchObject.direction),
//  top: self.props.vertical ? self.getTargetLeft(self.touchObject.length * self.touchObject.direction) : 0
//});
// 改成：
self.props.edgeEasingEnabled && self.setState({
  left: self.props.vertical ? 0 : self.getTargetLeft(self.touchObject.length * self.touchObject.direction),
  top: self.props.vertical ? self.getTargetLeft(self.touchObject.length * self.touchObject.direction) : 0
});

同理，修改lib/carousel.js，與上述基本一致。

2. 使用Nuka-Carousel組件時傳入edgeEasingEnabled = {false}屬性

注意事項：

做了如上修改之后，用git管理代碼，在別的電腦或其他人協(xié)作開發(fā)，都可能無法同步到你對這個包的修改（因為node_modules文件夾通常不會被git同步），所以要做好文檔說明備注。在Nuka-Carousel官方對這個問題進行補充修復之前，只能通過這種方式來修改。