下拉框的思路
1、通过固定定位 + animation 实现动画效果
2、通过绑定动态绑定类:class实现动画的交替
.anim {
animation: tobottom 1s ease-in;
animation-fill-mode: forwards;
}
@keyframes tobottom {
from {
top: -90px;
}
to {
top: 65px;
}
}
2、 通过 animation-fill-mode: forwards; 使动画停在最后一帧
单选框 及 点击相同按钮的样式切换
1、 单选实现：
通过点击事件 使 selectShow=循环索引 并通过动态绑定class 实现 动画的切换 :class="selectShow===index?'selectOne':''"
2、重复点击 通过判断id 是否相同来判断是否点击相同的按钮
<view style="display: flex;justify-content: space-around;">
<view class="item" v-for="(item,index) in list" :key="index" @click="filterSelect(index,$event)">
<view :id='index' :class="selectShow===index?'selectOne':''">
{
{item}}
<view :class="selectShow===index?'sanjiaoxing':''"></view>
<view :class="selectShow===index?'duihao':''">
<u-icon name="checkmark" color="white" size="14"></u-icon>
</view>
</view>
</view>
</view>
// 筛选选择
filterSelect(index, e) {
if (this.selectShow === -1) {
// 代表没有选中任何按钮
this.selectShow = index
this.clickBtn = e.target.id
} else if (this.clickBtn === e.target.id) {
// 代表是否点击相同的按钮
this.selectShow = -1
} else {
// 两者都不是的情况
this.selectShow = index
this.clickBtn = e.target.id
}
}
},
完整代码：
<template>
<view>
<view class="top">
<view class="date" @click="selectDate" style="width: 33vw;">
{
{
date}}
<u-icon style="margin-left: 5px;" name="arrow-down"></u-icon>
</view>
<!-- 日期选择器 -->
<u-picker mode="time" v-model="show" :params="params" @confirm='sure'></u-picker>
<view class="top-bottom">
<view>收入￥200<text style="margin-left: 10px;">支出￥50</text></view>
<view @click="filtrate">筛选 <text class="iconfont icon-shaixuan"></text> </view>
</view>
</view>
<view class="filter" :class="[show1?'anim':'filter',show2?'anim1':'filter']">
<!-- 油卡过期等 单选 -->
<view style="display: flex;justify-content: space-around;">
<view class="item" v-for="(item,index) in list" :key="index" @click="filterSelect(index,$event)">
<view :id='index' :class="selectShow===index?'selectOne':''">
{
{
item}}
<view :class="selectShow===index?'sanjiaoxing':''"></view>
<view :class="selectShow===index?'duihao':''">
<u-icon name="checkmark" color="white" size="14"></u-icon>
</view>
</view>
</view>
</view>
<!-- 确定 取消按钮 -->
<view class="btns">
<view class="btn" @click="show1=!show1,show2=!show1">取消</view>
<view @click="filtrate" class="btn" style="background-color: rgba(249, 80, 75, 100);color:white">确定
</view>
</view>
</view>
<!-- 遮罩层 -->
</view>
</template>
<script>
export default {
data() {
return {
list: [
'油卡过期退款', '余额提现', '提现退款'
],
show1: false,
show2: false,
clickBtn: '',
selectShow: -1,
date: "",
params: {
year: true,
month: true,
day: false,
hour: false,
minute: false,
second: false
},
show: false
}
},
methods: {
// 打开日期选择器
selectDate() {
this.show = true
},
// 日期选择器
sure(item) {
console.log(item, '日期')
this.date = item.year + '年' + item.month + '月'
},
// 筛选
filtrate() {
// 控制 动画
this.show1 = !this.show1
this.show2 = !this.show1
},
// 筛选选择
filterSelect(index, e) {
if (this.selectShow === -1) {
this.selectShow = index
this.clickBtn = e.target.id
} else if (this.clickBtn === e.target.id) {
this.selectShow = -1
} else {
this.selectShow = index
this.clickBtn = e.target.id
}
}
},
mounted() {
this.date = new Date().getFullYear() + "年" + ((new Date().getMonth() + 1) < 10 ? ('0' + (new Date()
.getMonth() + 1)) : (new Date().getMonth() + 1)) + '月'
}
}
</script>
<style scoped lang="scss">
.top {
width: 100vw;
height: 65px;
background-color: rgba(248, 248, 248, 100);
color: rgba(16, 16, 16, 100);
font-size: 14px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 20px;
}
.date {
color: rgba(36, 36, 36, 100);
font-size: 17px;
}
.top-bottom {
color: rgba(181, 179, 179, 100);
font-size: 14px;
margin-top: 5px;
display: flex;
justify-content: space-between;
align-items: center;
}
.icon-shaixuan {
font-size: 15px;
margin-left: 3px;
}
.filter {
width: 100vw;
height: 155px;
background-color: white;
color: rgba(16, 16, 16, 100);
position: fixed;
top: -90px;
z-index: -1;
}
.item {
margin-top: 25px;
width: 110px;
height: 36px;
background-color: rgba(246, 245, 245, 100);
line-height: 36px;
text-align: center;
}
.btns {
position: absolute;
bottom: 0;
display: flex;
width: 100%;
}
.btn {
display: block;
width: 50%;
height: 47px;
border-radius: 2px;
background-color: rgba(255, 241, 241, 100);
color: rgba(249, 80, 75, 100);
display: flex;
justify-content: center;
align-items: center;
}
.anim {
animation: tobottom 1s ease-in;
animation-fill-mode: forwards;
}
@keyframes tobottom {
from {
top: -90px;
}
to {
top: 65px;
}
}
.anim1 {
animation: toTop 1s ease-in;
animation-fill-mode: forwards;
}
@keyframes toTop {
from {
top: 65px;
}
to {
top: -90px
}
}
.selectOne {
border-radius: 2px;
background-color: rgba(255, 241, 241, 100);
position: relative;
color: rgba(249, 80, 75, 100);
}
.sanjiaoxing {
position: absolute;
width: 0;
height: 0;
border-bottom: 18px solid #FB706C;
border-left: 18px solid transparent;
right: 0;
bottom: 0;
}
.duihao {
position: absolute;
right: 2px;
bottom: 2px;
display: flex;
align-items: flex-end;
}
</style>