Met a demand, the need to achieve automatic rotation in the small program of the gallery effect, if the web version of the words have a large number of ready-made libraries can be used, but the small program to find a circle did not find a similar library, had to think of their own way.

The easiest way to find out after stepping on multiple pits is to use CSS animation to achieve this, but the disadvantage is that it cannot be manually dragged.

Post the effect drawing first

The first step in HTML

Because you have to scroll indefinitely, you need to switch back to the first image after the last one. In order to make the user unaware of the switching process, it is necessary to copy the beginning image and the end, and copy wx:for again in the small program, pay attention to modify the value of wx:key to avoid repetition.

The value of keyframes cannot be set dynamically. After copying all images, you only need to set the end progress value to -50%.

<view class="series">
    <view
        style="animation: {{duration}}ms scroll-animation linear infinite; width: {{seriesWidth*2}}rpx"
        class="images">
        <view class="row" wx:for="{{productSeries}}" wx:key="{{index}}">
            <image
                wx:for="{{item}}"
                wx:for-item="img"
                wx:for-index="imgIndex"
                wx:key="{{img + imgIndex}}"
                src="{{img}}"
            ></image>
            <image
                wx:for="{{item}}"
                wx:for-item="img"
                wx:for-index="imgIndex"
                wx:key="{{img + imgIndex}}-extra"
                src="{{img}}"
            ></image>
        </view>
    </view>
</view>
Copy the code

The second step of CSS

The CSS animation is simple, let the gallery rotate to -50% and jump back to 0%, and set infinite. The reason for using style instead of class is that the gallery director is uncertain, and the duration of the animation is set according to the number of images. Width also needs to be set dynamically, automatically calculating width will have problems.

.series {
    overflow: hidden;
    .images {
        min-width: 100%;
        .row {
            white-space: nowrap;
            line-height: 1;
            &:last-child {
                transform: translateX(-100rpx); }}image {
            width: 180rpx;
            height: 180rpx;
            margin: 0 10rpx 8rpx 0; }}}@keyframes scroll-animation {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(-50%); }}Copy the code

The third step js

We also need to calculate the animation length and view length through JS. The number 190 is the value of image width + margin-right. I’m not sure why I need to reduce margin-right again, but if I don’t reduce this value, the animation will feel a little bit stuck at the end, which is not smooth. I hope you can explain the principle.

data = {
    productSeries: [['/images/house1.png'.'/images/house2.png'.'/images/house3.png'.'/images/house2.png'.'/images/house3.png'.'/images/house4.png'
        ],
        [
            '/images/house1.png'.'/images/house2.png'.'/images/house3.png'.'/images/house2.png'.'/images/house3.png'.'/images/house4.png']],speed: 40.seriesWidth: 400.duration: 60000
}
onShow() {
    if (this.productSeries[0].length > 4) {
        this.seriesWidth = 190 * this.productSeries[0].length - 10
        this.duration = Math.floor(this.seriesWidth / this.speed * 1000)}else { // There is no need to add animation when a line of images is too small
        this.seriesWidth = null
        this.duration = 0}}Copy the code