zoukankan      html  css  js  c++  java
  • swiper 轮播图圆角滑动变会变成直角然后再回到圆角(iOS)

    ios中,用 swiper 实现轮播图 swiper圆角,图片滑动的时候会先变成直角然后变成圆角(vant)

     

    解决方法:

    在swiper的父盒子上加overflow:hidden 和 transform: translateY(0);

       <div class="my-swipe-box">
          <van-swipe class="my-swipe" @change="swipeChange" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item,index) in bannerList" :key="index">
              <a :href="item.link_url">
                <img :src="item.pic_path" width="100%" height="100%" />
              </a>
            </van-swipe-item>
    
            <!-- 自定义轮播图指示器 -->
            <template #indicator v-if="bannerList.length >= 2">
              <div class="custom-indicator">
                <span :class="swipeIndex == 0?'indicator_activity':''"></span>
                <span :class="swipeIndex == 1?'indicator_activity':''"></span>
                <span :class="swipeIndex == 2?'indicator_activity':''" v-show="bannerList.length >= 3"></span>
              </div>
            </template>
          </van-swipe>
        </div>
     import { Swipe, SwipeItem } from "vant";
    export default {
      components: {
        [Swipe.name]: Swipe,
        [SwipeItem.name]: SwipeItem
      },
      data() {
        return {
          bannerList: [{
            "link_url": "javascript:;",
            "pic_path": "http://s1.ax1x.com/2020/06/15/N9UykQ.jpg",
          }, {
            "link_url": "http://www.baidu.com",
            "pic_path": "http://s1.ax1x.com/2020/06/15/N9UykQ.jpg",
          }, {
            "link_url": "http://www.baidu.com",
            "pic_path": "http://s1.ax1x.com/2020/06/15/N9UykQ.jpg",
          }]
        };
      },
      methods: {
        // 自定义轮播指示器
        swipeChange(index) {
          this.swipeIndex = index;
        },
      }
    }
    .my-swipe-box {
      height: 208px;
      margin-bottom: 9px;
      border-radius: 6px;
      overflow: hidden;
      transform: translateY(0);
    }
    .van-swipe-item a{
      width: 100%;
      height: 208px;
      display: inline-block;
      border-radius: 6px;
      overflow: hidden;
    }
    .custom-indicator {
      position: absolute;
      bottom: 11px;
      display: flex;
      justify-content: center;
      margin: 0 auto;
      left: 45%;
      span {
        display: inline-block;
        width: 5px;
        height: 2px;
        margin: 0 2px;
        background: rgba(0, 0, 0, 0.1);
      }
      .indicator_activity {
        width: 9px !important;
        background: rgba(255, 255, 255, 1) !important;
      }
    }

    参考文章1: https://developers.weixin.qq.com/community/develop/doc/000ac8a67fc5f0333f6741dd756400

    参考文章2: https://developers.weixin.qq.com/community/develop/doc/00026658428810dd8c07c062556400

  • 相关阅读:
    字的传送
    mov 寄存器,段寄存器
    c语言中利用三维数组计算成绩总分数
    python中break语句
    c语言中求课程总分、平均分。学生总分及平均分
    python中assert语句
    python中random模块引入随机数
    python中实现列表的倒序排列
    c语言中求两个矩阵的乘积
    python的严格缩进可以避免else悬挂
  • 原文地址:https://www.cnblogs.com/rachelch/p/13130355.html
Copyright © 2011-2022 走看看