微信小程序答题页 swiper分页 极简
因为最近要写个做题页面，要求左右滑动切换页面。题目数量三位数会导致swiper卡顿严重，找了下相关文章没有发现合适的，就自己写了下。 实现功能 1、可以加载大量数据 2、跳转任意index 3、实现代码简单，方便复用 [图片] 直接帖代码 // pages/swiper/swiper.js
Page({
/**
* 页面的初始数据
*/
data: {
dataList: [], //实际数据
list: [], //展示数据
currentIndex: 0, //真实的index
current: 0, //swiper当前的index
recordCurrent: 0, //swiper上次的index
duration: 300 //动画时常
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
for (let i = 0; i < 1000; ++i) {
this.data.dataList.push(i)
}
this.setData({
dataList: this.data.dataList
})
this.upSwiper(0)
},
animationfinish({
detail
}) {
// 用户滑动
if (detail.source == "touch") {
// 滑动后的index
this.upSwiper(this.data.currentIndex + detail.current - this.data.recordCurrent)
}
},
upSwiper(index) {
// 防止越界
if (index < 0 || index >= this.data.dataList.length) {
return
}
this.setData({
currentIndex: index
})
// 更新数据
let list = []
for (let i = this.data.currentIndex - 1; i <= this.data.currentIndex + 1; ++i) {
let item = this.data.dataList[i]
if (typeof (item) !== "undefined") {
list.push(item)
}
}
let current = 0;
// 只要不是第一个页面 current都是1
if (index != 0) {
current = 1
}
// 取消动画
this.setData({
duration: 0
})
// current 和 list要同时更新，不然数据会闪
this.setData({
current: current,
recordCurrent: current,
duration: 300,
list
})
},
tap(ev) {
let index = ev.currentTarget.dataset.index
this.upSwiper(index)
}
})
<!--pages/swiper/swiper.wxml-->
<swiper id="swiper" current="{{current}}" duration="{{duration}}" bindanimationfinish="animationfinish">
<swiper-item wx:for="{{list}}" wx:for-item="ee">
<view wx:for="{{20}}">{{ee}}</view>
</swiper-item>
</swiper>
<view class="but-z"><button catchtap="tap" data-index="{{0}}">0</button> <button catchtap="tap" data-index="{{5}}">5</button> <button catchtap="tap" data-index="{{dataList.length-1}}">{{dataList.length-1}}</button>
</view>
/* pages/swiper/swiper.wxss */
#swiper {
width: 100vw;
height: 100vh;
}
.but-z {
position: fixed;
bottom: 20px;
height: 40px;
width: 100vw;
display: flex
}
button {
background-color: red;
width: 100rpx !important;
text-align: center;
}
