好久沒碰前端了，寫個輪播都廢了我這麼大功夫。
最近閒著沒事寫一寫小程式，有個要實現的功能是這樣的：
如圖，上面的色塊是個輪播，下面的也是輪播。
滑動上面的輪播，下面的也跟著動，滑動下面的，上面也跟著動。
什麼，你說哪個傻子會做這種功能？
我啊。
其實做出來的效果還挺不錯的，就看你往輪播裡面放什麼內容。
我做出來的效果是下面這樣的：
當然你也可以自己體驗一下效果：
還挺不錯的吧，快誇誇我。
但是真的好久沒寫前端了呀，這點功能都讓我寫了好久。
還本來就菜。
話不多說，上點正菜吧。
思路及實現方式
小程式的輪播比較容易實現，畢竟有個swiper嘛。
上面的功能要實現，其實就拆分成下面幾點：
- 輪播同步移動
- 環形輪播
- 居中顯示
輪播同步移動，這個可以藉助swiper的current屬性，current是幾，輪播就顯示第幾張圖片，從0開始計。
再寫個函式，用swiper的bindchange呼叫，實時改變current的值，就能實現上下兩張輪播圖同步移動了。
我就直接貼程式碼了：
// index.js
Page({
data: {
block: ["blue", "yellow", "green", "red"],
// swiper當前是第幾張圖
swiperCurrent: 0
},
changeSwiper(e) {
// 獲取當前輪播的角標
let current = e.detail.current;
// 賦值
this.setData({
swiperCurrent: current
})
}
})
<!--index.wxml-->
<view class="container">
<swiper circular="true" class="starSwiper" current="{{swiperCurrent}}" bindchange="changeSwiper">
<swiper-item wx:for="{{block}}" wx:key="i" wx:for-index="index" class="starSwiperItem">
<view style="background-color: {{item}};width: 750rpx;height: 600rpx;">
</view>
</swiper-item>
</swiper>
<swiper circular="true" class="iconSwiper" current="{{swiperCurrent}}" bindchange="changeSwiper" previous-margin="300rpx" next-margin="300rpx" style="height: 100rpx;">
<swiper-item wx:for="{{block}}" wx:for-index="index" wx:key="i" class="iconSwiperItem">
<view style="background-color: {{item}};width: 100rpx;height: 100rpx;">
</view>
</swiper-item>
</swiper>
</view>
下圖畫紅線的，就是輪播同步的關鍵。
其實就是定義一個變數，讓輪播實時顯示這個變數所在的輪播圖，每次滑動的時候，保持這個變數一致就行。
環形輪播就更容易實現了，不過這真的是個很冷門的知識點，百度了下才知道，就是下面這個標籤：
設定一下swiper的circular屬性為true就行。
<swiper circular="true"></swiper>
然後你就會發現這個輪播怎麼劃也劃不完啦。
最後是整個輪播圖的居中顯示。
這個其實前端稍微熟悉點的人都知道，就是用了很簡單的flex。
flex佈局是個很經典的css樣式，說到flex，我總會想起阮一峰老師的flex教程。
這個人，每次搜flex都能搜到他的教程。
技術博主很叼的一點是，當你不管怎麼搜都能搜到他的時候，你就會關注他了。
我記得我剛開始學flex的時候就是看他的文章，那還是大二的時候，沒想到這麼久還要看他的文章，真是永遠的經典。
我當然不會承認是我一點進步都沒有。
這裡貼一貼阮一峰老師的教程，有興趣的朋友可以去看一看：《Flex 佈局教程：語法篇》
再貼一貼這裡實現flex的css程式碼：
/**index.wsxx**/
page {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: space-between;
}
swiper {
width: 100%;
height: 500rpx;
}
最後
最後說一點廢話，工作之後因為主業是java，平時所做、所學的都幾乎都是後端和運維了。
很久沒有這樣，一個產品的全部過程都由自己來做，這是個很不錯、也很難受的過程。
從製圖、前端、後端再到部署，人是不可能什麼都精通的，所以這個過程中，疑問和百度比較多。
讀書的時候因為經常這樣，導致個人發展有點，什麼都會，但又什麼都不精。
為此我吃了很多虧，出來找工作還差點找不到。
後來看到網上很多言論，說程式設計師應該發展深度，再發展廣度。
意思就是說，假如你現在是個前端，那麼你應該把前端學精，再去考慮學學後端，興趣也好，增加個人競爭力也罷。
我也不知道這個看法是不是對的，但畢竟年輕人嘛，聽話照做就不是年輕人了。
我樂意這樣做，這個過程我還樂在其中，這就夠了。
在做這個產品的過程我也學到了許多東西，比如為了有一個合適的背景圖，我拿起了很久沒用的ps，比如如何用java的Graphic2D去畫分享海報。
下面也打算寫寫這個，分享一下。
畢竟是做了努力的作品，還是希望有人看它、用它。
如果你覺得這個東西還挺有趣，願意把它分享給你的朋友，那就更好了。
所以最後就再分享一下這個作品吧。
enjoy。