美文网首页
Taro/微信小程序swiper设置图片圆角,修改点的位置

Taro/微信小程序swiper设置图片圆角,修改点的位置

作者: 逸笛 | 来源:发表于2020-10-29 10:18 被阅读0次
    图片.png
          <View className="banner">
              <Swiper
                className="bannerSwiper"
                indicator-dots
                circular
                autoplay
                easing-function="easeInOutCubic"
                indicator-active-color="#FFFFFF"
              >
                {(bannerImg || []).map((item, index) => {
                  return (
                    <View key={item.id}>
                      <SwiperItem className="bannerItem">
                        <Image className="bannerImg" src={item.img}></Image>
                      </SwiperItem>
                    </View>
                  );
                })}
              </Swiper>
            </View>
    
    .bannerView {
      margin: 22px auto 29px auto;
      width: 100%;
      box-sizing: border-box;
    
      .bannerSwiper {
        width: 690px;
        height: 356px;
        text-align: center;
        border-radius: 16px !important;
        overflow: hidden;
      }
    
      .bannerItem {
        position: relative;
        left: 0;
        top: 0;
        .bannerImg {
          width: 690px;
          height: 356px;
        }
        .bannerName {
          position: absolute;
          bottom: 25px;
          left: 25px;
          color: #ffffff;
        }
      }
    //改变点的位置
      .wx-swiper-dot {
        position: absolute;
        left: unset !important;
        right: 28px;
        bottom: 10px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
      }
    
      .wx-swiper-dots.wx-swiper-dots-horizontal {
        margin-left: 328px;
      }
    
    

    相关文章

      网友评论

          本文标题:Taro/微信小程序swiper设置图片圆角,修改点的位置

          本文链接:https://www.haomeiwen.com/subject/bvkkvktx.html