vue中使用vant的swiper实现轮播图自适应

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;
}

 

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值