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\"><viewv-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); }}