收藏
回答

swiper切换页面时wx:if在中途会显示问题?

功能:初始状态只显示题目,单击题目后出现答案。

步骤:

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'答案三'
    }],
    currentTab0,
    scorecard: []
  },
  handleOptionfunction() {
    var scorecard = this.data.scorecard;
    var currentTab = this.data.currentTab;
    scorecard.splice(currentTab, 11);
    this.setData ({
      scorecard
    })
  },
  swiperchangefunction(e{
    var that = this;
    that.setData({
      'currentTab': e.detail.current
    })
  },
  onLoadfunction (options{
    var that = this 
    wx.getSystemInfo({ 
      successfunction (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)
    }
  },
})
最后一次编辑于  2020-08-21
回答关注问题邀请回答
收藏

3 个回答

  • 微盟
    微盟
    2020-08-21

    也可以借助swiper中的bindtransition方法,当前swiper-item的位置发生改变时会触发,此时改变下一个swiper-item中的数据,来控制元素的显示或隐藏

    2020-08-21
    有用
    回复
  • 陈强
    陈强
    2020-08-21

    控制答案显示要用两个字段,一个字段的话是会出现这种情况;

    或者这样,每道题加一个控制当前题是否显示的字段:{
      content: [{
        title: '第一题',
        answer: '答案一',
        showAnswer: false,
      },{
        title: '第二题',
        answer: '答案二',
        showAnswer: false
      },{
        title: '第三题',
        answer: '答案三',
        showAnswer: false
      }]
    }
    如果觉得回答有用请点一下有用
    
    2020-08-21
    有用
    回复 3
    • Jan C
      Jan C
      2020-08-21
      感谢回答。还是希望用scorecard来判断显示,加多了一个判断还是不行。你说的要用两个字段是什么意思?
      2020-08-21
      回复
    • 陈强
      陈强
      2020-08-21回复Jan C
      你这个可以加一个字段preTab,然后这样wx:if=“{{scorecard[preTab]&&(preTab==currentTab)}}”;具体的我没怎么考虑,给你一个思路:你在修改scorecard时候给preTab赋值应该就可以了
      2020-08-21
      回复
    • Jan C
      Jan C
      2020-08-21回复陈强
      我在修改scorecard时把currentTab赋值了preTab,wx:if也改成你那样。还是不行。感谢你的思路
      2020-08-21
      回复
  • Jan C
    Jan C
    2020-08-21
    <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>
    
    2020-08-21
    有用
    回复
登录 后发表内容
问题标签