时间戳

首页 > 解决方案 > 如何去除离子玻片两侧的边距？

html - 如何去除离子玻片两侧的边距？

问题描述

我在我的应用程序中添加了离子滑块问题是从右侧它有边距我想删除那个边距我怎么做

在此处输入图像描述

<template>
  <IonPage>
    <ion-content class="background">
      <div id="product_background">
        <Topbar />
        <div class="container">
          <ion-text color class="top-left">
            <h1>ARTICS PRO</h1>
          </ion-text>
          <ion-text color class="heart_icon">
            <ion-icon :icon="heartOutline"></ion-icon>
            <ion-icon :icon="shareSocial"></ion-icon>
          </ion-text>

          <ion-text color class="top-left2">
            <p>Steelseries</p>
          </ion-text>
          <ion-text class="slides_count">
            <p>{{activeSlide}} / 3</p>
          </ion-text>
          <ion-text color class="bottom-right">
            <p>ARTICS 7</p>
          </ion-text>

          <ion-text color class="bottom-right2">
            <p>Steelseries</p>
          </ion-text>

          <!--  -->
          <ion-slides pager="true" :options="slideOpts" @ionSlideDidChange="ionSlideDidChange">
            <ion-slide>
              <img :src="require('@/assets/headset_mockup.png')" style="height:105vw;width:500vw" />
            </ion-slide>
            <ion-slide>
              <img :src="require('@/assets/headset_mockup.png')" style="height:105vw;width:100vw" />
            </ion-slide>
            <ion-slide>
              <img :src="require('@/assets/headset_mockup.png')" style="height:105vw;width:100vw" />
            </ion-slide>
          </ion-slides>
        </div>

        <div id="product_price">
          <svg width="20" height="15" style="margin-right:5px">
            <rect
              width="20"
              height="15"
              style="fill:#ffff;stroke-width:3;stroke:rgb(255, 255, 255);"
            />
          </svg>
          <svg width="20" height="15" style="margin-right:5px">
            <rect width="20" height="15" style="fill:#000000;stroke-width:3;stroke:rgb(0,0,0)" />
          </svg>
          <svg width="20" height="15" style="margin-right:5px">
            <rect
              width="20"
              height="15"
              style="fill:#808080;stroke-width:3;stroke:rgb(128,128,128)"
            />
          </svg>
          <svg width="20" height="15" style="margin-right:5px">
            <rect width="20" height="15" style="fill:#FF0000 ;stroke-width:3;stroke:rgb(255,0,0)" />
          </svg>
          <svg width="20" height="15" style="margin-right:5px">
            <rect
              width="20"
              height="15"
              style="fill:#FFFF00 ;stroke-width:3;stroke:rgb(255,255,0)"
            />
          </svg>
          <h2>$3,9000</h2>
        </div>
      </div>
      <div id="product_info">
        <p>Product Information</p>
      </div>
      <div id="cart_icon">
        <ion-button>
          <ion-icon :icon="cart"></ion-icon>
        </ion-button>
      </div>
    </ion-content>
  </IonPage>
</template>

<script >
import {
  IonContent,
  IonPage,
  IonText,
  IonIcon,
  IonSlides,
  IonSlide,
  IonButton,
} from "@ionic/vue";
import Topbar from "../Resources/Topbar.vue";
import { useRouter } from "vue-router";
import { heartOutline, shareSocial, cart } from "ionicons/icons";
export default {
  name: "Index",
  components: {
    IonContent,
    IonPage,
    Topbar,
    IonText,
    IonIcon,
    IonSlides,
    IonSlide,
    IonButton,
  },
  setup() {
    return {
      router: useRouter(),
      heartOutline,
      shareSocial,
      cart,
    };
  },
  data() {
    return {
      activeSlide: 1,
      length: 3,
    };
  },
  methods: {
    ionSlideDidChange: async function (e) {
      this.activeSlide = (await e.target.getActiveIndex()) + 1;
      // e.target.getActiveIndex().then(i => {
      //   this.activeIndex = i;

      // });
    },
  },
};
</script>
<style scoped>
ion-slide {
  width: 100% !important;
}

.swiper-wrapper {
  width: min-content !important;
}
ion-button {
  --background: #280c4c;
}
.background {
  --background: url("../../assets/product_background.png") 0 0/100% 100%
      no-repeat,
    linear-gradient(to bottom, #1a1240 35%, #6528af 70%, #736eed 100%);
}
#product_background {
  background-attachment: fixed;
  background-size: cover;
  padding: 20px;
}

.bottom-right {
  position: absolute;
  bottom: 14px;
  right: 16px;
}
.bottom-right2 {
  position: absolute;
  bottom: 0px;
  right: 16px;
}
#product_info {
  position: absolute;
  bottom: 10px;
  left: 16px;
  color: white;
}
#cart_icon {
  position: absolute;
  bottom: 0px;
  right: 50px;
  font-size: 30vw;
  color: white;
}
#product_price {
  position: absolute;
  bottom: 70px;
  left: 20px;
  color: white;
}
.container {
  position: relative;
  text-align: center;
  color: white;
  margin: -20px;
}
.heart_icon {
  position: absolute;
  top: 180px;
  left: 8px;
}
.top-left {
  position: absolute;
  top: 16px;
  left: 8px;
}
.top-left2 {
  position: absolute;
  top: 45px;
  left: 6px;
}
.slides_count {
  position: absolute;
  bottom: 40px;
  right: 16px;
}
</style>

我试图覆盖现有的标签大小，但它们的行为不同。我想这样做，因为它不应该改变不同类型的设备。应根据画面大小调整

标签： htmlcssvue.jsionic-frameworkionic5

解决方案

借助 CSS 的魔力。

ion-slide {
    margin-right: 0px;
}

请注意检查它实际上是边距而不是填充，因为 Ionic 大量使用填充来获得原生外观。

或者，您可以添加预打包的 Ionic CSS 以实现无边距或填充。

<ion-slide class="ion-no-padding ion-no-margin">
</ion-slide>

此外，如果可以的话，你应该避免使用带有style标签的内联 CSS。而是将它们添加到CSS中的类中。从长远来看，它更容易管理。

推荐阅读