# tui-top-dropdown 顶部弹出层 开源组件
介绍
可自定义宽高，设置字体大小，阴影，圆角，镂空等，支持表单提交。
# 引入
# uni-app引入
第一种，手动引入（可全局引入）
import tuiTopDropdown from "@/components/thorui/tui-top-dropdown/tui-top-dropdown.vue"
export default {
components:{
tuiTopDropdown
}
}
第二种，开启easycom组件模式，如果不了解如何配置，可先查看 官网文档 (opens new window)。
# uni-app版本平台差异说明
| App-Nvue | App-vue | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
|---|---|---|---|---|---|---|---|
| 升级中 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
# 微信小程序引入（可在app.json中全局引入）
{
"usingComponents": {
"tui-top-dropdown": "/components/thorui/tui-top-dropdown/tui-top-dropdown"
}
}
# 代码演示
部分功能演示，具体可参考示例程序以及文档API。
基础使用
通过 show 属性控制组件显示隐藏， paddingbtm 属性设置容器 padding-bottom值 ， translatey 属性设置下拉距离 ，close 为弹层关闭事件。
<template>
<view class="container">
<!--header-->
<view class="tui-header">
<view class="tui-header-top">
<view class="tui-top-item" @tap="screen">综合</view>
<view class="tui-top-item" @tap="screen">销量</view>
<view class="tui-top-item" @tap="screen">
<view>价格</view>
<view class="tui-price-arrow">
<view class="tui-icon-box tui-arrow-up">
<tui-icon name="turningup" :size="12" color="#444"></tui-icon>
</view>
<view class="tui-icon-box tui-arrow-down">
<tui-icon name="turningdown" :size="12" color="#444"></tui-icon>
</view>
</view>
</view>
<view class="tui-top-item tui-screen" @tap="screen">
<text class="tui-bold">筛选</text>
<tui-icon name="screen" :size="12" color="#5677fc" :bold="true"></tui-icon>
</view>
</view>
<view class="tui-header-bottom">
<view class="tui-bottom-item" :class="[proDropIndex==0?'tui-btmItem-active':'']" @tap="btnDropChange(0)">
<view class="tui-bottom-text" :class="[proDropIndex==0?'tui-active':'']">品牌</view>
<tui-icon :name="proDropIndex==0?'arrowup':'arrowdown'" :size="14" :color="proDropIndex==0?'#5677fc':'#444'"></tui-icon>
</view>
<view class="tui-bottom-item" :class="[proDropIndex==1?'tui-btmItem-active':'']" @tap="btnDropChange(1)">
<view class="tui-bottom-text" :class="[proDropIndex==1?'tui-active':'']">类型</view>
<tui-icon :name="proDropIndex==1?'arrowup':'arrowdown'" :size="14" :color="proDropIndex==1?'#5677fc':'#444'"></tui-icon>
</view>
<view class="tui-bottom-item" :class="[proDropIndex==2?'tui-btmItem-active':'']" @tap="btnDropChange(2)">
<view class="tui-bottom-text" :class="[proDropIndex==2?'tui-active':'']">适用手机</view>
<tui-icon :name="proDropIndex==2?'arrowup':'arrowdown'" :size="14" :color="proDropIndex==2?'#5677fc':'#444'"></tui-icon>
</view>
</view>
</view>
<!--header-->
<!--header 顶部下拉选择框-->
<tui-top-dropdown :show="dropShow" :paddingbtm="110" :translatey="216" @close="btnCloseDrop">
<scroll-view class="tui-scroll-box" scroll-y scroll-with-animation :scroll-top="scrollTop">
<view class="tui-seizeaseat-20"></view>
<view class="tui-drop-item" :class="[item.selected?'tui-bold':'']" v-for="(item,index) in proDropData" :key="index"
@tap.stop="btnSelected" :data-index="index">
<tui-icon name="check" :size="16" color="#5677fc" :bold="true" v-if="item.selected"></tui-icon>
<text class="tui-ml tui-middle">{{item.name}}</text>
</view>
<view class="tui-seizeaseat-30"></view>
</scroll-view>
<view class="tui-drop-btnbox">
<view class="tui-drop-btn tui-button-white" hover-class="tui-button-white_hover" :hover-stay-time="150" @tap="reset">重置</view>
<view class="tui-drop-btn tui-button-primary" hover-class="tui-button-hover" :hover-stay-time="150" @tap="btnCloseDrop">确定</view>
</view>
</tui-top-dropdown>
<!--header 顶部下拉选择框-->
<view class="top-dropdown">
<tui-button type="white" shape="circle" @click="btnDropChange(0)">顶部下拉列表</tui-button>
</view>
</view>
</template>
//uni-app script
export default {
data() {
return {
proDropList: [{
list: [{
name: "trendsetter",
selected: false
}, {
name: "维肯（Viken）",
selected: false
}, {
name: "AORO",
selected: false
}, {
name: "苏发",
selected: false
}, {
name: "飞花令（FHL）",
selected: false
}, {
name: "叶梦丝",
selected: false
}, {
name: "ITZOOM",
selected: false
}, {
name: "亿魅",
selected: false
}, {
name: "LEIKS",
selected: false
}, {
name: "雷克士",
selected: false
}, {
name: "蕊芬妮",
selected: false
}, {
name: "辉宏达",
selected: false
}, {
name: "英西达",
selected: false
}, {
name: "戴为",
selected: false
}, {
name: "魔风者",
selected: false
}, {
name: "即满",
selected: false
}, {
name: "北比",
selected: false
}, {
name: "娱浪",
selected: false
}, {
name: "搞怪猪",
selected: false
}]
}, {
list: [{
name: "线充套装",
selected: false
}, {
name: "单条装",
selected: false
}, {
name: "车载充电器",
selected: false
}, {
name: "PD快充",
selected: false
}, {
name: "数据线转换器",
selected: false
}, {
name: "多条装",
selected: false
}, {
name: "充电插头",
selected: false
}, {
name: "无线充电器",
selected: false
}, {
name: "座式充电器",
selected: false
}, {
name: "万能充",
selected: false
}, {
name: "转换器/转接线",
selected: false
}, {
name: "MFI苹果认证",
selected: false
}, {
name: "转换器",
selected: false
}, {
name: "苹果认证",
selected: false
}]
}, {
list: [{
name: "通用",
selected: false
}, {
name: "vivo",
selected: false
}, {
name: "OPPO",
selected: false
}, {
name: "魅族",
selected: false
}, {
name: "苹果",
selected: false
}, {
name: "华为",
selected: false
}, {
name: "三星",
selected: false
}, {
name: "荣耀",
selected: false
}, {
name: "诺基亚5",
selected: false
}, {
name: "荣耀4",
selected: false
}, {
name: "诺基",
selected: false
}, {
name: "荣耀",
selected: false
}, {
name: "诺基亚2",
selected: false
}, {
name: "荣耀2",
selected: false
}, {
name: "诺基",
selected: false
}]
}],
proDropData: [],
proDropIndex: -1,
dropShow: false,
scrollTop: 0
}
},
methods: {
btnDropChange(index) {
this.proDropData = [...this.proDropList[index].list];
this.proDropIndex = index;
this.dropShow = true;
this.dropdownShow=false
},
btnSelected: function(e) {
let index = e.currentTarget.dataset.index;
let obj = this.proDropData[index];
this.$set(obj, 'selected', !obj.selected)
},
reset() {
let arr = this.proDropData;
for (let item of arr) {
item.selected = false;
}
this.proDropData = arr
},
btnCloseDrop() {
this.scrollTop = 1;
this.$nextTick(() => {
this.scrollTop = 0
});
this.dropShow = false;
this.proDropIndex = -1;
this.reset()
},
screen() {
//this.tui.xxx 等api 查看【快速上手】文档使用
this.tui.toast("商城模板中功能~")
}
}
}
/* uni-app style */
/* 隐藏scroll-view滚动条*/
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
/*header*/
.tui-header {
width: 100%;
padding-top: 34rpx;
/* box-shadow: 0 15rpx 10rpx -15rpx #f2f2f2; */
box-sizing: border-box;
background-color: #fff;
position: fixed;
z-index: 1000;
}
.tui-header-top,
.tui-header-bottom {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 26rpx;
color: #333;
}
.tui-top-item {
height: 26rpx;
line-height: 26rpx;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.tui-topitem-active {
position: relative;
font-weight: bold;
}
.tui-topitem-active::after {
content: '';
position: absolute;
width: 44rpx;
height: 6rpx;
background: #5677fc;
border-radius: 6rpx;
bottom: -10rpx;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.tui-price-arrow {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 20rpx;
}
.tui-bottom-item .tui-icon-class,
.tui-screen .tui-icon-class {
margin-left: 6rpx;
}
.tui-icon-box {
line-height: 12px !important;
padding: 0 !important;
display: block !important;
position: relative;
}
.tui-arrow-up {
top: 5px;
}
.tui-arrow-down {
top: -3px;
}
.tui-header-bottom {
margin-top: 56rpx;
height: 108rpx;
padding: 0 30rpx;
box-sizing: border-box;
font-size: 24rpx;
align-items: flex-start;
overflow: hidden;
}
.tui-bottom-text {
line-height: 24rpx;
}
.tui-bottom-item {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 18rpx 12rpx;
border-radius: 40rpx;
box-sizing: border-box;
background: #f2f2f2;
margin-right: 20rpx;
white-space: nowrap;
}
.tui-bottom-item:last-child {
margin-right: 0;
}
.tui-btmItem-active {
padding-bottom: 60rpx;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.tui-bold {
font-weight: bold;
}
.tui-active {
color: #5677fc;
}
.tui-ml {
margin-left: 6rpx;
}
.tui-seizeaseat-20 {
height: 20rpx;
}
.tui-seizeaseat-30 {
height: 30rpx;
}
.tui-middle {
vertical-align: middle;
}
.tui-drop-item .tui-icon-class {
vertical-align: middle;
}
/*header*/
.top-dropdown {
margin-top: 360rpx;
padding: 0 40rpx;
box-sizing: border-box;
}
<!-- 使用到的组件请自行在json中进行引入 -->
<view class="container">
<!--header-->
<view class="tui-header">
<view class="tui-header-top">
<view class="tui-top-item" bindtap="screen">综合</view>
<view class="tui-top-item" bindtap="screen">销量</view>
<view class="tui-top-item" bindtap="screen">
<view>价格</view>
<view class="tui-price-arrow">
<view class="tui-icon-box tui-arrow-up">
<tui-icon name="turningup" size="{{12}}" color="#444"></tui-icon>
</view>
<view class="tui-icon-box tui-arrow-down">
<tui-icon name="turningdown" size="{{12}}" color="#444"></tui-icon>
</view>
</view>
</view>
<view class="tui-top-item tui-screen" bindtap="screen">
<text class="tui-bold">筛选</text>
<tui-icon name="screen" size="{{12}}" color="#5677fc" bold="{{true}}"></tui-icon>
</view>
</view>
<view class="tui-header-bottom">
<view class="tui-bottom-item {{proDropIndex==0?'tui-btmItem-active':''}}" data-index="0" bindtap="btnDropChange">
<view class="tui-bottom-text {{proDropIndex==0?'tui-active':''}}">品牌</view>
<tui-icon name="{{proDropIndex==0?'arrowup':'arrowdown'}}" size="{{14}}" color="{{proDropIndex==0?'#5677fc':'#444'}}"></tui-icon>
</view>
<view class="tui-bottom-item {{proDropIndex==1?'tui-btmItem-active':''}}" bindtap="btnDropChange" data-index="1">
<view class="tui-bottom-text {{proDropIndex==1?'tui-active':''}}">类型</view>
<tui-icon name="{{proDropIndex==1?'arrowup':'arrowdown'}}" size="14" color="{{proDropIndex==1?'#5677fc':'#444'}}"></tui-icon>
</view>
<view class="tui-bottom-item {{proDropIndex==2?'tui-btmItem-active':''}}" bindtap="btnDropChange" data-index="2">
<view class="tui-bottom-text {{proDropIndex==2?'tui-active':''}}">适用手机</view>
<tui-icon name="{{proDropIndex==2?'arrowup':'arrowdown'}}" size="14" color="{{proDropIndex==2?'#5677fc':'#444'}}"></tui-icon>
</view>
</view>
</view>
<!--header-->
<!--header 顶部下拉选择框-->
<tui-top-dropdown show="{{dropShow}}" paddingbtm="110" translatey="216" bindclose="btnCloseDrop">
<scroll-view class="tui-scroll-box" scroll-y scroll-with-animation scroll-top="{{scrollTop}}">
<view class="tui-seizeaseat-20"></view>
<view class="tui-drop-item {{item.selected?'tui-bold':''}}" wx:for="{{proDropData}}" wx:key="index" catchtap="btnSelected" data-index="{{index}}">
<tui-icon name="check" size="16" color="#5677fc" bold="{{true}}" wx:if="{{item.selected}}"></tui-icon>
<text class="tui-ml tui-middle">{{item.name}}</text>
</view>
<view class="tui-seizeaseat-30"></view>
</scroll-view>
<view class="tui-drop-btnbox">
<view class="tui-drop-btn tui-button-white" hover-class="tui-button-white_hover" hover-stay-time="150" bindtap="reset">重置</view>
<view class="tui-drop-btn tui-button-primary" hover-class="tui-button-hover" hover-stay-time="150" bindtap="btnCloseDrop">确定</view>
</view>
</tui-top-dropdown>
<!--header 顶部下拉选择框-->
<view class="top-dropdown">
<tui-button type="white" shape="circle" bindtap="btnDropChange" data-index="0">顶部下拉列表</tui-button>
</view>
</view>
//请确保项目中引入了该js且路径正确
import tui from '../../../common/httpRequest'
Page({
data: {
proDropList: [{
list: [{
name: "trendsetter",
selected: false
}, {
name: "维肯（Viken）",
selected: false
}, {
name: "AORO",
selected: false
}, {
name: "苏发",
selected: false
}, {
name: "飞花令（FHL）",
selected: false
}, {
name: "叶梦丝",
selected: false
}, {
name: "ITZOOM",
selected: false
}, {
name: "亿魅",
selected: false
}, {
name: "LEIKS",
selected: false
}, {
name: "雷克士",
selected: false
}, {
name: "蕊芬妮",
selected: false
}, {
name: "辉宏达",
selected: false
}, {
name: "英西达",
selected: false
}, {
name: "戴为",
selected: false
}, {
name: "魔风者",
selected: false
}, {
name: "即满",
selected: false
}, {
name: "北比",
selected: false
}, {
name: "娱浪",
selected: false
}, {
name: "搞怪猪",
selected: false
}]
}, {
list: [{
name: "线充套装",
selected: false
}, {
name: "单条装",
selected: false
}, {
name: "车载充电器",
selected: false
}, {
name: "PD快充",
selected: false
}, {
name: "数据线转换器",
selected: false
}, {
name: "多条装",
selected: false
}, {
name: "充电插头",
selected: false
}, {
name: "无线充电器",
selected: false
}, {
name: "座式充电器",
selected: false
}, {
name: "万能充",
selected: false
}, {
name: "转换器/转接线",
selected: false
}, {
name: "MFI苹果认证",
selected: false
}, {
name: "转换器",
selected: false
}, {
name: "苹果认证",
selected: false
}]
}, {
list: [{
name: "通用",
selected: false
}, {
name: "vivo",
selected: false
}, {
name: "OPPO",
selected: false
}, {
name: "魅族",
selected: false
}, {
name: "苹果",
selected: false
}, {
name: "华为",
selected: false
}, {
name: "三星",
selected: false
}, {
name: "荣耀",
selected: false
}, {
name: "诺基亚5",
selected: false
}, {
name: "荣耀4",
selected: false
}, {
name: "诺基",
selected: false
}, {
name: "荣耀",
selected: false
}, {
name: "诺基亚2",
selected: false
}, {
name: "荣耀2",
selected: false
}, {
name: "诺基",
selected: false
}]
}],
proDropData: [],
proDropIndex: -1,
dropShow: false,
scrollTop: 0
},
btnDropChange(e) {
let index=Number(e.currentTarget.dataset.index)
this.setData({
proDropData: [...this.data.proDropList[index].list],
proDropIndex:index,
dropShow:true,
dropdownShow:false
})
},
btnSelected: function (e) {
let index = e.currentTarget.dataset.index;
let obj = this.data.proDropData[index];
let key = `proDropData[${index}].selected`
this.setData({
[key]: !obj.selected
})
},
reset() {
let arr = this.data.proDropData;
for (let item of arr) {
item.selected = false;
}
this.setData({
proDropData: arr
})
},
btnCloseDrop() {
this.setData({
scrollTop: 0,
dropShow: false,
proDropIndex: -1
})
this.reset()
},
screen() {
tui.toast("商城模板中功能~")
}
})
/* 同 uni-app css */
// Make sure to add code blocks to your code group
# Slots
| 插槽名称 | 说明 |
|---|---|
| default | 顶部弹出层中显示内容，内容过多可与scroll-view结合使用 |
# Props
| 属性名 | 类型 | 说明 | 默认值 |
|---|---|---|---|
| mask | Boolean | 是否需要遮罩 | true |
| show | Boolean | 控制显示 | false |
| backgroundColor | String | 弹层背景颜色 | #f2f2f2 |
| paddingbtm | Number | padding-bottom 单位rpx | 0 |
| height | Number | 高度 单位rpx | 580 |
| translatey | Number | 移动距离，下拉距离 单位rpx | 0 |
# Events
注：uni-app端绑定事件使用@前缀，如@close；微信小程序原生使用bind前缀，如bindclose
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| close | 关闭弹层时触发 | {} |
# 预览
# 特别说明
# 线上程序扫码预览
 |  |  |
|---|---|---|
| ThorUI组件库小程序码 | H5二维码 | ThorUI示例小程序码 |