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

哪個(gè)屬性控制越界效果？

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

怎么找到解決方法？

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

怎么解決的？

1. 手動(dòng)更改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組件時(shí)傳入edgeEasingEnabled = {false}屬性

注意事項(xiàng)：

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