功能：初始状态只显示题目，单击题目后出现答案。
步骤：
1.点击第一题出现答案一
2.滑动界面中途，可以看到第二页的答案二出来了
3.滑到第二页时，判断答案二是隐藏的
问题：步骤二不应该出现，怎么避免？
wxml
class="content">
{{item.title}}view>
scroll-view>
swiper-item>
{{item.answer}}view>
block>
swiper>
view>
js
Page({
data: {
content: [{
title: '第一题',
answer: '答案一'
},{
title: '第二题',
answer: '答案二'
},{
title: '第三题',
answer: '答案三'
}],
currentTab: 0,
scorecard: []
},
handleOption: function() {
var scorecard = this.data.scorecard;
var currentTab = this.data.currentTab;
scorecard.splice(currentTab, 1, 1);
this.setData ({
scorecard
})
},
swiperchange: function(e) {
var that = this;
that.setData({
'currentTab': e.detail.current
})
},
onLoad: function (options) {
var that = this
wx.getSystemInfo({
success: function (res) {
that.setData({
clientHeight: res.windowHeight
});
}
})
var content = this.data.content;
for(let i = 0; i < content.length; i++) {
var scorecard = this.data.scorecard;
scorecard.push(null)
}
},
})
也可以借助swiper中的bindtransition方法，当前swiper-item的位置发生改变时会触发，此时改变下一个swiper-item中的数据，来控制元素的显示或隐藏
控制答案显示要用两个字段，一个字段的话是会出现这种情况；
或者这样，每道题加一个控制当前题是否显示的字段：{ content: [{ title: '第一题', answer: '答案一', showAnswer: false, },{ title: '第二题', answer: '答案二', showAnswer: false },{ title: '第三题', answer: '答案三', showAnswer: false }] } 如果觉得回答有用请点一下有用<view class="item" wx:if="{{scorecard[currentTab]?true:false}}">{{item.answer}}view><view class="content"> <swiper style="height: {{clientHeight?clientHeight+'px':'auto'}}" current="{{currentTab}}" bindchange="swiperchange"> <block wx:for="{{content}}"> <swiper-item bind:tap="handleOption"> <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}" bindscrolltolower="scrollbot"> <view class="item">{{item.title}}</view> </scroll-view> </swiper-item> <view class="item" wx:if="{{scorecard[currentTab]}}">{{item.answer}}</view> </block> </swiper> </view>