Il y a quelques jours, j'ai satisfait à l'exigence de créer une interface de questions-réponses. En haut se trouve une liste de numéros de questions et en bas, les questions. Cliquez sur le numéro de question pour accéder à la question correspondante. Au début, je voulais utiliser le composant Tab dans vant weapp pour le faire, et je l'ai essayé, mais j'ai rencontré quelques problèmes et l'effet n'était pas idéal. J'ai oublié quel était le problème spécifiquement. Enfin, scroll-view+swiper a été utilisé pour implémenter cette fonction. Le rendu final est le suivant.
Principalement en définissant scroll-with-animation="{ { scrollWithAnimation }}" scroll-into-view="{ {toview}}" dans la vue de défilement pour obtenir l'effet de défilement automatique lors des clics.
Sans plus tarder, passons directement au code.
wxml
<view>
<scroll-view scroll-x="true" style="height: 134rpx;width: 100%; box-sizing: border-box;overflow: hidden;line-height: 134rpx;background: white; font-size: 16px; white-space: nowrap;position: fixed;top: 0; left: 0; z-index: 99;" scroll-with-animation="{
{ scrollWithAnimation }}" scroll-into-view="{
{toview}}" show-scrollbar="false" enhanced="true">
<view wx:for="{
{questionList}}" style="display: inline-block;" class="questionListClass" bindtap="questionClick" data-index="{
{index}}" id="tab{
{index}}">
<view class="questionClass {
{currentTab==index?'now':item.answered?'active':''}}">{
{index+1}} </view>
</view>
</scroll-view>
<view style="margin-top: 150rpx;">
<swiper style="height: {
{swiperHeight}}px;" current="{
{currentTab}}" bindchange="swiperChange">
<swiper-item wx:for="{
{questionList}}" style="position: relative;display: flex;flex-direction: column;overflow:scroll">
<scroll-view scroll-y="true">
<view style="display: flex;flex-direction: column;">
<view style="background: white;padding: 32rpx;align-items: center;font-size: 28rpx;">
<text>{
{index+1}}、</text>
</view>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
<view style="display: flex;position: absolute;bottom: 0;height: 128rpx;width: 100%;align-items: center;justify-content: center;">
<view wx:if="{
{currentTab==0}}" style="height: 74rpx;background: #EB3722;border-radius: 128rpx;width: 80%;display: flex;justify-content: center;align-items: center;color:white" bindtap="nextClick">下一题</view>
<view wx:else style="display: flex;align-items: center;justify-content:space-evenly;width: 100%">
<view style="height: 74rpx;background: #EEEEEE;border-radius: 128rpx;width: 40%;display: flex;justify-content: center;align-items: center;color: #666666;" bindtap="preClick">上一题</view>
<view style="height: 74rpx;background: #EB3722;border-radius: 128rpx;width: 40%;display: flex;justify-content: center;align-items: center;color:white" bindtap="nextClick">{
{currentTab==questionList.length-1?'交卷':'下一题'}}</view>
</view>
</view>
</view>wxss
.container {
position: relative;
width: 100%;
}
::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
color: transparent;
}
.questionListClass .questionClass {
background: #F6F7FB;
width: 64rpx;
height: 64rpx;
align-items: center;
display: flex;
justify-content: center;
margin-left: 16rpx;
margin-right: 16rpx;
border-radius: 64rpx;
color: #333333;
font-size: 32rpx;
/* margin-top: 50%; */
border: 2rpx solid white;
}
.questionClass.active {
background: linear-gradient(180deg, #FE5196 0%, #F77062 100%);
width: 64rpx;
height: 64rpx;
align-items: center;
display: flex;
justify-content: center;
margin-left: 16rpx;
margin-right: 16rpx;
border-radius: 64rpx;
color: white;
font-size: 32rpx;
/* margin-top: 50%; */
border: 2rpx solid white;
}
.questionClass.now {
background: white;
width: 64rpx;
height: 64rpx;
align-items: center;
display: flex;
justify-content: center;
margin-left: 16rpx;
margin-right: 16rpx;
border-radius: 64rpx;
color: #EB3722;
font-size: 32rpx;
/* margin-top: 50%; */
border: 2rpx solid #EB3722;
}js
Page({
/**
* 页面的初始数据
*/
data: {
questionList: [,,,,,,,,,,],
currentTab: 0,
swiperHeight: 300,
toview: 'tab0',
scrollWithAnimation: true,
},
questionClick(e) {
console.log(e)
this.setData({
currentTab: e.currentTarget.dataset.index
})
if (e.currentTarget.dataset.index - 3 > 0) {
this.setData({
toview: 'tab' + (e.currentTarget.dataset.index - 3)
})
} else {
this.setData({
toview: 'tab0'
})
}
console.log(this.data.toview)
// if (this.currentIndex < 10) {
// this.scrollinto = 'tab0'
// }
},
nextClick(e) {
if (this.data.currentTab == this.data.questionList.length - 1) {//交卷
} else {
this.setData({
currentTab: this.data.currentTab + 1
})
if (this.data.currentTab - 3 > 0) {
this.setData({
toview: 'tab' + (this.data.currentTab - 3)
})
} else {
this.setData({
toview: 'tab0'
})
}
}
},
preClick(e) {
this.setData({
currentTab: this.data.currentTab - 1
})
if (this.data.currentTab - 3 > 0) {
this.setData({
toview: 'tab' + (this.data.currentTab - 3)
})
} else {
this.setData({
toview: 'tab0'
})
}
},
})