当前位置: 首页 > article >正文

uniapp 相关的swiper的一些注意事项

先推荐一个一个对标pc端swiper的uniapp版本 zebra-swiper 缺点是自定义分页器不是很好处理 不知道怎么弄

优点:可以进行高度自适应 (这个uniapp原生swiper没有 只能动态修改 采用js 或者只有几种固定高度时采用变量修改)

<swiper
        ref="lifeMiddleSwiper"
        :style="`margin-bottom:24rpx;height:${
          !middleServiceSwiper ? '165rpx' : '405rpx'
        };transition:height cubic-bezier(0.45, 0, 0.55, 1) .6s;`"
        v-if="middleService.length > 0"
        indicator-dots
        @change="handleChangeSwiper"
      >
        <swiper-item v-for="(_, index) in zSwiperItemPage" :key="index">
          <view class="life-swiper-page">
            <view
              class="middle-nav-item"
              v-for="item in lifemiddleService(index)"
              :key="item.id"
              @click="toUrl(item.url)"
            >
              <image mode="aspectFill" :src="item.icon" class="middle-nav-item-icon" />
              <view class="middle-nav-item-title">{{ item.title }}</view>
            </view>
          </view>
        </swiper-item>
      </swiper>

//我这里就是采用的原生 因为分页器的缘故,然后我只有2种高度的情况 所以就使用了变量修改高度 
// 原生swiper的分页器
:deep(.uni-swiper-dots-horizontal) {
  border-radius: 20rpx;
  overflow: hidden !important;
  height: 4rpx !important;
  .uni-swiper-dot {
    margin-right: 0 !important;
    height: 4rpx !important;
    width: 20rpx !important;
    border-radius: 0 !important;
  }
}


http://www.kler.cn/a/404924.html

相关文章:

  • 04 —— Webpack打包CSS代码
  • 实验室管理效率提升:Spring Boot技术的力量
  • Spark 之 Aggregate
  • RFdiffusion rigid_from_3_points函数解读
  • 解决Windows + Chrome 使用Blob下载大文件时,部分情况下报错net:ERR_FAILED 200 (OK)的问题
  • Android开发实战班 - 现代 UI 开发之自定义 Compose 组件
  • C++设计模式行为模式———迭代器模式
  • 图形学笔记 - 4. 几何 -网格操作和阴影映射
  • 自动化测试面试技巧
  • 天润融通携手挚达科技:AI技术重塑客户服务体验
  • 面试小结(一)
  • 解决Electron拖拽窗口点击事件失效问题
  • Python CSV文档自动化操作详解
  • SqlServer 链接一个 SqlServer的链接服务器
  • 自动驾驶系列—探索自动驾驶数据管理的核心技术与平台
  • 微信小程序样式
  • windows 和 linux检查操作系统基本信息
  • 前端开发调试之 PC 端调试学习笔记
  • 【ARM Coresight OpenOCD 系列 6.2 -- Boundary Scan Commands】
  • 药典新篇:Spring Boot助力中药实验管理
  • 使用redis-shake工具进行redis的数据同步
  • 使用IDEA+Maven实现MapReduced的WordCount
  • c# npoi操作excel
  • 【ARM Coresight OpenOCD 系列 5.1 -- OpenOCD 无法识别CPUID 问题: xxx is unrecognized】
  • 嵌入式学习(13)-塔石TAS-LAN-476串口服务器
  • 双因子认证:统一运维平台安全管理策略