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); }
}