虚拟swiper翻页


// 假设这是要渲染到swiper-item的数据
let list = [1,2,3,4,5,6,7,8,9,10];
// 这是当前swiper-item在list中的索引
let index = 0;
// 这是当前swiper-item在swiper中的索引
let currentIndex = 0;
	handleSwiperChange1(e) {
        // 先判断是向前滑动还是向后滑动
        // current 为滑动后swiper-item的索引
        let current = e.detail.current
        // currentIndex是滑动前swiper-item的索引
        // 如果两者的差为2或者-1则是向后滑动
        if(currentIndex-current==2 || currentIndex-current==-1){
            index = index + 1 == list.length ? 0 : index + 1;
            currentIndex = currentIndex + 1 == 3 ? 0 : currentIndex + 1;
            this.upDateDisplayList();
        }
        // 如果两者的差为-2或者1则是向前滑动
        else if(currentIndex-current==-2 || currentIndex-current==1) {
            index = index - 1 == -1 ? list.length-1 : index - 1;
            currentIndex = currentIndex-1 == -1 ? 2 : currentIndex - 1;
            this.upDateDisplayList();
        }
    },
    // 更新当前displayList
    upDateDisplayList(){
        let displayList = [];
        displayList[currentIndex] = list[index];
        displayList[currentIndex-1 == -1 ? 2:currentIndex-1] = list[index-1 == -1 ? list.length-1 : index -1];
        displayList[currentIndex+1 == 3 ? 0:currentIndex+1]= list[index+1 == list.length ? 0 : index+1];
        console.log('displayList', displayList);
        this.setData({
            displayList,
        })
    },

                <swiper bindchange="handleSwiperChange1"  vertical circular style="height: 100%;background-color: #fff;">
                    <swiper-item wx:for="{{displayList}}" wx:key="index">
                        <view>{{item}}</view>
                    </swiper-item>
                </swiper>