1.vant中的swiper显示固定的高度,高度为最高的一个swiper_item的高度

2.思路:为了保证当前组件是高度最高的,可以使用v-show组件让其他的swiper_item没有内容,即可达到目的

例如:

           <van-swipe class="my-swipe" ref="my-swipe"
                       :show-indicators="false"
                       @change="onChange">
              <van-swipe-item v-for="(item,index) in hotTodayList30"
                              :key="index">
                <div class="newsDetils" v-show="index==recommentSelectedIndex"
                     @click="checkArticle(item.id,item.title,item)">
                  <div class="newsDetilsTitle">{{item.title}}</div>
                  <div class="newsDetil"
                        v-html="item.abstractStr">
                  </div>
                  <div  class="comment-box">
                    <div class="commentLeft">
                      <img v-lazy="headPortrait"
                          class="commentImg">点评
                    </div>
                    <div class="commentRight word-wrap"
                        v-if="hotTodayList30[recommentSelectedIndex].userComment!=null">
                      <div v-html="hotTodayList30[recommentSelectedIndex].userComment.commentary"></div>
                    </div>
                  </div>
                </div>
              </van-swipe-item>
            </van-swipe>
//监听onChange事件
onChange(index) {
    this.recommentSelectedIndex = index;
}

 

Logo

前往低代码交流专区

更多推荐