vue+taro：实现轮播图的自适应高度

最新推荐文章于 2024-04-28 15:52:32 发布

原创最新推荐文章于 2024-04-28 15:52:32 发布 · 669 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

taro+vue 专栏收录该内容

10 篇文章

订阅专栏

本文探讨如何在Vue.js和Taro框架中实现轮播图组件的高度自适应，确保在不同设备上展示效果良好。通过解析内容，我们可以了解到作者将详细讲解关键的CSS样式调整和JavaScript交互逻辑，以达到轮播图内容区域根据图片高度动态调整的目的。

index.vue

<template>
  <view>
    <swiper
      class="box"
      :interval="interval"
      indicator-color="#679bd4"
      :indicator-dots="true"
      :style="{height:h}"
    >
      <swiper-item>
        <view class="text">
          <image
            src="../../assets/img/banner_1.jpg"
            alt=""
            :style="{height:h}"
          ></image>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="text">
          <image
            src="../../assets/img/banner_2.jpg"
            alt=""
            :style="{height:h}"
          ></image>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="text">
          <image
            src="../../assets/img/banner_3.jpg"
            alt=""
            :style="{height:h}"
          ></image>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import "./index.scss";

export default {
  data() {
    return {
      interval: 1000,
      h: ''
    };
  },
  methods: {},
  mounted() {
    console.log(wx.getSystemInfoSync().windowHeight)
    console.log(wx.getSystemInfoSync().windowWidth)
    let screenW=wx.getSystemInfoSync().windowWidth  //屏幕的宽度
    let picW=1280  //图片的宽度
    let picH=488  //图片的高度
    let swipeH=Math.floor(picH * screenW / picW)+'px'  
    console.log(swipeH);
    this.h=swipeH;
  },
};
</script>