[移动开发] 微信小程序swiper自定义样式

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> 微信小程序swiper自定义样式 -> 正文阅读

[移动开发]微信小程序swiper自定义样式

  <view class="swiper" >
    <swiper indicator-dots="true" circular autoplay interval="2000" duration="500" indicator-color='#ffffff' indicator-active-color="#0081FF" class="border">
      <block wx:for="{{image}}" wx:key="index">
        <swiper-item class="border">
          <view class="swiper-item {{item}}" class="border">
            <image src="{{item}}" alt="" class="border" />
          </view>
        </swiper-item>
      </block>
    </swiper>
  </view>

原生swiper的效果图

在这里插入图片描述

给最为元素和图片加入圆角切换时还会出现直角

在这里插入图片描述

解决方法 最外围元素加入overflow: hidden;实现切换圆角

在这里插入图片描述

指示点样式修改

通过.swiper .wx-swiper-dot修改

.swiper .wx-swiper-dot {
  width: 30rpx;
  height: 8rpx;
  border-radius: 5rpx;
}

css 代码

.swiper {
  margin-top: 16rpx;
  width: 100%;
  height: 400rpx;
  border-radius: 8px 8px 8px 8px;
  box-shadow: 0px 3px 6px 1px #EFEEEE, inset 0px 3px 6px 1px #EFEEEE;
}

.border {
  width: 100%;
  height: 400rpx;
  border-radius: 8px 8px 8px 8px;
}

.swiper .wx-swiper-dot {
  width: 30rpx;
  height: 8rpx;
  border-radius: 5rpx;
}