实用指南：uni-app平板端自定义样式合集

场景

在平板端没有很好的适配组件，所以自己写了一部分，放置可惜，发出来可以给大家借鉴

实现

1.下拉选择框

<view class="page-device-switch">
  <view class="device-picker flex flex-justify-between" @tap="showDeviceDropdown = !showDeviceDropdown">
    {
    { nickname || '请选择设备'
    }
    }
    <i class="iconfont icon-xiajiantou" :class="{'icon-rotate': showDeviceDropdown}" style="margin-left: 8rpx;font-size: 15rpx;color:#000;">
      </i>
        </view>
          <view v-if="showDeviceDropdown" class="device-dropdown">
            <view v-for="(item, idx) in allDeviceList" :key="item.id" class="device-dropdown-item" @tap="selectDevice(idx)">
              {
              { item.nickname
              }
              }
              </view>
                </view>
                  </view>
                    ...
                    data() {
                    return {
                    allDeviceList:[], //设备列表
                    showDeviceDropdown: false,
                    }
                    },
                    selectDevice(idx) {
                    this.selectedDeviceIndex = idx;
                    this.nickname = this.allDeviceList[idx].nickname;
                    this.showDeviceDropdown = false;
                    },
                    ...
                    .page-device-switch{
                    height: 30rpx;
                    width: 140rpx;
                    position: absolute;
                    left: 10.25rpx;
                    top: 54.65rpx;
                    }
                    .device-picker {
                    display: flex;
                    align-items: center;
                    height: 20rpx;
                    padding: 0 5.86rpx;
                    background: rgba($color: #fff, $alpha: 0.8);
                    border-radius: 5.86rpx;
                    color: #000;
                    font-size: 13rpx;
                    min-width: 200rpx;
                    position: relative;
                    z-index: 2;
                    .iconfont {
                    transition: transform 0.3s ease;
                    }
                    .icon-rotate {
                    transform: rotate(180deg);
                    }
                    }
                    .device-picker .iconfont {
                    color: #000;
                    }
                    .device-dropdown {
                    position: absolute;
                    margin-top: 8rpx;
                    background: rgba($color: #fff, $alpha: 0.8);
                    border-radius: 5.86rpx;
                    box-shadow: 0 2rpx 8rpx rgba(30,144,255,0.08);
                    border: 1rpx solid #ccc;
                    min-width: 200rpx;
                    z-index: 10;
                    max-height: 300rpx;
                    overflow-y: auto;
                    }
                    .device-dropdown-item {
                    padding: 8rpx 14rpx;
                    font-size: 13rpx;
                    color: #000;
                    cursor: pointer;
                    transition: background 0.2s;
                    background: transparent;
                    }
                    .device-dropdown-item:hover {
                    background: #e6f2ff;
                    }

2.侧滑抽屉

<
!-- 自定义左侧侧滑抽屉 -->
<transition name="drawer-slide">
  <view v-if="showDeviceDrawer" class="custom-drawer-mask" @tap.self="showDeviceDrawer = false">
    <view class="custom-drawer-panel" @tap.stop>
      <view class="drawer-title">选择设备</view>
        <view class="drawer-device-list">
          <view
          v-for="(item, idx) in allDeviceList"
          :key="item.id"
          class="drawer-device-item"
          :class="{ active: idx === selectedDeviceIndex }"
          @tap="handleSelectDevice(idx)"
          >
          <span class="device-dot" :class="{ active: idx === selectedDeviceIndex }">
            </span>
              <text class="device-name">
                {
                { item.nickname
                }
                }</text>
                  <i v-if="idx === selectedDeviceIndex" class="iconfont icon-duigou">
                    </i>
                      </view>
                        </view>
                          </view>
                            <view class="custom-drawer-right-mask" @tap="showDeviceDrawer = false">
                              </view>
                                </view>
                                  </transition>
                                    ...
                                    data() {
                                    return {
                                    allDeviceList:[],
                                    showDeviceDrawer: false,
                                    }
                                    },
                                    handleSelectDevice(idx) {
                                    this.selectedDeviceIndex = idx;
                                    this.nickname = this.allDeviceList[idx].nickname;
                                    this.showDeviceDrawer = false;
                                    },
                                    ...
                                    .custom-drawer-mask {
                                    position: fixed;
                                    top: 0; left: 0; right: 0; bottom: 0;
                                    background: rgba(0,0,0,0.25);
                                    z-index: 9999;
                                    display: flex;
                                    align-items: stretch;
                                    }
                                    .custom-drawer-panel {
                                    width: 320rpx;
                                    height: 100vh;
                                    background: #fff;
                                    box-shadow: 2rpx 0 16rpx rgba(0,0,0,0.08);
                                    padding: 24rpx 0 0 0;
                                    display: flex;
                                    flex-direction: column;
                                    animation: drawerIn 0.25s;
                                    }
                                    .drawer-title {
                                    font-size: 22rpx;
                                    font-weight: bold;
                                    color: #222;
                                    padding: 0 24rpx 18rpx 24rpx;
                                    border-bottom: 1rpx solid #eee;
                                    }
                                    .drawer-device-list {
                                    flex: 1;
                                    overflow-y: auto;
                                    padding: 10rpx 0;
                                    max-height: calc(100vh - 60rpx);
                                    }
                                    .drawer-device-item {
                                    padding: 12rpx 18rpx;
                                    font-size: 18rpx;
                                    color: #333;
                                    display: flex;
                                    align-items: center;
                                    cursor: pointer;
                                    border-radius: 6rpx;
                                    margin-bottom: 2rpx;
                                    transition: background 0.2s, color 0.2s;
                                    min-height: 36rpx;
                                    }
                                    .drawer-device-item.active {
                                    background: #e6f2ff;
                                    color: #2979ff;
                                    font-weight: bold;
                                    }
                                    .device-dot {
                                    display: inline-block;
                                    width: 10rpx;
                                    height: 10rpx;
                                    border-radius: 50%;
                                    margin-right: 12rpx;
                                    background: #333;
                                    flex-shrink: 0;
                                    transition: background 0.2s;
                                    }
                                    .drawer-device-item.active .device-dot {
                                    background: #2979ff;
                                    }
                                    .device-name {
                                    flex: 1;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    }
                                    .drawer-device-item .icon-duigou {
                                    color: #2979ff;
                                    margin-left: 8rpx;
                                    font-size: 18rpx;
                                    }
                                    .drawer-device-item:not(.active):hover {
                                    background: #f5f7fa;
                                    }
                                    .custom-drawer-right-mask {
                                    flex: 1;
                                    height: 100vh;
                                    }
                                    .drawer-slide-enter-active, .drawer-slide-leave-active {
                                    transition: all 0.25s;
                                    }
                                    .drawer-slide-enter, .drawer-slide-leave-to {
                                    opacity: 0;
                                    }
                                    @keyframes drawerIn {
                                    from { transform: translateX(-100%);
                                    }
                                    to { transform: translateX(0);
                                    }
                                    }